Marquee
DisplayInfinite-scrolling row of children — logos, testimonials, badges. Pure CSS, fade edges, pause-on-hover.
MarqueeDisplay · Web
Loading Storybook preview…
Installation
bun add @otfdashkit/ui
Usage
Import Marquee from @otfdashkit/ui.
Code
// Marquee — Infinite-scrolling row of children — logos, testimonials, badges. Pure CSS, fade edges, pause-on-hover.
//
// Install:
// bun add @otfdashkit/ui
import { Marquee } from '@otfdashkit/ui'
export function Example() {
return (
<Marquee>
{/* your content */}
</Marquee>
)
}Props
Props declared in the Marquee source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | Children rendered inside the scrolling track. Cloned once internally for a seamless loop. | |
| direction | 'left' | 'right' | 'left' | Scroll direction. |
| fade | boolean | true | Soft fade mask at left + right edges. |
| gap | string | 'gap-8' | Gap between items, e.g. 'gap-4', 'gap-8'. Default 'gap-8'. |
| pauseOnHover | boolean | true | Pause animation on hover. |
| speed | 'slow' | 'normal' | 'fast' | 'normal' | Animation speed. |