Velocity Scroll
Infinite scrolling text that responds to scroll velocity.
Main Features of Velocity Scroll
How to Use Velocity Scroll in Next.js
Installation Guide for Velocity Scroll
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
text1 | string | Kinetic Motion | First text to scroll |
text2 | string | Scroll Velocity | Second text to scroll |
baseVelocity1 | number | -3 | Base velocity for first text |
baseVelocity2 | number | 3 | Base velocity for second text |
backgroundColor | string | bg-zinc-950 | Background color of the component |
spacing | string | space-y-8 | Spacing between text elements |
fontSize | string | text-8xl md:text-9xl | Font size of the text |
fontWeight | string | font-black | Font weight of the text |
tracking | string | tracking-tighter | Letter spacing |
textColor | string | text-zinc-300 | Color of the text |
marginRight | string | mr-12 | Right margin between text instances |
className | string | Additional CSS classes |
Related Components
When to Use
Perfect for news tickers, event announcements, and dynamic headers in Next.js applications. Use this React component when you want an infinite scrolling message that speeds up or slows down based on the user's scroll velocity.
Best Practices
Maintain scalable component architecture by keeping the `baseVelocity` at a comfortable reading speed. Follow React best practices by ensures the infinite loop doesn't have too many repeated elements. Optimize for performance by using efficient transforms and avoiding layout thrashing.
Why This Component Matters in Modern UI Development
Velocity-based interaction makes a site feel responsive to user behavior. This production-ready component provides a high-performance implementation of infinite marquee motion, adding energy and semantic authority to your real-world application architecture.
Frequently Asked Questions
QCan I scroll the text horizontally?
Yes, the current implementation is horizontal, and the direction can be reversed by changing the sign of the `baseVelocity`.
QHow does it handle different screen sizes?
The component uses a percentage-based wrap, ensuring the infinite loop looks seamless on everything from mobile to ultrawide monitors.
QCan I use multiple lines?
Absolutely! You can stack multiple instances with different velocities to create a complex 'kinetic typography' stack.