* Prezi Prezi pioneered the zooming canvas for presentations and remains the market leader in that space. It recently added AI-powered generation and text editing tools. It's a polished product with real traction.
But Prezi is a closed platform, not a library. You can't use its zoom engine in your own app. Pricing starts at $15/month for meaningful features, and exporting to PowerPoint flattens all zoom effects into static slides. A recurring complaint from users is that the zooming and panning transitions cause motion sickness. And fundamentally, Prezi uses zoom as a storytelling device between pre-arranged frames. It's not a navigation model. It's a presentation model.
* impress.js impress.js brought Prezi-like zooming to the open web. It's a presentation framework based on CSS3 transforms and transitions, directly inspired by Prezi. It was genuinely groundbreaking when it launched. Its architecture is step-based: you position "steps" in 3D space and the camera moves between them. That's great for presentations, but it doesn't help you build an app where users navigate by zooming into content. impress.js has no concept of dynamically mounting views, managing zoom depth, or handling navigation state. It's a slide deck engine with a zoom trick.
* Zumly This is what I built. Full disclosure: I'm the sole developer. The idea is offering an alternative to traditional page navigation using zooming. You mark an element as zoomable, point it to a view, and Zumly handles the transition and inserts new views. That's basically it.
I started Zumly in 2020 after leaving behind Zircle UI (a Vue zooming library), trying to take what I learned further. Framework-agnostic, focused just on the zoom part. Since then I've rewritten the engine several times, changed the approach more than once. Only now I'm actually happy with how it feels.
Views are dynamically mounted and unmounted during zoom transitions. In impress.js, all steps exist in the DOM simultaneously. In Zumly, you zoom into a trigger element, and the target view gets injected and scaled into place. This is closer to how routing works in SPAs than to how slide decks work.
The landing page is built with Zumly itself so you can get the feel before touching any code.
Curious if anyone else has thought about this space. What makes zooming UIs work or fail?
Landing page (built with Zumly): https://zumerlab.github.io/zumly
GitHub: https://github.com/zumerlab/zumly
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...
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.
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!
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.
Like I wouldn't expect any other frontend router library to decorate links for me in a certain way.
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.
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
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.
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
TIL
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.
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.