9 ms·
Show HN: Orbit – A CSS radial UI composer framework
- tinchox5 2y agoHello 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/ 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 2y agoIt 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 2y agoGlad 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 https://github.com/zumerlab/zumly). While you can use both projects together, they can also be used independently
- th3w3bmast3r 2y agoVery cool! Do you have a lot of design experience? The demo and the page was very artistically put together.
- tinchox5 2y agoI 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.
- djhn 2y agoI’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 https://youtu.be/rC4FCS-oMpg?si=h6xv3fgOXkBTXg3R (skip to 14:45 to see it in action)
- leetrout 2y agoWhere is this example?
- th3w3bmast3r 2y agohttps://zumerlab.github.io/orbit-docs/examples/ https://zumerlab.github.io/orbit-docs/examples/ -> It was here.
- leetrout 2y agoThanks
- spankalee 2y agoVery 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 2y agoI 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.
- Art9681 2y agoThis is awesome. Well done. I am definitely going to try this out today.
- pipesorter 2y agoThis is pretty interesting. With other frameworks it never occurred to think of something like this in every day design.
- camillomiller 2y agoIt’s quite broken and not responsive (extends with horizontal scroll past the viewport) on iPhone 15 Pro Max.
- tinchox6 2y agoAt this instance Orbit isn’t responsive. But it is resizable https://zumerlab.github.io/orbit-docs/tools/orbit-resize/ https://zumerlab.github.io/orbit-docs/tools/orbit-resize/ This is a thing I will try to solve in a future. Thanks!
- camillomiller 2y agoNice job, didn’t mean to pick!
- thiht 2y agoPretty 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
- deleted 2y ago[deleted]
- tinchox5 2y agoYou are right! I will adjust. Thanks
- wonger_ 2y agoThis 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 2y agoThank 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_ 2y agoDone :) Here's the pie menu so far, in case anyone is interested: https://wonger.dev/unlisted/mobile-whiteboard 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 2y agoPretty 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!!
- hschne 2y agoLooks 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 2y agoOh, fun! I've been toying with some radial menu designs; this might be the impetus to attempt an implementation.
- tinchox5 2y agoCool, let me know!!
- wreckitron 2y agoThis is very cool !