LogoScroller

Component 19

About

LogoScroller is a reusable React component that creates a smooth, infinitely scrolling horizontal carousel of brand names or logos. It's perfect for showcasing partners, sponsors, clients, or technologies your product integrates with. The scroll speed is customizable, and the animation pauses on hover for accessibility and control.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds LogoScroller to your project and fits it to your theme.

Code

How LogoScroller is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import LogoScroller from "@/components/ui/logo-scroller";

export default function DemoOne() {
  const myLogos = [
    "Acme Corp",
    "Quantum",
    "Echo Valley",
    "PULSE",
    "APEX",
    "Celestial",
    "Nova",
    "Zenith"
  ];

  const scrollSpeed = "35s";

  return (
    <div className="app-container">
      <div className="content-wrapper">
        <h2 className="section-title">TRUSTED BY POPULAR COMPANIES</h2>
        <LogoScroller logos={myLogos} speed={scrollSpeed} />
      </div>
    </div>
  );
}