Velocity Marquee

Text Animations

An infinite marquee that accelerates with the page's scroll velocity and eases back to a base speed. Seamless two-track loop, rAF-driven, frozen under reduced-motion.

Inspired by Componentry — Velocity Scroll — independently built, not affiliated. Attribution policy

SCROLL FASTER★IT SPEEDS UP★THEN EASES BACK★SCROLL FASTER★IT SPEEDS UP★THEN EASES BACK★

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/velocity-marquee.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/velocity-marquee.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<VelocityMarquee
    className="text-2xl font-semibold text-foreground/80"
    items={[
      "SCROLL FASTER",
      "★",
      "IT SPEEDS UP",
      "★",
      "THEN EASES BACK",
      "★",
    ]}
  />

Props

VelocityMarqueeProps extends React.HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
items*	React.ReactNode[]	—	Items to scroll. Strings or nodes.
baseSpeed	number	60	Base pixels/second.
direction	"left" \| "right"	"left"	Scroll direction.
scrollBoost	number	340	Extra px/sec added at peak scroll velocity.
gap	string	"3rem"	Gap between items, any CSS length.