Menu burn
The cascade at the scale of a popover.
Anatomy
| Firing point | the panel’s edge nearest what opened it: the trigger’s centre, or the point clicked |
|---|---|
| Cells | pulses run down short bowed axons to up to four more cells at least 72px (three modules) apart |
| Landing | the panel burns outward from every cell and axon in ragged square fronts, as Bayer grain turning to ink, at the cascade’s 2px dot |
| Seam | 30ms (the cascade’s 60ms made a 70px band of ink across a 240px panel) |
| Pass | 300ms for the site menu and the performance panel; 360ms for contact, the all-work modal and the lab card; closing takes the same time |
| How it plays | a clip-path: path() rebuilt each frame from runs of visible dots; the seam, pulses and flares on a canvas inside the panel |
| Cost | ~10ms to solve and paint the first frame, inside the click |
| Reduced motion | a hard cut both ways |
From src/lib/transitions/menu-burn.ts and the guide’s Motion §9.
Decisions
-
Clip, not mask
A clip applies synchronously, where a new mask image behaves as none until it is rasterised, so the panel never shows whole for a frame.
-
The cascade at a popover’s scale
Replaced the Screen/Plate dissolve on the menus in Oct 2026, so they open in the same language as a navigation.
-
Focus first
Focus moves to the first item at once: a keyboard user never waits out the grain. A panel burning away is not a target.
-
The last fade
The all-work modal followed the same month, replacing a 150ms scrim fade, the last layer still fading in.