Velocity Scroll
Infinite scrolling text that responds to scroll velocity.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| texts | [string, string] | ["Kinetic Motion", "Scroll Velocity"] | Two text strings for the top and bottom marquee rows |
| baseVelocity | number | 3 | Base scroll speed — top row goes left, bottom row goes right |
When to Use
Perfect for news tickers, event announcements, and dynamic hero sections that respond to user scroll behavior.
Best Practices
Keep baseVelocity between 2-5 for comfortable reading speed. Use uppercase bold text for maximum visual impact.
Why This Component Matters
Velocity-based interaction makes the site feel responsive to user behavior, adding energy and momentum.
FAQ
QCan I reverse the scroll direction?
Yes, using a negative baseVelocity reverses the direction.
QHow does it handle different screen sizes?
Uses percentage-based wrapping for seamless loops across all screen widths.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.