All components
Card Marquee
AnimationAn infinite marquee of any children, horizontal or vertical.
TypeScriptFlutterNest.jsRust
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/card-marquee.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge2. Copy the component source into
components/library/card-marquee.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Content to loop. |
| vertical | boolean | false | Scroll down the y axis instead of across the x axis. |
| reverse | boolean | false | Run the loop in the opposite direction. |
| pauseOnHover | boolean | true | Pause the track while the pointer is over it. |
Accessibility
- Duplicated copies are aria-hidden, so the content is announced once.
- Pauses on hover, so a reader can stop the movement to read.
- Freezes entirely under prefers-reduced-motion.
- Copy count is measured, so the loop never leaves a visible gap.
Dependencies
motionclsxtailwind-merge