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.

⚙️ 🎨 ⚡ 🔧 🧩 ✨

JavaScript API

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

JS API Play Pause Finish Cancel playState

playState: –

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). The duplicated set used for seamless looping carries aria-hidden="true" to avoid duplicate announcements.

Properties

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

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.