Infinite horizontal scroller for logos, text or cards. Seamless loop with soft edge fade.
npx shadcn@latest add https://hyperblur.dev/r/marquee.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/marquee.tsx.
import { Marquee } from "@/components/hyperblur/marquee"
<Marquee><span>One</span><span>Two</span><span>Three</span></Marquee>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Items to scroll. They are rendered twice for the loop. |
| speed | number | 1 | Speed multiplier. 1 is about 60 pixels per second. |
| direction | "left" | "right" | "left" | Direction the items travel. |
| pauseOnHover | boolean | true | Pause while the pointer is over the strip. |
| gap | number | 32 | Space between items in pixels. |
| fade | boolean | true | Soft fade mask on the left and right edges. |