[HN Gopher] Show HN: Orbit - A CSS radial UI composer framework
___________________________________________________________________
Show HN: Orbit - A CSS radial UI composer framework
Author : tinchox5
Score : 97 points
Date : 2024-08-08 09:35 UTC (13 hours ago)
(HTM) web link (zumerlab.github.io)
(TXT) w3m dump (zumerlab.github.io)
| tinchox5 wrote:
| 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 wrote:
| 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 wrote:
| 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
| th3w3bmast3r wrote:
| Very cool! Do you have a lot of design experience? The demo
| and the page was very artistically put together.
| tinchox5 wrote:
| 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 wrote:
| Where is this example?
| th3w3bmast3r wrote:
| https://zumerlab.github.io/orbit-docs/examples/ -> It was
| here.
| leetrout wrote:
| Thanks
| spankalee wrote:
| 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 wrote:
| 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.
| Art9681 wrote:
| This is awesome. Well done. I am definitely going to try this out
| today.
| pipesorter wrote:
| This is pretty interesting. With other frameworks it never
| occurred to think of something like this in every day design.
| camillomiller wrote:
| It's quite broken and not responsive (extends with horizontal
| scroll past the viewport) on iPhone 15 Pro Max.
| tinchox6 wrote:
| 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 wrote:
| Nice job, didn't mean to pick!
| thiht wrote:
| 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
| wonger_ wrote:
| 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-do
| cs/elements/satellite/#:~:text=content.%20If%20other-,contant,-th
| an%20characters%20is contant -> content
| https://zumerlab.github.io/orbit-docs/layout/#:~:text=radius%20ra
| nging%20from-,orbit0,-to%20orbit%2D12 orbit0 -> orbit-0
| https://zumerlab.github.io/orbit-docs/elements/vector/#customizat
| ion:~:text=size%3A%20Each%20.-,spke,-can%20be%20adjusted
| spke ->> ?? https://zumerlab.github.io/orbit-docs/elem
| ents/orbit/#:~:text=latter%20one%20is-,abowe,-the%20former.
| abowe -> above
| tinchox5 wrote:
| 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_ wrote:
| 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 wrote:
| 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!!
| hschne wrote:
| 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?
___________________________________________________________________
(page generated 2024-08-08 23:01 UTC)