Typography

Word Slot

Loading…
Scene6s typicallandscape · portrait · square

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

  1. 01

    Stack MAKE, MOVE, LOOP, and a repeated MAKE in equal 1.15em cells.

  2. 02

    Mask the strip to one cell and hold the first word for 600ms.

  3. 03

    Preload downward by .045em over 240ms, then lift to the next cell over 540ms.

  4. 04

    Overshoot by .03em and settle for 240ms. Hold before the next advance.

  5. 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…