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.