React · Next.js · TypeScript · Tailwind · Motion · React · Next.js · TypeScript · Tailwind · Motion · React · Next.js · TypeScript · Tailwind · Motion · React · Next.js · TypeScript · Tailwind · Motion · React · Next.js · TypeScript · Tailwind · Motion · React · Next.js · TypeScript · Tailwind · Motion ·
Installation
Examples
Alternating Hero Statements
Design · Develop · Ship · Design · Develop · Ship · Design · Develop · Ship · Design · Develop · Ship · Design · Develop · Ship · Design · Develop · Ship · Design · Develop · Ship · Design · Develop · Ship ·
Build · Scale · Iterate · Build · Scale · Iterate · Build · Scale · Iterate · Build · Scale · Iterate · Build · Scale · Iterate · Build · Scale · Iterate · Build · Scale · Iterate · Build · Scale · Iterate ·
Two rows scrolling in opposite directions — the kinetic hero pattern used by top agencies and SaaS products.
Logo Marquee
"Trusted by" logo ticker with brand icons and edge fade gradients — the go-to social proof pattern for SaaS landing pages.
Usage
import VelocityScroll from "@/components/motionx/velocity-scroll";Tech stack marquee
<VelocityScroll
texts={["React · Next.js · TypeScript · Tailwind · Motion ·"]}
velocity={80}
className="text-foreground/80"
/>Multi-row with alternating direction
<VelocityScroll
texts={["Design · Develop · Ship ·", "Build · Scale · Iterate ·"]}
velocity={60}
className="text-foreground"
/>Testimonials ticker
<VelocityScroll
texts={['★★★★★ "Best UI library" —', '★★★★★ "Shipped 3x faster" —']}
velocity={40}
className="text-muted-foreground"
scrollerClassName="!text-xl font-medium"
parallaxClassName="!h-[60px]"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
texts | string[] | [] | Array of text strings (each becomes a row) |
velocity | number | 100 | Base scroll speed in px/s |
className | string | "" | CSS classes for each text span |
damping | number | 50 | Spring damping for velocity smoothing |
stiffness | number | 400 | Spring stiffness for velocity smoothing |
numCopies | number | 6 | Number of text copies for seamless looping |
velocityMapping | VelocityMapping | { input: [0,1000], output: [0,5] } | Maps scroll velocity to speed multiplier |
scrollContainerRef | RefObject | — | Custom scroll container (defaults to window) |
parallaxClassName | string | — | CSS classes for each row container |
scrollerClassName | string | — | CSS classes for the inner scrolling element |
parallaxStyle | CSSProperties | — | Inline styles for each row container |
scrollerStyle | CSSProperties | — | Inline styles for the inner scrolling element |
Tip: Odd-indexed rows automatically scroll in the opposite direction, creating the alternating marquee effect.