Scroll-based velocity text animation with parallax effects.
Installation
Usage
import { ScrollVelocity } from "viora-ui";import { ScrollVelocity } from "viora-ui";
export default function ScrollVelocityDemo() {
return (
<div className="flex min-h-[350px] w-full items-center justify-center p-6">
<ScrollVelocity />
</div>
);
}API Reference
VelocityMapping
| Prop | Type | Default | Description |
|---|---|---|---|
| input | [number, number] | - | Configuration for input. |
| output | [number, number] | - | Configuration for output. |
VelocityText
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Content or child elements to render. |
| baseVelocity | number | - | Configuration for baseVelocity. |
| scrollContainerRef? | React.RefObject<HTMLElement> | - | Configuration for scrollContainerRef. |
| className? | string | "" | Additional CSS classes for custom styling. |
| damping? | number | - | Configuration for damping. |
| stiffness? | number | - | Configuration for stiffness. |
| numCopies? | number | - | Configuration for numCopies. |
| velocityMapping? | VelocityMapping | - | Configuration for velocityMapping. |
| parallaxClassName? | string | - | Configuration for parallaxClassName. |
| scrollerClassName? | string | - | Configuration for scrollerClassName. |
| parallaxStyle? | React.CSSProperties | - | Configuration for parallaxStyle. |
| scrollerStyle? | React.CSSProperties | - | Configuration for scrollerStyle. |
ScrollVelocity
| Prop | Type | Default | Description |
|---|---|---|---|
| scrollContainerRef? | React.RefObject<HTMLElement> | - | Configuration for scrollContainerRef. |
| texts | string[] | [] | Configuration for texts. |
| velocity? | number | - | Configuration for velocity. |
| className? | string | "" | Additional CSS classes for custom styling. |
| damping? | number | - | Configuration for damping. |
| stiffness? | number | - | Configuration for stiffness. |
| numCopies? | number | - | Configuration for numCopies. |
| velocityMapping? | VelocityMapping | - | Configuration for velocityMapping. |
| parallaxClassName? | string | - | Configuration for parallaxClassName. |
| scrollerClassName? | string | - | Configuration for scrollerClassName. |
| parallaxStyle? | React.CSSProperties | - | Configuration for parallaxStyle. |
| scrollerStyle? | React.CSSProperties | - | Configuration for scrollerStyle. |
Built by Otis
Last updated: 9/13/2026