Logo cloud

Note: There are two logo components scroll down to see another

Logo Cloud

TRUSTED BY TEAMS FROM AROUND THE WORLD

Logo Marquee

Note: Remove Grayscale for removing grayscale effect

TRUSTED BY LEADING TEAMS

Installation

Copy and paste the following code into your project.

components/eldoraui/marquee.tsx

import { cn } from "@/lib/utils";
 
interface MarqueeProps {
  className?: string;
  reverse?: boolean;
  pauseOnHover?: boolean;
  children?: React.ReactNode;
  vertical?: boolean;
  repeat?: number;
  [key: string]: any;
}
 
export function Marquee({
  className,
  reverse,
  pauseOnHover = false,
  children,
  vertical = false,
  repeat = 4,
  ...props
}: MarqueeProps) {
  return (
    <div
      {...props}
      className={cn(
        "group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]",
        {
          "flex-row": !vertical,
          "flex-col": vertical,
        },
        className,
      )}
    >
      {Array(repeat)
        .fill(0)
        .map((_, i) => (
          <div
            key={i}
            className={cn("flex shrink-0 justify-around [gap:var(--gap)]", {
              "animate-marquee flex-row": !vertical,
              "animate-marquee-vertical flex-col": vertical,
              "group-hover:[animation-play-state:paused]": pauseOnHover,
              "[animation-direction:reverse]": reverse,
            })}
          >
            {children}
          </div>
        ))}
    </div>
  );
}

Update the import paths to match your project setup.

Update `tailwind.config.js`

Add the following animations to your tailwind.config.js file:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animation: {
        marquee: "marquee var(--duration) linear infinite",
        "marquee-vertical": "marquee-vertical var(--duration) linear infinite",
      },
      keyframes: {
        marquee: {
          from: { transform: "translateX(0)" },
          to: { transform: "translateX(calc(-100% - var(--gap)))" },
        },
        "marquee-vertical": {
          from: { transform: "translateY(0)" },
          to: { transform: "translateY(calc(-100% - var(--gap)))" },
        },
      },
    },
  },
};

Props

Prop	Type	Default	Description
`className`	`string`		The class name to apply to the component.
`reverse`	`boolean`	`false`	Whether or not to reverse the direction of the `marquee`.
`pauseOnHover`	`boolean`	`false`	Whether or not to pause the `marquee` when the user hovers over the component.
`vertical`	`boolean`	`false`	Whether or not to display the marquee `vertically`.
`children`	`node`		The content to display in the marquee.
`repeat`	`number`	`1`	The number of `times` to repeat the content.