Shadcn.io is not affiliated with official shadcn/ui
Scroll Velocity
Scroll-reactive text velocity with alternating direction marquee for React applications.
Text that responds to scroll velocity—speed up your scrolling and watch the text accelerate. Creates a parallax marquee effect where multiple text rows move in alternating directions. The scroll velocity is tracked and smoothed with spring physics, then applied as a multiplier to the base animation speed. When you scroll down, text speeds up; scroll up and it reverses direction. Built with Motion for React using useVelocity and useSpring for buttery-smooth scroll tracking. Perfect for dynamic hero sections, creative portfolios, or any site wanting kinetic scroll-driven typography.
Scroll Velocity preview
Installation
Related Components
Curved Loop
Text flowing along curved SVG paths
Circular Text
Text arranged in perfect circles with rotation
Rolling Text
3D character rolling with realistic rotation
Rotating Text
Smooth vertical text cycling
Shimmering Text
Wave-like shimmer effects across text
Blur Text
Text animation from blur to focus