Scroll Velocity Text
An interactive scrolling text banner that responds to the user's scroll velocity, creating a dynamic visual effect that changes based on how quickly the user is scrolling.
Scroll up and down to see the effect!
Scroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll Velocity
Neobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI Component
Usage
import ScrollVelocityText from '@/components/ScrollVelocityText'; export default function MyPage() { return ( <div className="py-10"> <h1 className="text-3xl font-bold mb-6">Welcome to My Website</h1> <ScrollVelocityText maxWidth={1000} /> <p className="my-6"> Scroll up and down to see the text animation speed change based on your scroll velocity! </p> </div> ); }
Examples
Basic Scroll Velocity Text
A scrolling text banner that changes speed based on scroll velocity.
Scroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll Velocity
Neobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI Component
<ScrollVelocityText />
Custom Width
ScrollVelocityText with a custom maximum width.
Scroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll Velocity
Neobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI Component
<ScrollVelocityText maxWidth={600} />
With Additional Classes
ScrollVelocityText with additional CSS classes for custom styling.
Scroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll VelocityScroll Velocity Scroll Velocity
Neobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI ComponentNeobrutalism UI Component
<ScrollVelocityText className="my-8" />