Components
A continuous text marquee whose speed reacts to scroll velocity — the faster you scroll, the faster the marquee moves.
Loading preview...
import { ScrollVelocityRow } from "@/components/ui/scroll-velocity-text";
const words = [
"React",
"TypeScript",
"Tailwind CSS",
"Motion",
"Next.js",
"shadcn/ui",
"Vite",
"Radix UI",
];
export default function ScrollVelocityBasic() {
return (
<div className="flex min-h-50 items-center justify-center overflow-hidden">
<ScrollVelocityRow baseVelocity={3}>
{words.map((word) => (
<span
className="mx-6 font-medium text-base text-muted-foreground"
key={word}
>
{word}
<span className="mx-6 text-muted-foreground/30">•</span>
</span>
))}
</ScrollVelocityRow>
</div>
);
}