View Transitions Without the SPA

For years, smooth page transitions were the exclusive perk of single-page apps. You paid for them with a client router, a hydration bill, and a whole class of state-management bugs. The browser’s View Transitions API quietly ended that trade.

One line

In Astro, you drop <ClientRouter /> into the layout head and the document starts cross-fading between navigations. That is the whole setup. No route config, no loading states, no framework.

Shared elements are the magic

The real payoff is transition:name. Give a thumbnail on the index page and the hero on the detail page the same name, and the browser morphs one into the other across the navigation. The image appears to fly into place. It reads as expensive. It costs nothing.

Restraint beats spectacle

The temptation is to animate everything. Resist it. A morphing hero image plus instant content reads as polished. A page where every element slides and fades reads as slow. Pick the one element that benefits from continuity and let the rest swap instantly.