As someone who suffers from vestibular migraines, unfortunately visiting the demo site instantly made get dizzy. I highly encourage you to implement the "@media (prefers-reduced-motion: reduce)" media query to handle accessibility [1]. I'd hopefully expect the zooms to turn into normal links or failing that, either slow down or have some kind of non-vestibular-attack-inducing flow.
I don't say this as criticism as I'm sure you've never heard of these issues before, but something I'd encourage you (or anyone who relies on animations) to implement into their package.
Interesting way to use zooming as a way to transition deeper into sub-dashboards. The navigation from "Mission Control" -> "Satellite" -> "Subsystem" feels oddly intuitive and fun.
I would maybe opt for keeping a consistent navbar/sidebar, to support out-of-zoom navigation. And if we are dealing with a lot of power-users some breadcrumb to quickly go back to any zoom-level. But overall, i think this could totally work.
I really love this (and miss the days when Prezi was simple and straightforward).
I've written an app myself along sort-of similar lines, but it's less a presentation app and more a thought organizer (works on all Apple platforms). https://mindscopeapp.com
I think what proved key for my own "zoomable" UI was cross-linking, search, and speed/snappiness. Make the animations too heavy and it just slows you down. Zumly seems really great in this regard. Well done!
Really cool, like others are saying this makes you feel like you are interacting with all the pages at once instead of one page at a time.
I did notice that forward doesn't seem to work. I.E. If I click into a page, it zooms in, press back it zooms back out, press forward it flickers the url but doesn't have normal forward behavior.
I also don't know if you want to support `open in new tab` but that would be a hard req for many people.
Good catch on forward navigation. Architecturally I don't keep a history of already-visited views, so forward has nowhere to go. It's something worth tackling though, especially for programmatic navigation flows. Open in new tab is on my radar too.
Under the hood aren't you pushing things into the browser history as navigation happens? I wouldn't try to rewrite the history api myself but just make sure you `pushState()` as navigation happens.
Love it. But there is a significant usability issue: Lack of signifier (aka affordance). How do I known when something is zoomable? Because there is no signifier, I am frequently disappointed when I click on something and it turns out it is not zoomable.
I'd say this is more of an interesting take on page transitions. I was expecting mouse wheel scroll to zoom, so I instinctively scrolled expecting some kind of zooming effect.
I remembered there was a website featured here on HN that had an interactive tour of the scale of the universe ranging from the very microscopic world (if I remember correctly I think it even went down to Planck length) all the way to the macroscopic (black holes, galaxies). I'd be interested in such a zooming library that achieves something like that.
This looks seriously impressive. Also, I wonder what the a11y implications are. I don't miss Macromedia Flash hell at all. This is HTML5, so with a bit of effort it could look beautiful and still cater to the visually impaired.
Edit: I can't scroll any of the showcases. Probably deliberate, but a cut-off UI can be annoying.
Edit2: I opened the yellow car on the production line and going back the page got all offscreen and looks messed up
Has anybody built a UI around the opposite? Shrinking?
ie rather that zooming in on the content of interest, shrinking the content not of interest?
Long time ago I used to use https://www.windowmaker.org/ as my X11 window manager and one of the features I really liked was the ability to shrink a window to an icon and place that icon on the desktop for future retrieval ( a bit like having the whole desktop like the MacOS dock ).
I find such an interface easier to navigate than one where you zoom in and out - where the it's too easy to lose overall context, and where navigation is a bit too linear/hierarchical.
This is indeed seriously impressive. I keep wanting to keep my entire knowledgebase on a canvas so that I can "think" or navigate spatially. Thisis neat.
In the main landing page, as I was clicking around, I kept wishing to have a legend to show me either "how deep I am" or "how do I get out of here?", and like someone else commented, I would love an affordance showing me what was clickable/zoomable.
Feels sluggish, but maybe this could be fixed by reducing the transition time.
But why? People usually don't notice such transition effects and it doesn't affect user experience in any meaningful positive way. It feels absolutely unnecessary.
Maybe you could re-use it as a mod for some game engine. This feels appropriate for video games; not for web-sites.
I have the exactly opposite view, possibly with the same amount of conviction. It feels very necessary to communicate hierarchy and where things are coming from and going. It communicates a lot of important information and continuity. In real life, you don’t have things suddenly appearing and disappearing all the time. That’s not how our brains are conditioned.
Firefox issues are real and I want to fix them. On the "why", fair to be skeptical, it's not for every UI. But I do think it makes sense when hierarchy needs to feel spatial.
I think zooming is effective when it's used in isolation for discrete things. It does add a sense of delight, but there is a functional usefulness of this that I'm trying to wrap my head around.. perhaps a transition effect for an immersive demo, etc.. nice work.
very well made :) for documentation and specific dashboards this has a lot of great uses
i played with a similar concept back when everyone was starting to 'drill down into big data' on their ipads, and i never came up with a clever way of drilling 'sideways', or allowing people to go between one 'insight' from one deep level and tie it into another without zooming all the way back out and then back in, contextual 'wormholes' (all handmade), or breadcrumbs (messy after enough layers)
one thing i'd add to the demo is detecting where i'm hovering over while scrolling to scroll into that part (on a mouse), scroll out works
I have great respect for people pursuing their special interests with such perseverance - you clearly care about zooming UIs.
And so do I (just to a lesser extent)! It’s a great way to express hierarchy.
One thing I encountered is that it becomes all buggy after using the slide-back navigation gesture in iOS Safari. Yet this being natively handles would be a really cool thing to me, like those iOS “close back to thumbnail” gestures you sometimes see when scrolling up/down that I haven’t really seen replicated anywhere else.
As someone who suffers from vestibular migraines, unfortunately visiting the demo site instantly made get dizzy. I highly encourage you to implement the "@media (prefers-reduced-motion: reduce)" media query to handle accessibility [1]. I'd hopefully expect the zooms to turn into normal links or failing that, either slow down or have some kind of non-vestibular-attack-inducing flow.
Here are some other good resources: https://www.a11yproject.com/posts/understanding-vestibular-d... or https://web.dev/articles/prefers-reduced-motion
I don't say this as criticism as I'm sure you've never heard of these issues before, but something I'd encourage you (or anyone who relies on animations) to implement into their package.
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/A...
You can use driver none to avoid transitions. And I’m working on reduce motion
Interesting way to use zooming as a way to transition deeper into sub-dashboards. The navigation from "Mission Control" -> "Satellite" -> "Subsystem" feels oddly intuitive and fun. I would maybe opt for keeping a consistent navbar/sidebar, to support out-of-zoom navigation. And if we are dealing with a lot of power-users some breadcrumb to quickly go back to any zoom-level. But overall, i think this could totally work.
Appreciate it! Breadcrumbs and back navigation are definitely on my radar.
I really love this (and miss the days when Prezi was simple and straightforward).
I've written an app myself along sort-of similar lines, but it's less a presentation app and more a thought organizer (works on all Apple platforms). https://mindscopeapp.com
I think what proved key for my own "zoomable" UI was cross-linking, search, and speed/snappiness. Make the animations too heavy and it just slows you down. Zumly seems really great in this regard. Well done!
Thanks! Speed was a big focus, glad it comes through. Your app looks really cool btw.
Really cool, like others are saying this makes you feel like you are interacting with all the pages at once instead of one page at a time.
I did notice that forward doesn't seem to work. I.E. If I click into a page, it zooms in, press back it zooms back out, press forward it flickers the url but doesn't have normal forward behavior.
I also don't know if you want to support `open in new tab` but that would be a hard req for many people.
Good catch on forward navigation. Architecturally I don't keep a history of already-visited views, so forward has nowhere to go. It's something worth tackling though, especially for programmatic navigation flows. Open in new tab is on my radar too.
Under the hood aren't you pushing things into the browser history as navigation happens? I wouldn't try to rewrite the history api myself but just make sure you `pushState()` as navigation happens.
Love it. But there is a significant usability issue: Lack of signifier (aka affordance). How do I known when something is zoomable? Because there is no signifier, I am frequently disappointed when I click on something and it turns out it is not zoomable.
that would be more on the consumer of the library than on the library imo.
Like I wouldn't expect any other frontend router library to decorate links for me in a certain way.
Fair point. No visual cue for what's zoomable is a real gap. Thinking about how to handle that without cluttering the UI.
Maybe an icon on hover or a small static icon but the latter could get repetitive, the hover would solve the repetition.
I'd say this is more of an interesting take on page transitions. I was expecting mouse wheel scroll to zoom, so I instinctively scrolled expecting some kind of zooming effect.
I remembered there was a website featured here on HN that had an interactive tour of the scale of the universe ranging from the very microscopic world (if I remember correctly I think it even went down to Planck length) all the way to the macroscopic (black holes, galaxies). I'd be interested in such a zooming library that achieves something like that.
Yeah the scroll expectation comes up a lot. Scale of the Universe was scijs I think, different beast but a great example of zoom done right.
This looks seriously impressive. Also, I wonder what the a11y implications are. I don't miss Macromedia Flash hell at all. This is HTML5, so with a bit of effort it could look beautiful and still cater to the visually impaired.
Edit: I can't scroll any of the showcases. Probably deliberate, but a cut-off UI can be annoying.
Edit2: I opened the yellow car on the production line and going back the page got all offscreen and looks messed up
Thanks! The a11y angle is something I want to tackle properly. Noted the bugs too, the car one is a known issue.
I turn of scroll events except on home assistant. You can enable or disable depending on your needs
Has anybody built a UI around the opposite? Shrinking?
ie rather that zooming in on the content of interest, shrinking the content not of interest?
Long time ago I used to use https://www.windowmaker.org/ as my X11 window manager and one of the features I really liked was the ability to shrink a window to an icon and place that icon on the desktop for future retrieval ( a bit like having the whole desktop like the MacOS dock ).
I find such an interface easier to navigate than one where you zoom in and out - where the it's too easy to lose overall context, and where navigation is a bit too linear/hierarchical.
Cool stuff!! Knowing CSS, the road must have been full of headaches and compromises.
I think about this space a lot, see Eagle Mode: https://www.youtube.com/watch?v=G6yPQKt3mBA
My jaw did drop. This could pair really well with a hybrid bread crumb + menu that gives you an escape hatch or granular on demand traversal. Love it!
Thank you!!
This is indeed seriously impressive. I keep wanting to keep my entire knowledgebase on a canvas so that I can "think" or navigate spatially. Thisis neat.
In the main landing page, as I was clicking around, I kept wishing to have a legend to show me either "how deep I am" or "how do I get out of here?", and like someone else commented, I would love an affordance showing me what was clickable/zoomable.
Thanks! Both the depth indicator and the zoomable affordance are things I'm actively working on. Glad the spatial navigation idea resonates.
Doesn't work correctly in Firefox.
Feels sluggish, but maybe this could be fixed by reducing the transition time.
But why? People usually don't notice such transition effects and it doesn't affect user experience in any meaningful positive way. It feels absolutely unnecessary.
Maybe you could re-use it as a mod for some game engine. This feels appropriate for video games; not for web-sites.
I have the exactly opposite view, possibly with the same amount of conviction. It feels very necessary to communicate hierarchy and where things are coming from and going. It communicates a lot of important information and continuity. In real life, you don’t have things suddenly appearing and disappearing all the time. That’s not how our brains are conditioned.
Firefox issues are real and I want to fix them. On the "why", fair to be skeptical, it's not for every UI. But I do think it makes sense when hierarchy needs to feel spatial.
Weird, seems to work fine in Firefox on Android.
It's extremely easy to break your landing page with the back swipe gesture on mobile safari.
I think zooming is effective when it's used in isolation for discrete things. It does add a sense of delight, but there is a functional usefulness of this that I'm trying to wrap my head around.. perhaps a transition effect for an immersive demo, etc.. nice work.
Thanks! Yeah, immersive demos and dashboards are where it seems to click best.
very well made :) for documentation and specific dashboards this has a lot of great uses
i played with a similar concept back when everyone was starting to 'drill down into big data' on their ipads, and i never came up with a clever way of drilling 'sideways', or allowing people to go between one 'insight' from one deep level and tie it into another without zooming all the way back out and then back in, contextual 'wormholes' (all handmade), or breadcrumbs (messy after enough layers)
one thing i'd add to the demo is detecting where i'm hovering over while scrolling to scroll into that part (on a mouse), scroll out works
Interesting. At one point I pinched my iPad to zoom out of habit and it got very confused. But yea, interesting.
Ha, noted. Pinch conflicts are a known pain point on touch devices, need to sort that out.
HA! I Love it! It's a been a while since I felt this sort of joy exploring a new way to navigate
> remains the market leader in that space
TIL
Would suggest using history-api navigation over the hash based routing.
Good call, hash routing was the quick path. History API is on the list.
The Home Assistant showcase looks fabulous.
Glad you liked it! That one was fun to build.
I have great respect for people pursuing their special interests with such perseverance - you clearly care about zooming UIs.
And so do I (just to a lesser extent)! It’s a great way to express hierarchy.
One thing I encountered is that it becomes all buggy after using the slide-back navigation gesture in iOS Safari. Yet this being natively handles would be a really cool thing to me, like those iOS “close back to thumbnail” gestures you sometimes see when scrolling up/down that I haven’t really seen replicated anywhere else.
That means a lot, thanks. The iOS back gesture thing is tricky but would be really sweet to pull off.
"Zooming UIs in 2026: Prezi, impress.js, and why I built something different"