1 variant

Logo Marquee

A row of logos scrolling forever, faded at both ends, that stops whenever nobody is reading it.

NorthlineVeraHalcyonEmber & CoFenwickSolsticeArgonPortage

usage.tsx

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

export function TrustedBy() {
  return (
    <LogoMarquee duration={28}>
      {companies.map((name) => (
        <span key={name} className="text-lg font-semibold">
          {name}
        </span>
      ))}
    </LogoMarquee>
  );
}

"use client";

import { Fragment, type ReactNode, useEffect, useLayoutEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export interface LogoMarqueeProps {
  /** The logos, or anything else, to scroll. */
  children: ReactNode;
  /** Seconds for one full pass. Default 30. Slower reads as calmer. */
  duration?: number;
  /** Which way the row travels. Default "left". */
  direction?: "left" | "right";

135 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/logo-marquee

Props

childrenRequiredReactNode

Repeated as many times as it takes to fill the frame, so the loop never shows empty air.

durationnumberDefault 30

Seconds for one full pass. Slower reads as calmer.

direction"left" | "right"Default "left"

Which way the row travels.

gapnumberDefault 48

Gap between items, in px. Also the gap across the seam.

pauseOnHoverbooleanDefault true

Stops while the pointer is over the row, so a logo can be read.

classNamestring

Merged last, so anything passed here wins over the component's own classes.