The View Transitions API has been quietly shipping for a while now, and after using it on three production sites I'm convinced it's one of the best additions to the platform in years.
The basic incantation
document.startViewTransition(() => {
root.render(<NextScreen />)
})That's the API. The rest is CSS — you tag the elements you want to morph with
view-transition-name and the browser handles the rest.
Pitfalls
- Don't transition everything. Pick the moments that matter.
- Watch for layout shifts during the transition itself.
- Reduced-motion users should get an instant cut.