Logo marquee

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

import { LogoMarquee } from "@/forma/arc/blocks/logo-marquee/logo-marquee";

Base

In FORMA

Liegt in kit/arc/blocks/logo-marquee und ist über @/forma/arc/blocks/logo-marquee/logo-marquee erreichbar.
Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

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.

Usage

import { LogoMarquee } from "@/forma/arc/blocks/logo-marquee/logo-marquee";

export function Customers() {
  return (
    <LogoMarquee
      title="Trusted by product teams"
      description="Teams of every size ship with us."
      brands={[{ name: "Acme", icon: "/logos/acme.svg" }, { name: "Globex", icon: "/logos/globex.svg" }]}
    />
  );
}

Examples

Integration logos

<LogoMarquee
  title="Works with your stack"
  description="Connect the tools your team already uses."
  brands={[
    { name: "Linear", icon: "/logos/linear.svg" },
    { name: "Figma", icon: "/logos/figma.svg" },
    { name: "Notion", icon: "/logos/notion.svg" },
  ]}
/>

API reference

LogoMarquee

A heading, a looping row of brand marks, and a pause control.

Prop	Type	Default	Description
`title`	`string`	`"Good work moves between tools"`	Section heading.
`description`	`string`	`"From the first idea to the final handoff, a familiar set of tools stays close to the work."`	Supporting line under the heading.
`brands`	`LogoMarqueeBrand[]`	`exampleBrands`	Marks to show. Defaults to seven sample tool logos.
`tone`	`"color" \| "mono"`	`"color"`	Color shows each mark in its official brand colors; mono draws every mark in the text color for a quieter row.

LogoMarqueeBrand

One brand entry.

Prop	Type	Default	Description
`name` (required)	`string`	–	Visible brand name.
`icon` (required)	`string`	–	URL of a single-color SVG, applied as a CSS mask so it inherits the text color.
`color`	`string`	–	Official brand color for a single-color mark in color tone. Leave out for black or white marks such as GitHub, Notion, and Vercel so they follow the text.
`colorIcon`	`string`	–	URL of a full color SVG for multicolor marks such as Slack or Figma, used in color tone.

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.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt

ZurückSign up form WeiterPlan comparison

Komponente und Text: Arc UI (MIT, uiarc.dev), angepasst für FORMA.