Overview
Move one continuous strip through a fixed mask. Hold each word, preload in the opposite direction, advance by exactly one cell, and settle. A repeated first cell makes the loop continuous.
Build
- 01
Stack MAKE, MOVE, LOOP, and a repeated MAKE in equal 1.15em cells.
- 02
Mask the strip to one cell and hold the first word for 600ms.
- 03
Preload downward by .045em over 240ms, then lift to the next cell over 540ms.
- 04
Overshoot by .03em and settle for 240ms. Hold before the next advance.
- 05
Repeat the same cadence twice more. End on the duplicated first cell so the six-second loop joins cleanly.
Example source React / TSX
examples/slot-machine-ticker.tsx · Uses the catalog’s shared composition helpers.
Loading source…