Marquee
Infinite horizontal scrolling strip of content, used as an ambient ticker or logo wall. Renders children twice in a track that translates by exactly -50% for a seamless loop.
Installation
npx dafink-ui add marqueeDemo
FastAccessibleComposableToken-driven
Props
| Name | Type | Default | Description |
|---|---|---|---|
| direction | 'left' | 'right' | 'left' | Scroll direction of the track. |
| duration | number | 20 | Seconds for one full loop of the track. |
| pauseOnHover | boolean | true | Pause the scroll animation while the pointer hovers the marquee. |
| gap | number | 16 | Pixel gap between repeated copies of the content. |
| children | ReactNode | - | Required. The content to repeat and scroll. |
| className | string | '' | Additional CSS classes. |
Accessibility
Marquee's scroll is a pure CSS @keyframes animation, disabled by its own @media (prefers-reduced-motion: reduce) block, which also hides the duplicate copy so reduced-motion users see one static row instead of a frozen mid-scroll frame. The duplicate copy is aria-hidden in every motion state to avoid double-announcing repeated content; the first copy is real content and is not aria-hidden. Marquee wraps children without adding any keyboard or focus behavior of its own — any interactive children keep their native tab order.