Show HN: Orbit – A CSS radial UI composer framework

[tinchox5]

https://zumerlab.github.io/orbit-docs/

[tinchox5]

Hello HN,

After a long time working on this project, I'm finally ready to share the first public version of Orbit. Although there's still much to be done, I believe this project is ready to move beyond internal testing.

Orbit is a CSS framework that lets you create simple or complex radial designs and UIs, from pie charts to radial menus, and even fully radial pages.

Orbit is designed to be simple, extensible and compatible with other tools and frameworks, using space-related concepts.

To see Orbit in action, check out the landing page, which is built with Orbit. You can also find additional examples here https://zumerlab.github.io/orbit-docs/examples/.

I hope you like it and I'd love to hear your thoughts and feedback.

Thanks! Martin

[th3w3bmast3r → tinchox5]

It looks really really cool. I'm really loving the "An abstract orbital map" example.

I am curious to know, what prompted you to make this framework?

[tinchox5 → th3w3bmast3r]

Glad you like it! Several years ago, I wrote my first project, Zircle UI, which mixed zoomable navigation with circular UI. It was not flexible at all, but I enjoyed it and learned a lot from this experience. Then, I decided to split Zircle into two independent parts: Orbit for radial UI (I mean, not constrained to circular shapes), and Zumly, a JS zoomable WIP engine (https://github.com/zumerlab/zumly). While you can use both projects together, they can also be used independently

[djhn → tinchox5]

I’ve been super interested in zoomable interfaces for text - there was an interesting demo in a rust conference talk: https://youtu.be/rC4FCS-oMpg?si=h6xv3fgOXkBTXg3R (skip to 14:45 to see it in action)

[th3w3bmast3r → tinchox5]

Very cool! Do you have a lot of design experience? The demo and the page was very artistically put together.

[tinchox5 → th3w3bmast3r]

I must confess that I don't have any experience in graphic design. I actually used existing examples that I thought were well-designed and tried to recreate them using Orbit to see if it was possible.

[leetrout → th3w3bmast3r]

Where is this example?

[th3w3bmast3r → leetrout]

https://zumerlab.github.io/orbit-docs/examples/ -> It was here.

[leetrout → th3w3bmast3r]

Thanks

[spankalee → tinchox5]

Very nice use of web components!

I wonder, could you make custom element alternatives to the .bigbang and .gravity-spot classes too? Then they could attach their own resize observers without requiring the developer to do so manually.

[tinchox5 → spankalee]

I was hesitant to develop custom elements at first because I wanted to use just CSS classes and custom variables. However, in certain cases, the developer experience is a mess without using custom elements. About your question, yes, I would make custom element alternatives.

[wonger_]

This is great. I like the intuitive API. Perfect timing, too -- I needed to make a pie menu today for a virtual whiteboard. Currently thinking about how to incorporate hover effects and selection.

Editing nits:

  https://zumerlab.github.io/orbit-docs/elements/satellite/#:~:text=content.%20If%20other-,contant,-than%20characters%20is
  contant -> content

  https://zumerlab.github.io/orbit-docs/layout/#:~:text=radius%20ranging%20from-,orbit0,-to%20orbit%2D12
  orbit0 -> orbit-0

  https://zumerlab.github.io/orbit-docs/elements/vector/#customization:~:text=size%3A%20Each%20.-,spke,-can%20be%20adjusted
  spke ->> ??

  https://zumerlab.github.io/orbit-docs/elements/orbit/#:~:text=latter%20one%20is-,abowe,-the%20former.
  abowe -> above

[tinchox5 → wonger_]

Thank you to detect these typos!! If you want to collaborate please click on Edit page link located at bottom of each page and create a PR. I'll merge ASAP.

[wonger_ → tinchox5]

Done :)

Here's the pie menu so far, in case anyone is interested: https://wonger.dev/unlisted/mobile-whiteboard

I had to add a bit of JS/CSS to get the "satellites" hoverable to my liking. The library gives you circle regions and capsules, and you could wrap each in a link or button tag, but that still leaves dead space between the pie slices. I ended up using some trig and pointer handlers. Not sure if I missed part of the docs, or if that's a consideration for future Orbit versions. Still a great library though.

[tinchox5 → wonger_]

Pretty awesome your pie menu!

I believe that "satellites" have pointer-events set to none by default. I would think in some solution, maybe adding a CSS utility to change that in case is needed

I've just merged your PR thank you!!

[thiht]

Pretty cool, this is inspiring for landing pages.

Just a heads-up though, the scroll animations activate pretty late. When I scrolled to "components", the first component displayed when it was kinda close too the off screen, which is not very comfortable. The animation should trigger a bit after entering the screen

[tinchox5 → thiht]

You are right! I will adjust. Thanks

[camillomiller]

It’s quite broken and not responsive (extends with horizontal scroll past the viewport) on iPhone 15 Pro Max.

[tinchox6 → camillomiller]

At this instance Orbit isn’t responsive. But it is resizable https://zumerlab.github.io/orbit-docs/tools/orbit-resize/

This is a thing I will try to solve in a future. Thanks!

[camillomiller → tinchox6]

Nice job, didn’t mean to pick!

[Art9681]

This is awesome. Well done. I am definitely going to try this out today.

[hschne]

Looks nice!

I'm on an older phone though and your landing Page murders it. Animations stutter and scrolling is pretty janky. Not sure I'd that's an issue with the components or something else?

[gavmor]

Oh, fun! I've been toying with some radial menu designs; this might be the impetus to attempt an implementation.

[tinchox5 → gavmor]

Cool, let me know!!

[pipesorter]

This is pretty interesting. With other frameworks it never occurred to think of something like this in every day design.

[wreckitron]

This is very cool !