# Logo Marquee

> "Trusted by" logo strip that scrolls forever in one or two rows running opposite ways. Each row is measured and repeated just enough to cover the frame, so the loop never gaps at any width. Hovering eases the strip to a crawl and lifts the logo under the pointer while the rest dim; a pause button stops it, and reduced motion lays the logos out still.

- Slug: `logo-marquee`
- Category: [Logo clouds](https://www.assembli.design/category/logos.md)
- Type: block
- Tags: logo-cloud, marquee, social-proof, infinite-scroll, customers
- npm dependencies: lucide-react
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/logo-marquee
- Page: https://www.assembli.design/components/logo-marquee

![Logo Marquee preview](https://www.assembli.design/thumbnails/logo-marquee-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `React.ReactNode` | `"Trusted by teams at"` | Short line above the strip, e.g. "Trusted by 4,000+ teams". |
| `link` | `{ label: string; href: string }` |  | A link beside the title, e.g. to customer stories. |
| `logos` (required) | `LogoMarqueeItem[]` |  |  |
| `rows` | `1 \| 2` | `1` | Splits the logos into two rows that run in opposite directions. |
| `speed` | `number` | `40` | Pixels per second. |
| `hover` | `"slow" \| "pause"` | `"slow"` | Slows the strip to a crawl while the pointer is over it, instead of stopping. |
| `pauseButton` | `boolean` | `true` | Shows a pause button, so the motion can be stopped (WCAG 2.2.2). |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/logo-marquee/logo-marquee.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/logo-marquee
```

Registry item JSON: https://www.assembli.design/r/logo-marquee.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.