// aurora
Aurora
A drifting band of color blooming across the night.
Long-form description for the Aurora tile. The shared-element transition keeps the title and color band fixed while the surrounding panel expands.
// live demo
View Transitions
Click any tile. The browser uses the native View Transitions API to morph from the small card to a full detail panel — sharing the title, the accent, and the surface — with CSS-controlled easing. Zero libraries. Falls back to a clean fade in browsers that don't support it yet.
- View Transitions API
- CSS animations
- Native browser
- Progressive enhancement
// lattice
Lattice
A grid of intersections, each a point of possibility.
The Lattice expands using ::view-transition-group(tile-name) to pair the small card with its larger detail panel — the browser interpolates everything in between.
// pulse
Pulse
A single beat against a steady, indifferent background.
Pulse: a meditation on rhythm. The transition runs with cubic-bezier easing and a 360ms duration, matching the rest of the site's motion language.
// orbit
Orbit
Two bodies, one path, every revolution slightly different.
The Orbit tile carries its background image and headline through the morph, so the user feels a continuous spatial relationship rather than a hard cut.
Browser support: Chromium-based
browsers and Safari 18+ run the morph. Other browsers see an instant swap
(still functional, just without the smooth interpolation). The detail panels
are rendered server-side and toggled with hidden — no SPA framework.