Components

Slot machine

Rotating phrases: .wckd-slot-machine with direct child <span> lines. wckdSlotMachines() chains timeouts, respects prefers-reduced-motion, and sets aria-live="polite" + role="status" unless you override.

Jump to:

Download & setup

Download WCKD UI Style guide

Load the kit from Get Started; use the style guide for utilities and tokens while wiring this component.

Default implementation

Looping headline qualifier

Default behaviour loops forever. data-speed is the interval in milliseconds between advances (default 1000). Each child <span> is one phrase; keep copy short for layout stability.

Ship faster for developers designers product teams

Markup

<h2>
  Observability for
  <span class="wckd-slot-machine" data-speed="1500">
    <span>Development</span>
    <span>Operations</span>
    <span>Everyone</span>
  </span>
</h2>

Configuration options

Each variant keeps the same markup contract as the default; add only the classes or attributes named in the heading.

Stop on the last phrase

Set data-loop="false" to land on the final span and stop the timer. Useful when the last word is the punchline.

We build for startups scale-ups enterprises

Markup

<span class="wckd-slot-machine" data-speed="1500" data-loop="false">
  <span>Development</span>
  <span>Operations</span>
  <span>Everyone</span>
</span>

When to use

  • Hero lines that swap a qualifier beside fixed copy.
  • Playful brand moments where one anchor word stays static and the rest cycles.

Implementation notes

  • Requires wckd-ui.js bootstrap (registry key slotMachines) or the optional kit file wckd-ui-kit/components/slot-machine.js on pages that do not load the full bundle.
  • Each root is bound once via data-wckd-slot-machine-bound. Use only direct child <span> elements for rotating lines.
  • When (prefers-reduced-motion: reduce) matches, the script adds wckd-slot-machine--reduced so CSS keeps the first phrase visible and no timeouts run.
  • Optional: set --wckd-slot-duration on a parent or :root to tune transition length (matches data-speed pacing in practice if you keep both in a similar range).
  • Pattern provenance: adapted from the public sandbox at wckd.ca/sandbox/speed-test.

Developer checklist

  • Keep phrases similar length where possible so the inline grid width does not jump excessively between steps.
  • Test with reduced motion enabled to confirm the static first phrase still reads well.

← All components