Shadcn.io is not affiliated with official shadcn/ui
Scroll Velocity
Scroll-reactive text velocity with alternating direction marquee for React applications.
Scroll Velocity preview
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.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:
use shadcnio to install the scroll-velocity text effect into my projectRelated 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
FAQ
Was this page helpful?
Sign in to leave feedback.