Scroll Velocity
Marquee whose speed and direction follow your scrolling.
- 1.4 KB gzipped
- Deps: motion/react
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Velora UI · Animations with receipts ·
Installation
pnpm dlx shadcn@latest add https://paulkeys.org/r/scroll-velocity.jsonAdds components/velora/scroll-velocity.tsx, installs motion.
Props
| Prop | Type | Default |
|---|---|---|
children* | React.ReactNode | — |
baseVelocityBase speed in percent of content width per second | number | 4 |
className | string | — |
Accessibility
- Reduced motion
- The row stays still at its starting position and does not react to scrolling.
- Keyboard
- Nothing is interactive by default. If children contain links, only the first copy is focusable, and the marquee pauses while the pointer or focus is inside it.
- Screen readers
- Only the first copy of the children is exposed; the three duplicates are aria-hidden and inert.