Shared-element transitions
Click a card — its thumbnail morphs into the detail page's hero.
Hit back — the hero shrinks back into the grid. No JavaScript
animation code: the browser does it all via
view-transition-name.
Ember
Warm reds and deep oranges — the palette of glowing coals.
Ocean
Cool blues stretching from shallow reef to open water.
Forest
Dense greens layered from canopy to mossy floor.
Sunset
Amber and gold bleeding across the horizon line.
Violet
Electric purple fading into dusky lavender.
Coral
Hot pink meeting soft rose — reef meets sky.
How it works
The View Transitions API pairs elements across navigations by
matching their view-transition-name. Give the same
name to the source thumbnail and the destination hero — the
browser computes the position and size delta and animates between
them automatically.
<div style="view-transition-name: card-ember; background: #ef4444"
class="thumbnail">div>
<div style="view-transition-name: card-ember; background: #ef4444"
class="hero">div>
The router already wraps every client-side navigation in
document.startViewTransition(), so there's nothing
extra to wire up. Browsers that don't support the API (Firefox
today) get instant navigation with no errors.