Components

Player

A native animation starts paused. Play, Pause and Replay control its real timeline; reduced motion pauses it again.

A paused timeline

↗

The player reads the actual animation state.

In a reference specimen

Run an animation

The native checkbox and authored selectors control the child’s CSS play state. Pausing preserves its time. Reduced motion keeps it paused; print removes the animation.

Used on the Theme guide.

Usage and interface

DemoMotion wraps animated children and adds a div.ui-player with Play/Pause, Replay and the current state. Animations start paused (data-playback="paused" holds them before hydration) and pause again when the reduced-motion preference changes.

<DemoMotion>  <DemoItem tone="blue" className="(animation-name:rotate) (animation-duration:2s) (animation-iteration-count:infinite)">↗</DemoItem></DemoMotion>

<div class="ui-player" role="group" aria-label="Animation controls" data-state="paused">  <button type="button" class="ui-button" data-size="sm">Play</button>  <button type="button" class="ui-button" data-size="sm" data-variant="quiet">Replay</button>  <span class="ui-player-time"><output>Paused</output></span></div>

Iframe documents use DemoViewport motion instead; the viewport’s own Play and Replay drive the document timeline.