motion-ticker

Continuously scrolls its children horizontally in a seamless loop. Accepts any content: text, tags, logos. Pauses on hover by default. Keyboard accessible: tab to focus and press Space to pause.

Preview

Import

import 'motion-components/motion-ticker'   // just this one
import 'motion-components'               // or the whole library

Usage

Place any inline content as children. The ticker duplicates it seamlessly.

<motion-ticker speed="60" gap="48">
  <span>Item one</span>
  <span>Item two</span>
  <span>Item three</span>
  ...
</motion-ticker>

Wave mode

Add the wave attribute to animate items along a sine-wave curve as they scroll. Control the height with wave-amplitude and the frequency with wave-length.

<motion-ticker wave wave-amplitude="10" wave-length="320">
  <span>Spring physics</span>
  <span>Zero CSS required</span>
  <span>Fully interruptible</span>
</motion-ticker>

JavaScript API

Control the ticker programmatically with play(), pause(), finish(), and cancel().

Keyboard & accessibility

The ticker is focusable (tabindex="0") and carries role="region" with a descriptive aria-label. Focusing pauses the scroll; blurring resumes it. While focused, Space or Enter toggles a persistent pause so keyboard-only users can read the content at their own pace. This satisfies WCAG 2.1 SC 2.2.2 (Pause, Stop, Hide). Every copy used for seamless looping carries aria-hidden="true" and inert, so items are announced once and Tab reaches only the originals.

Properties

speed, gap, and direction can be changed dynamically. The remaining attributes are read once on connect.

Reduced motion

Respects prefers-reduced-motion: when enabled, the ticker does not scroll and content is static. It is not focusable and has no keyboard controls, since there is nothing to pause.