Infinite Marquee

A seamless, GPU-only logo strip that never stutters or snaps at the loop point.

cinematic interactionsinfinitemarquee

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add infinite-marquee

Usage

Import InfiniteMarquee from @/components/wensity/infinite-marquee and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1"use client";
 2import { InfiniteMarquee } from "@/components/wensity/infinite-marquee";
 3
 4const logos = ["Vercel", "Linear", "Stripe", "Figma", "Raycast", "Arc", "Loom"];
 5
 6export function InfiniteMarqueeDemo() {
 7  return (
 8    <InfiniteMarquee
 9      speed={28}
10      direction="left"
11      pauseOnHover
12      items={logos.map((label) => (
13        <span key={label} className="text-2xl font-semibold tracking-tight text-neutral-500">
14          {label}
15        </span>
16      ))}
17    />
18  );
19}

Props

Prop	Type	Default	Description
`items`	React.ReactNode[]	-	Items rendered twice for a seamless loop.
`speed`	number	30	Cycle duration in seconds. Lower is faster.
`direction`	"left" \| "right"	"left"	Animation direction.
`pauseOnHover`	boolean	false	Pause the loop when the cursor enters.
`gap`	string	"gap-20"	Tailwind gap class between items.
`fade`	boolean	true	Apply soft mask-image fades at both edges.