Components

Slot machine

A small .wckd-slot-machine wrapper with direct child <span> phrases. wckdSlotMachines() in wckd-ui.js uses a single chained setTimeout (no setInterval), paints with one tight loop, and adds wckd-slot-machine--reduced when prefers-reduced-motion applies. Transitions use --wckd-slot-duration (default 0.45s). CSS: wckd-ui-components.css or kit components/slot-machine.css.

Jump to:

Download & setup

Download WCKD UI Style guide

Start with the package download and setup steps in Get Started, then use the style guide for utility and token references while implementing 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

Start from the default implementation, then apply one of these intent-driven variations based on your content and interaction goals.

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