View Transitions
Route transitions in CSS, no extra animation library. Open a card and the header morphs into the detail hero. The compositor does the work (~3KB).
How it works
view-transition-name on matching elements in both pages tells the browser to animate between them.
<ViewTransition> wraps the element; CSS ::view-transition-old and ::view-transition-new control the animation keyframes.
transitionTypes on <Link> (new in Next.js 16.2) passes named types to React.addTransitionType, letting CSS target :active-view-transition-type() to trigger directional slides.
Aurora Borealis
Natural phenomenon
Polar sky light when solar particles hit the upper atmosphere, roughly 60–200 miles up.
Deep Ocean Vent
Hydrothermal system
Superheated mineral-rich water jets from cracks in the ocean floor, sustaining entire ecosystems without sunlight, miles below the surface.
Lava Flow
Volcanic eruption
Molten rock at 700–1200 °C pours down volcanic slopes, building new land as it cools and solidifies into basalt over days and weeks.
Bioluminescence
Living light
Some sea life makes cold blue-green light chemically: signaling, hiding, or hunting in the dark.
Enable in next.config.ts:
// next.config.ts
const nextConfig = {
experimental: {
viewTransition: true,
},
};
// Shared element transitions (React 19.2):
import { ViewTransition } from "react";
<ViewTransition name="card-aurora">
<MyCard /> {/* same name on both pages = shared element */}
</ViewTransition>
// Directional slide transitions (Next.js 16.2):
<Link href="/detail/1" transitionTypes={["slide-forward"]}>
Open detail
</Link>
/* globals.css: target the type with CSS */
::view-transition-new(root):active-view-transition-type(slide-forward) {
animation: slide-in-from-right 300ms ease both;
}