Velocity Marquee

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<VelocityMarquee/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/velocity-marquee.en.json

Usage

children can be anything. Remember to leave trailing spacing (such as pr-8 or a trailing separator) so the loop is seamless:

import { VelocityMarquee } from "@/components/ui/velocity-marquee";

<VelocityMarquee baseVelocity={5}>
  <span className="pr-8 text-5xl font-bold">
    WebberUI — Animate everything ·
  </span>
</VelocityMarquee>

It also works for a logo row, with a negative baseVelocity to scroll the other way:

<VelocityMarquee baseVelocity={-3}>
  <div className="flex items-center gap-12 pr-12">
    <LogoA className="h-8" />
    <LogoB className="h-8" />
    <LogoC className="h-8" />
  </div>
</VelocityMarquee>

Inside a nested scroll container

By default the component tracks window scroll. When it sits inside a fixed-height overflow-y-auto container, pass that container's ref to container. The speed-up comes from the container's scroll velocity instead of the window's.

const scrollerRef = React.useRef<HTMLDivElement>(null);

<div ref={scrollerRef} className="h-[400px] overflow-y-auto">
  <VelocityMarquee container={scrollerRef}>{/* content */}</VelocityMarquee>
</div>

When the window itself is the scroll container, container can be omitted and behavior is unchanged.

Props

How it works

• Scroll-driven speed: useScroll().scrollY → useVelocity gives the scroll speed (px/s) → useSpring smooths it → it is mapped to a speed multiplier, and useAnimationFrame accumulates the offset frame by frame. The faster the page scrolls, the faster the marquee runs; once scrolling stops, the spring eases it back to the base speed
• Scrolling back quickly makes the speed multiplier negative, so the marquee briefly reverses direction before recovering
• The offset wraps between -25% and 0% through a hand-written wrap function, with four copies of the content rendered so it is always visually seamless. A single copy should be at least a third of the container width to avoid exposing blank space
• The animation only touches transform and never triggers layout; copies 2 through 4 are marked aria-hidden, so the screen reader only reads one
• When the user has "reduce motion" enabled at the system level, it degrades to a single static copy that does not scroll