Velocity Logo Marquee
A free logo and stats section marquee whose drift reacts to scroll velocity.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- GSAP
- 2 runtime packages
Velocity Logo Marquee is a free logo and stats section component for Next.js and React that scrolls a logo cloud in a seamless, infinite loop and speeds up as you scroll. Built with GSAP and styled with Tailwind, it drifts on the GSAP ticker with an xPercent modulo wrap, so the loop never shows a seam at any speed.
A ScrollTrigger velocity reading eases the drift between its base pace and a configurable maximum boost, decaying back to rest in under a second. The loop pauses when you hover it or move keyboard focus inside it, stops working entirely while offscreen or in a hidden tab, and with prefers-reduced-motion enabled the logos render as a static wrapped grid with zero transforms. Screen readers hear each logo exactly once because the duplicate copy is hidden from assistive technology.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/logo-marquee-velocityUsage
import { LogoMarqueeVelocity } from "@/components/logo-marquee-velocity";
export function Example() {
return (
<LogoMarqueeVelocity speed={60} maxBoost={3} direction="left" className="py-4">
<img src="/logos/northwind.svg" alt="Northwind" height={28} width={140} />
<img src="/logos/arcadia.svg" alt="Arcadia" height={28} width={120} />
<img src="/logos/vantage.svg" alt="Vantage" height={28} width={132} />
</LogoMarqueeVelocity>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Logo items (imgs/svgs), duplicated internally for the seamless loop. |
| speed | number | 60 | Base drift in px/s at rest. |
| maxBoost | number | 3 | Max speed multiplier at high scroll velocity. |
| direction | "left" | "right" | "left" | Travel direction of the drift. |
| className | string | undefined | Additional classes merged onto the root wrapper. |
Customisation
Velocity Logo Marquee exposes two component tokens, declared in its registry item: --logo-marquee-gap for the spacing between logos (defaulting to 3rem) and --logo-marquee-fade for the width of the edge fade mask on each side (defaulting to 6rem). Override them from :root, or on any ancestor of the component, to retune the density and the fade without touching the code:
:root {
--logo-marquee-gap: 4.5rem;
--logo-marquee-fade: 8rem;
}Frequently asked questions
- Is Velocity Logo Marquee free for commercial use?
- Yes. Velocity Logo Marquee is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Velocity Logo Marquee accessible for screen readers and keyboard users?
- Yes. The duplicate copy that makes the loop seamless is hidden from assistive technology and marked inert, so screen readers announce each logo exactly once and duplicated links never receive keyboard focus. The drift pauses while the marquee is hovered or while focus is inside it, satisfying the WCAG pause requirement for moving content, and with reduced motion enabled the logos render as a static wrapped grid with no animation at all.
- How does the scroll velocity boost work, and can I tune it?
- A GSAP ScrollTrigger reads the page scroll velocity on every scroll event and eases the drift speed between its base pace and the maxBoost multiplier, in both scroll directions. The boost decays back to the base speed in roughly 0.8 seconds after scrolling stops. Set the speed prop to change the resting pace in pixels per second and maxBoost to cap how much a fast scroll accelerates it.