Velora UI

Scroll Velocity

Marquee whose speed and direction follow your scrolling.

  • 1.4 KB gzipped
  • Deps: motion/react
  • Reduced-motion safe
  • Base UI & Radix compatible
Open in v0

Preview

Velora UI · Animations with receipts ·

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/scroll-velocity.json

Adds components/velora/scroll-velocity.tsx, installs motion.

Props

PropTypeDefault
children*React.ReactNode—
baseVelocity

Base speed in percent of content width per second

number4
classNamestring—

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.