Scroll Based Velocity
A responsive text marquee whose velocity and scroll-direction react to the user's scroll.
Preview
Installation
Installation
pnpm dlx vibe-ui-kit@latest add scroll-based-velocity
Velocity with Features
Velocity with Images
Usage
import { ScrollVelocityContainer, ScrollVelocityRow } from "@/components/ui/scroll-based-velocity"<ScrollVelocityContainer>
<ScrollVelocityRow baseVelocity={5} direction={1}>
<span>SCROLL VELOCITY</span>
</ScrollVelocityRow>
</ScrollVelocityContainer>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | "" | The content elements to scroll inside the row |
baseVelocity | number | 5 | Speed coefficient of the marquee scrolling marquee row |
direction | 1 | -1 | 1 | Initial scroll direction flow (positive values scroll left) |
scrollReactivity | boolean | true | Increases animation velocity dynamically based on page scroll rate |
className | string? | "" | Additional classes for the row container |
This ScrollVelocity component animates marquee-style rows of typography linked directly to user scrolling speeds.
Contributors
JS
Jenish Sabhadiya