Page transitions
Scene changes between collections, live: one @view-transition rule, nine flavours, and real links below to go see them fire.
Between-page motion is collection-flavoured: each destination announces itself the way its medium would. One CSS at-rule turns this on for every same-origin navigation — no JavaScript, and a browser that doesn't support it just navigates, which is the whole point of shipping it as progressive enhancement rather than a router.
@view-transition {
navigation: auto;
}
html[data-transition='takeoff']::view-transition-old(root) {
animation: ptTakeoffOut var(--dur-4) var(--ease-in) both;
}
html[data-transition='takeoff']::view-transition-new(root) {
animation: ptTakeoffIn var(--dur-4) var(--ease-out) both;
}the whole mechanism — 05-motion.css, and one data-transition attribute the destination's own shell sets
Try it
Click through — then use the browser's back button, which fires the same transition in reverse. Nine flavours: five completed from the spec below, four built new for this system's own collections.
takeoff
The outgoing page banks and climbs away on a diagonal; the incoming one arrives from the same angle — a plane-departure sweep.
Visit →Coursepop
A small, confident scale-up. Pen-to-table snap, not a slide — a lesson starts, it doesn't arrive from off-screen.
Visit →Résuméunfold
A vertical reveal from the top down, like a folded page opening flat.
Visit →Blogtype
New — the page is wiped in left to right, in discrete steps: a cursor writing it into place.
Visit →Webseriesslate
New — the clapperboard. The outgoing page slams shut to a line; the incoming one snaps open from it, built from the same device as icons/creator/slate.svg.
envelope
New — the page unfolds down from the top, like a letter coming out of an envelope. Completes a flavour the spec named and nothing built until now.
Visit →Projectsterminal
New — a hard contrast snap, then a left-to-right wipe: prompt, command, enter, the same beat the spec described for a terminal run.
Visit →Videosstatic
New — a beat of TV static before the picture resolves, exactly the beat the spec named for Videos/YouTube.
Visit →Guidesturn
New — a page-turn: the incoming page rotates up from the left edge like a leaf of a book settling flat.
Visit →Default collectioncross-fade
No flavour set — a plain cross-fade, so an unstyled destination still feels intentional rather than missing.
Visit →The rest of the spec
Named, and the keyframe exists in 05-motion.css — it waits for a page in this system to be the destination it describes.
| Destination | Flavour |
|---|---|
Timeline | years passing, motion-blurred |
Disabled entirely under reduced motion — every ::view-transition-* pseudo-element collapses to animation: none, which is what the browser does with @view-transition here anyway. A transition is a scene change, never a loading screen, and never a thing a reader has to wait through.