Marquee

A purely presentational component that scrolls long content horizontally in a loop; content cycles seamlessly via a slot. Supports pause on hover and static fallback under prefers-reduced-motion. No events.

Basic Usage

Default looping scroll (20s)

OAS-ISUI component library · Web Components with no framework dependencies · Complete TypeScript types · Accessible ·

Example

Speed Control

speed=8 fast / speed=40 slow

Fast: one loop in 8 seconds Slow: one loop in 40 seconds

Example

Pause on Hover

pause-on-hover: pauses on mouse hover / focus

Hover over this line to pause the scroll; move away to resume.

Example

Element Content

slot supports arbitrary element combinations

Newv1.6 display components are releasedRecommendedBuilt on Web Components standards

Example

Image / Logo Wall

Content is not limited to text — putting images or logos in the slot produces the classic seamless "brand wall" scrolling.

Logo wall (seamless loop)

Example

Image scrolling (img)

Example

API

Attributes

Attribute	Description	Type	Default
pause-on-hover	Boolean; when present, pauses the animation on hover/focus (animation-play-state: paused)	—	—
speed	Duration of a single animation cycle (seconds), written to CSS animation-duration; non-positive values fall back to the default	string	—

Slots

Name	Description
default	—

• When the system enables "reduce motion" (prefers-reduced-motion: reduce), the animation is disabled and content is shown statically.
• The duplicated content group carries aria-hidden, so screen readers do not read it twice.
• No events; purely presentational.