Duck Marquee
A strip that runs: logos, tags, a ticker of shipped things. Seamless loop, pause on hover, edges fading out.
DisplayClient component
Preview
React 19Tailwind v4shadcn CLIRadixmotionTypeScriptOKLCH
React 19Tailwind v4shadcn CLIRadixmotionTypeScriptOKLCH
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/duck-marqueePulls in @duck/theme. Already installed items are skipped.
Usage
import { DuckMarquee } from "@/components/ui/duck-marquee"The file lands in components/ui/duck-marquee.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.
Props
Everything not listed here is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| duration | number | 28 | Seconds for one full pass. |
| reverse | boolean | false | Run the other way. |
| gap | string | "2rem" | Space between items, any CSS length. |
| pauseOnHover | boolean | true | Stop while the pointer is on it. |
| fade | boolean | true | Mask the two edges into the background. |
Rules
What keeps this component from turning into noise.
- The children are rendered twice and the duplicate is aria-hidden. A screen reader that reads the strip twice has been handed the same list twice.
- Under reduced motion the animation stops and the strip becomes a plain horizontal scroller. A frozen marquee that clips half its content is worse than no marquee.
- It is decoration. Nothing that only exists inside a moving strip is discoverable.