infinite-marquee-scroll

A zero-config, infinite scrolling logo/icon carousel for React. Supports icon components, plain images, or text-only items. No CSS imports needed — animations are injected automatically.

Installation

With bun:

bun add infinite-marquee-scroll

With npm:

npm install infinite-marquee-scroll

Usage

With icon components (Lucide, Remix Icons, etc.)

import { MarqueeScroll } from "infinite-marquee-scroll";
import { Wrench, Building2, Truck } from "lucide-react";

const items = [
  { text: "Utility", icon: Wrench },
  { text: "Retaining", icon: Building2 },
  { text: "Infrastructure", icon: Truck },
];

export default function App() {
  return (
    <MarqueeScroll
      items={items}
      speed={20}
      iconClassName="w-5 h-5 text-white"
      textClassName="text-white text-sm font-medium"
    />
  );
}

With images (SVG, PNG, etc.)

Pass an image object instead of icon. A native <img> tag is rendered — no Next.js Image component required.

import { MarqueeScroll } from "infinite-marquee-scroll";

const items = [
  { text: "React", image: { src: "/icons/react.svg" } },
  { text: "Next.js", image: { src: "/icons/nextjs.svg" } },
  { text: "TypeScript", image: { src: "/icons/typescript.svg" } },
  { text: "Tailwind", image: { src: "/icons/tailwind.svg" } },
];

export default function App() {
  return (
    <MarqueeScroll
      items={items}
      speed={22}
      imageSize={28}
      textClassName="text-sm font-semibold"
    />
  );
}

You can also set width and height per image to override imageSize:

{ text: "Convex", image: { src: "/icons/convex.png", width: 32, height: 32 } }

Props

| Prop | Type | Default | Description | | --------------- | ---------------- | ------- | ----------------------------------------------- | | items | CarouselItem[] | — | Array of items to display (required) | | speed | number | 20 | Scroll speed in seconds per full cycle | | className | string | "" | Class applied to the outer wrapper | | itemClassName | string | "" | Class applied to each item container | | iconClassName | string | "" | Class applied to icon components and image tags | | textClassName | string | "" | Class applied to each text label | | iconSize | number | 24 | size prop passed to icon components | | imageSize | number | 24 | Fallback width/height in px for image icons |

CarouselItem

interface CarouselItem {
  text: string;
  icon?: React.ComponentType<{ className?: string; size?: number }>;
  image?: {
    src: string;
    alt?: string; // defaults to item.text
    width?: number; // overrides imageSize for this item
    height?: number; // overrides imageSize for this item
  };
}

• Use icon for React icon components (Lucide, Remix Icons, Heroicons, custom SVG components).
• Use image for image files (.svg, .png, .webp, etc.).
• If both are provided, icon takes priority.
• Both fields are optional — text-only items work fine.

Text only (no icons)

const items = [
  { text: "React" },
  { text: "Next.js" },
  { text: "TypeScript" },
  { text: "Tailwind CSS" },
];

<MarqueeScroll items={items} speed={15} />;

Slow vs fast scroll

// Slow and subtle
<MarqueeScroll items={items} speed={40} />

// Fast and energetic
<MarqueeScroll items={items} speed={10} />

How it works

• Duplicates your items list to create a seamless loop
• Injects @keyframes via a <style> tag — no CSS file to import
• The animation name is namespaced to avoid conflicts with your existing styles

Requirements

• React 17 or higher

License

MIT