# Logo Cloud Switch

> A row of six logos that hands over to the next set every few seconds, slot by slot, each mark blurring out as the next rises in. A segmented filter narrows the cloud by industry, and a pause button with a countdown ring stops the rotation. Hover or focus also holds it, the row never changes height, and reduced motion gets a static set.

- Slug: `logo-cloud-switch`
- Category: [Logo clouds](https://www.assembli.design/category/logos.md)
- Type: block
- Tags: logo-cloud, social-proof, rotation, filter, blur, autoplay
- npm dependencies: @base-ui/react, motion, lucide-react
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/logo-cloud-switch
- Page: https://www.assembli.design/components/logo-cloud-switch

![Logo Cloud Switch preview](https://www.assembli.design/thumbnails/logo-cloud-switch-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `logos` (required) | `SwitchLogo[]` |  |  |
| `groups` (required) | `{ id: string; label: string }[]` |  | Filters shown after "All", in order. Each `id` matches a logo's `group`. |
| `allLabel` | `string` | `"All"` | Label of the first filter, which shows every logo. |
| `eyebrow` | `React.ReactNode` |  | Small line above the controls. |
| `perView` | `3 \| 6` | `6` | Logos visible at once: six in a row on wide screens, two rows of three on phones. |
| `interval` | `number` | `3600` | Milliseconds each set stays up. |

## 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-cloud-switch/logo-cloud-switch.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/logo-cloud-switch
```

Registry item JSON: https://www.assembli.design/r/logo-cloud-switch.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.