All components

Logo Cloud 3

Logo Cloud 3 is a React and Tailwind CSS marquee component from SmoothUI, licensed MIT. Copy it and paste it into your project.

SmoothUI MIT marquee

What it is

Logo Cloud 3 is a React and Tailwind CSS marquee component from SmoothUI, licensed MIT. Copy it and paste it into your project.

How to use it

Open it in the catalogue, press copy, and paste it into your project. The prompt you copy carries the code and the rules that tell your agent to reproduce it without changing anything.

Open in the catalogue

Five free copies a month. No card.

No packages beyond the project baseline

Licence

This component comes from SmoothUI and is redistributed under the MIT licence, which permits commercial use. The copyright notice travels with the code.

Logo Cloud 3

index.tsx
"use client";

import type React from "react";
import {
  Canpoy,
  Canva,
  Casetext,
  Clearbit,
  Descript,
  Duolingo,
  Faire,
  Strava,
} from "@/components/smoothui/shared";

export interface LogoMarqueeProps {
  description?: string;
  direction?: "left" | "right";
  logos?: Array<{
    name: string;
    logo: React.ReactNode;
  }>;
  pauseOnHover?: boolean;
  speed?: "slow" | "normal" | "fast";
  title?: string;
}

const DEFAULT_LOGOS = [
  { logo: <Canpoy />, name: "Canpoy" },
  { logo: <Canva />, name: "Canva" },
  { logo: <Casetext />, name: "Casetext" },
  { logo: <Strava />, name: "Strava" },
  { logo: <Descript />, name: "Descript" },
  { logo: <Duolingo />, name: "Duolingo" },
  { logo: <Faire />, name: "Faire" },
  { logo: <Clearbit />, name: "Clearbit" },
];

const SPEED_MAP = {
  fast: "20s",
  normal: "40s",
  slow: "60s",
};

export function LogoMarquee({
  title = "Trusted by industry leaders",
  description = "Join thousands of companies already using our platform",
  logos = DEFAULT_LOGOS,
  speed = "normal",
  direction = "left",
  pauseOnHover = true,
}: LogoMarqueeProps) {
  const animationDuration = SPEED_MAP[speed];
  const animationDirection = direction === "right" ? "reverse" : "normal";

  return (
    <section className="overflow-hidden py-20">
      <style>
        {`
          @keyframes marquee-scroll {
            from {
              transform: translateX(0);
            }
            to {
              transform: translateX(-50%);
            }
          }

          .marquee-track {
            animation: marquee-scroll var(--marquee-duration, 40s) linear infinite;
            animation-direction: var(--marquee-direction, normal);
          }

          .marquee-container:hover .marquee-track {
            animation-play-state: var(--marquee-pause-on-hover, running);
          }

          @media (prefers-reduced-motion: reduce) {
            .marquee-track {
              animation: none;
            }
          }
        `}
      </style>
      <div className="mx-auto max-w-7xl px-6">
        <div className="mb-12 text-center">
          <h2 className="mb-4 font-bold text-2xl text-foreground lg:text-3xl">
            {title}
          </h2>
          <p className="text-foreground/70 text-lg">{description}</p>
        </div>

        <div
          className="marquee-container relative overflow-hidden"
          style={{
            maskImage:
              "linear-gradient(to right, transparent, black 10%, black 90%, transparent)",
            WebkitMaskImage:
              "linear-gradient(to right, transparent, black 10%, black 90%, transparent)",
          }}
        >
          <div
            className="marquee-track flex w-max"
            style={
              {
                "--marquee-direction": animationDirection,
                "--marquee-duration": animationDuration,
                "--marquee-pause-on-hover": pauseOnHover ? "paused" : "running",
              } as React.CSSProperties
            }
          >
            {/* First set of logos */}
            {logos.map((logo, index) => (
              <div
                className="flex shrink-0 items-center justify-center px-8 py-4 opacity-60 transition-opacity duration-200 *:fill-foreground hover:opacity-100"
                key={`first-${logo.name}-${index}`}
              >
                {logo.logo}
              </div>
            ))}
            {/* Second set of logos for seamless loop */}
            {logos.map((logo, index) => (
              <div
                className="flex shrink-0 items-center justify-center px-8 py-4 opacity-60 transition-opacity duration-200 *:fill-foreground hover:opacity-100"
                key={`second-${logo.name}-${index}`}
              >
                {logo.logo}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

export default LogoMarquee;

Similar components