Logo Marquee

Installation

pnpm dlx shadcn@latest add @clover-ui/logo-marquee

Usage

import { LogoMarquee } from "@/components/logo-marquee";

<LogoMarquee
  logos={[
    { name: "Acme", src: "/logos/acme.svg", ratio: 4 },
    { name: "Globex", src: "/logos/globex.svg", ratio: 3 },
  ]}
/>

Logo Marquee is a "trusted by" logo strip that rolls. The logos sit on a gentle arc: the one in the middle is big and sharp, the ones beside it are smaller, a little lower, softly blurred and faded. Every couple of seconds they all glide one spot to the right, so the next logo rolls into the middle and a new one slides in from the left edge. It keeps going round, and pauses when it's off screen or you switch to another tab. When you come back, it picks up where it stopped.

A soft shimmer sweeps across the logo in the middle. By default it's a dim shine, a soft blend of the logo color and your page background, so it works in light and dark mode. Pick its color with shimmerColor, for example shimmerColor="#8b5cf6", or turn it off with shimmer={false}.

The logos are text-2xl by default. Use a text size class to make them bigger or smaller, for example className="text-4xl".

The logos are drawn in the current text color, so they match light and dark mode. They use text-foreground/80 by default. Change the color with a class such as text-muted-foreground. Any single-color SVG or PNG works as a logo, because only its shape is used.

ratio is the logo's width divided by its height. It balances the sizes so that wide logos and tall logos look about the same size. Each logo's name is read by screen readers.

With reduced motion on, it stays still with the first logo in the middle.

Logos

The default logos are Vercel, Convex, OpenAI, Anthropic, Linear, Notion, Cursor, Framer, Discord, Shopify, Descript, Stripe, Raycast and Clerk. Many are taken from the open source Spell UI (MIT license). The Convex, Anthropic, Stripe, Raycast and Clerk logos are from svgl. The Cursor mark is from LobeHub Icons. They load from cloverui.vercel.app and are exported as logoMarqueeLogos. Each logo is a trademark of its company, so use them only as placeholders and swap in the companies you actually work with.

Props