Scroll Velocity Text

Text 3

About

A continuous text marquee whose speed reacts to scroll velocity — the faster you scroll, the faster the marquee moves.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scroll Velocity Text to your project and fits it to your theme.

Code

How Scroll Velocity Text is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ScrollVelocityRow } from "@/components/ui/scroll-velocity-text";

const items = [
  { icon: "⚡", label: "Open Source" },
  { icon: "🔒", label: "Type-safe" },
  { icon: "🌙", label: "Dark Mode" },
  { icon: "♿", label: "Accessible" },
  { icon: "✨", label: "Animated" },
  { icon: "🧩", label: "Composable" },
];

export default function ScrollVelocityPills() {
  return (
    <div className="flex min-h-50 items-center justify-center overflow-hidden">
      <ScrollVelocityRow baseVelocity={2.5} scrollReactivity={false}>
        {items.map((item) => (
          <span
            className="mx-3 inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-4 py-1.5 font-medium text-foreground text-sm shadow-sm"
            key={item.label}
          >
            <span>{item.icon}</span>
            {item.label}
          </span>
        ))}
      </ScrollVelocityRow>
    </div>
  );
}