Copy this complete component into a page file. Edit and run it in the Playground.
Loading editor…
Continuously scrolling text for announcements, status feeds, market tickers, and compact live updates. The component measures its rendered content and viewport to create a seamless loop at a consistent pixel speed.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content repeated across the track. |
direction | "left" | "right" | "left" | Travel direction. |
speed | number | 56 | Movement speed in pixels per second. |
gap | number | 48 | Space between repeated copies in pixels. |
pauseOnHover | boolean | true | Pause while hovered or keyboard focus is inside. |
fadeEdges | boolean | true | Apply soft entry and exit masks. |
surface | boolean | true | Render the Opus widget background. |
ariaLabel | string | — | Accessible description for non-text children. |
prefers-reduced-motion stops the animation and leaves the content horizontally scrollable.