All componentsdisplay

Logo Marquee

Hover to pause and bring logos to full color.

Installation

$ npx shadcn@latest add https://deepmoon.dev/r/logo-marquee.json

Also installs: marquee

Props

LogoMarqueeProps

Prop	Type	Required
logos	LogoMarqueeLogo[]	Yes
speed	number	No
className	string	No

Code

logo-marquee.tsx

import * as React from "react";

import { Marquee } from "@/components/motion/marquee";

export interface LogoMarqueeLogo {
  src: string;
  alt: string;
}

export interface LogoMarqueeProps {
  logos: LogoMarqueeLogo[];
  speed?: number;
  className?: string;
}

/**
 * Wraps the Marquee motion primitive, so reduced-motion behavior (a
 * single static row instead of an animated duplicated one) is inherited
 * rather than reimplemented.
 */
export function LogoMarquee({ logos, speed = 40, className }: LogoMarqueeProps) {
  return (
    <Marquee speed={speed} className={className}>
      {logos.map((logo, index) => (
        <img
          key={index}
          src={logo.src}
          alt={logo.alt}
          className="h-8 w-auto shrink-0 grayscale opacity-60 transition-[filter,opacity] duration-200 hover:grayscale-0 hover:opacity-100"
        />
      ))}
    </Marquee>
  );
}