Wensity

Infinite Marquee

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

cinematic interactionsinfinitemarquee
Infinite Marquee component preview

Overview

Infinite Marquee is a React and Tailwind CSS logo marquee that scrolls brand logos, customer names, or any items horizontally forever, in Next.js or any React app, with no animation library. Items render twice and the pair slides exactly half its width on the GPU, so the loop never jumps and stays smooth while the page is busy. Speed, direction, gap, and edge fades are props, pause on hover is opt in, the duplicate is hidden from screen readers, and the loop stops for reduced motion. If a gap shows before the wrap, add items or widen the gap.

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
"use client";
import { InfiniteMarquee } from "@/components/wensity/infinite-marquee";


const logos = ["Vercel", "Linear", "Stripe", "Figma", "Raycast", "Arc", "Loom"];


export function InfiniteMarqueeDemo() {
  return (
    <InfiniteMarquee
      speed={28}
      direction="left"
      pauseOnHover
      items={logos.map((label) => (
        <span key={label} className="text-2xl font-semibold tracking-tight text-neutral-500">
          {label}
        </span>
      ))}
    />
  );
}

Props

PropTypeDefaultDescription
itemsReact.ReactNode[]-Items rendered twice for a seamless loop.
speednumber30Cycle duration in seconds. Lower is faster.
direction"left" | "right""left"Animation direction.
pauseOnHoverbooleanfalsePause the loop when the cursor enters.
gapstring"gap-20"Tailwind gap class between items.
fadebooleantrueApply soft mask-image fades at both edges.

Related components

  • Dynamic Island Toast component preview

    Dynamic Island Toast

    A pixel-faithful Apple Dynamic Island that morphs, splits, and breathes while it hosts live activities inside your app.

  • Apple-Style Sticky Scroll component preview

    Apple-Style Sticky Scroll

    A pinned cinematic section that morphs in lock-step with scroll, staying perfectly in sync whichever way you travel.

  • Morphing Shape Background component preview

    Morphing Shape Background

    Lava lamp background for React heroes: soft gradient shapes that drift and melt.

  • Scrubbable Video Reveal component preview

    Scrubbable Video Reveal

    An Apple-style image sequence scrubbed frame by frame on canvas, following your hand as you scroll in either direction.

Featured in React carousel components.