Cascade
Page transitions: the link fires and the new page grows out of the paper.
Anatomy
| Firing | the link you click is a cell and fires; pulses of dense grain run down bowed axons to cells at least 150px apart (18 at most) |
|---|---|
| Spread | each cell a pulse reaches flares and fires onward to its two nearest unfired neighbours (three from the first) |
| Landing | the new page grows out of the paper along each axon and out from each cell in ragged square fronts, landing as Bayer grain turning to ink |
| Timing | a 2px dot, pulses at 2.6px/ms, scaled to land within 680ms, so it ends at ~0.7–0.8s |
| Solve | ~20–40ms, started on pointerdown while the router fetches the page |
| Fallback | a congested main thread solves at a 4px dot; anything failing, and reduced motion, is a hard cut |
| Return | leaving a document for a page that links to it plays backwards, burning into the link it was opened from |
From src/lib/transitions/cascade.ts and the guide’s Motion §8.
Decisions
-
Grows from where you clicked
Replaced the Bayer dissolve as the default in Oct 2026, so a navigation reads as the hero culture firing. Chosen over a single burn from the link and a volley of cells firing in a wave.
-
The old page clears
Cutting the old page’s snapshot with a mask every frame was slow in every browser, so it clears to paper at the swap. Do not go back to per-frame masks on the snapshots.
-
The first load plays it
A hard load fires from the middle of the screen, so arriving reads like moving through the site (Oct 2026), chosen over per-section entrances.
-
The theme switch plays it
Fired from the switch, the new theme grows out of the old paper. It replaced a uniform dissolve in a safelight red, the last red on screen that wasn’t a control’s state.