Rolodex

Build a fullscreen preloader called Rolodex.

Compose it on warm off-white with near-black type, centred. Stack three things: a small uppercase monospace line reading ONE MOMENT with 0.42em letter-spacing in a muted grey; below it the word mask; below that a short 16-unit accent-coloured bar, a few pixels tall and fully rounded.

The mask is a box exactly one line tall with overflow hidden. Inside it put a track of five stacked lines, each the same height as the mask, reading Loading, Rendering, Composing, Polishing, Loading. Set them in a geometric sans at weight 600 with -0.04em tracking, around 11% of the stage's smaller dimension.

Animate the track's translateY across 7.5s on cubic-bezier(0.76, 0, 0.24, 1), stepping through 0, -20%, -40%, -60% and -80% of its own height. Each step should snap over roughly a sixth of the cycle and then hold still for the rest, so the motion reads as a mechanical flip rather than a slow scroll. The fifth line repeats the first, which is what lets the loop close with no visible jump back to the top.

Loop forever. Under prefers-reduced-motion, hold the track on a single word.