Ticker

Build a fullscreen preloader called Ticker.

Stack three rows centred on a near-black stage. The top and bottom are scrolling marquees; between them, centred, sits a small pill with a one-pixel white border at 20% opacity holding an uppercase monospace line with 0.35em letter-spacing.

Each marquee is a track laid out at max-content width containing two identical copies of the same run of words. Fill each copy with eight repetitions of a word set in a geometric sans at weight 600, uppercase, tracking -0.03em, around 9% of the stage's smaller dimension, separated by a small accent-coloured asterisk.

Animate the track's translateX from 0 to -50%. Because the track holds exactly two copies of the same content, moving half its own width lands the second copy precisely where the first began, so the wrap is mathematically invisible with no measuring and no JavaScript.

Run the top row forward over 16s and the bottom row reversed over 21s, dropping the bottom row to 30% opacity. The mismatched durations stop the two rows from ever locking into a pattern, and the opacity difference gives the composition a foreground and a background instead of two competing bands.

Set the whole stage to overflow hidden. Loop forever, and under prefers-reduced-motion hold both rows still.