Page Transitions (original) (raw)

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.

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