Manicat UI

Logo marquee

A quiet, continuously moving row of brand marks with a pause control.

Preview
Logo marquee preview

Good work moves between tools

From the first idea to the final handoff, a familiar set of tools stays close to the work.

  • Figma
  • Linear
  • Notion
  • Slack
  • GitHub
  • Stripe
  • Vercel

When to use

  • A customer or integration logo strip on a landing page.
  • Social proof sections with a heading and a short supporting line.

When not to use

  • Use integrations when each logo needs a description or a connect action.
  • Use testimonial-stage when quotes matter more than logos.
  • Use carousel when people should browse items by hand.

shadcn CLI

Also installs (2)

  • manicat-foundation
  • button
Manual install(+)
registry.jsonjson
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "logo-marquee",
  "type": "registry:block",
  "title": "Logo marquee",
  "description": "A quiet, continuously moving row of brand marks with a pause control.",
  "categories": [
    "blocks"
  ],
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "https://manicat.viraza.net/r/manicat-foundation.json",
    "https://manicat.viraza.net/r/button.json"
  ],
  "files": [
    {
      "path": "registry/blocks/logo-marquee/logo-marquee.tsx",
      "type": "registry:component",
      "target": "@components/manicat/blocks/logo-marquee/logo-marquee.tsx"
    },
    {
      "path": "registry/blocks/logo-marquee/logo-marquee.module.css",
      "type": "registry:component",
      "target": "@components/manicat/blocks/logo-marquee/logo-marquee.module.css"
    },
    {
      "path": "registry/components/button/button.tsx",
      "type": "registry:component",
      "target": "@components/manicat/button/button.tsx"
    },
    {
      "path": "registry/components/button/button.module.css",
      "type": "registry:component",
      "target": "@components/manicat/button/button.module.css"
    }
  ],
  "docs": "Docs and live preview: https://uiarc.dev/components/blocks/logo-marquee",
  "meta": {
    "tier": "free",
    "kind": "block",
    "docs": "https://manicat.viraza.net/components/blocks/logo-marquee",
    "markdown": "https://uiarc.dev/components/blocks/logo-marquee/markdown"
  }
}

Usage

Install the component, then copy this into your app. Change the content and the props to fit your screen.

example.tsxtsx
"use client";

import { LogoMarquee } from "manicat/registry/blocks/logo-marquee/logo-marquee";

export function LogoMarqueeExample() {
  return <LogoMarquee />;
}

Examples

Real screens rather than isolated props. Switch to Code to copy a whole example into your project.

Customers strip “Trusted by” logos drifting under a headline, in mono tone to stay quiet.

Customers strip “Trusted by” logos drifting under a headline, in mono tone to stay quiet. preview

Trusted by teams who ship

From two-person studios to public companies.

  • Figma
  • Linear
  • Notion
  • Slack
  • GitHub
  • Stripe
  • Vercel

Accessibility

  • The duplicated loop copy is aria-hidden, so each brand is read once.
  • The pause button uses aria-pressed and a live region announces the motion state.

Motion

  • A CSS keyframe loop scrolls two copies of the list for a seamless track.
  • Under prefers-reduced-motion the animation stops and the duplicate list is hidden.

Responsive behavior

  • Below 700px the heading and description stack and the marks shrink.
  • The track fades at both edges with a mask, so logos never hard-cut at narrow widths.

Performance

  • The loop is a single CSS transform keyframe on one track, with no JavaScript animation.
  • Two copies of the list are rendered for a seamless loop; under reduced motion the animation stops and the copy is hidden.
  • Logos are CSS masks from SVG URLs, so use small single-color SVGs.

Notes for AI

  • Use for a customer or integration logo strip on a landing page.
  • Only pass brands you have permission to show; the defaults are illustrative.
  • Composes Arc Button for the pause control.