How do sites like Unseen (https://unseen.co/) and Basement Studio (https://basement.studio/) achieve smooth page transitions with URL updates?
I’m trying to understand the technical approach behind these beautifully animated transitions where:
The URL changes like a normal multi-page app.
The transitions feel seamless, almost like a single-page experience.
It looks like there’s a shared 3D or WebGL “scene” where the camera moves, rather than completely reloading a new page.
Are they using a single persistent scene and just moving the camera/UI components between “pages”? Or are these separate routes with custom transitions layered on top?
If I were to build something similar, what would be the best approach in terms of performance, routing, and animation handling—especially if I’m using technologies like Next.js, Three.js, GSAP, etc.?
Any insights into the architecture or patterns (e.g., SPA with custom router, app shell model, WebGL canvas persistence) would be really helpful.
Would you like a breakdown of how you could build something similar step-by-step?
I’d first search for “update URL without refresh” or "update URL without reload” and try some of the suggestions.
2 Likes
As you can see on Unseen, there is one building model, and the rest is generally speaking the camera work a → b → c… transitions with shaders have been implemented between the movements. Here you have the idea of a transition, but between images. But when you remove images from this concept or use them to transition between camera sections, you get what you’re looking for.
A good example of such a transition is when the camera goes underwater… you have camera movement between sections, and the shader transition is halfway through this distance.
And you can according to that synchronize camera movements in your with URL updates.
Look here
2 Likes
Hi, here Tomas from Basement Studio. We position the canvas at layout layer using Next.js, and the camera transitions based on the route — we change its configuration and basically by lerping the camera rotation and position. Remember, it’s open source!! GitHub - basementstudio/website-2k25, also we wrote a blog about the process of developing such a website: New Digital HQ — pt 1 | Blog Good luck with your project and see you in the basement.
1 Like
