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

Item one Item two Item three Spring physics Framework-agnostic Web Components

Import

Usage

Place any inline content as children — the ticker duplicates it seamlessly.

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.

⚙️ 🎨 ⚡ 🔧 🧩 ✨

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 — satisfying WCAG 2.1 SC 2.2.2 (Pause, Stop, Hide). The duplicated set used for seamless looping carries aria-hidden="true" to avoid duplicate announcements.

Properties

Attribute	Property	Type	Default	Description
speed	speed	number	60	Scroll speed in pixels per second
direction	direction	string	'left'	`'left'` or `'right'`
gap	gap	number	32	Space between items in px
pause-on-hover	pauseOnHover	boolean	true	Smoothly decelerates to a stop on hover
wave	wave	boolean	false	Animate items along a sine-wave curve
wave-amplitude	waveAmplitude	number	10	Peak vertical displacement of the wave in px
wave-length	waveLength	number	300	Horizontal distance of one full wave cycle in px

Reduced motion

Respects prefers-reduced-motion: when enabled, the ticker does not scroll and content is static. Keyboard controls remain active.