# Logo Wall (Moonarc)

A "trusted by" section: a heading, a strip of greyscale logos drifting past that colour up on hover, and optionally the same logos as a hairline grid revealed with a stagger. Pure CSS.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/logo-wall` (license key required)
- Tier B · category section · trigger always, scroll
- Readout: `<LogoWall logos={[…]} grid>`
- Browser support: widely (Chrome 120 · Firefox 53 · Safari 15.4)
- Measured cost: 0 B JS (CSS 11.4 kB raw)
- Page: https://moonarc.dev/components/logo-wall/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `logos` | `{ src, alt, href?, height? }[]` | none | Logos; height in px, default 28. |
| `heading` | `string` | `'Trusted by'` | Kicker above the strip. |
| `grid` | `boolean` | `false` | Also render the logos as a static hairline grid. |
| `duration` | `number` | `40` | Seconds per loop of the strip. |
| `columns` | `2 | 3 | 4` | `auto-fit` | Columns of the grid; by default as many 8 rem cells as fit. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The ground: the page surface, a muted band, an always-dark ink panel, or a deep brand panel. Each paints --background, --ma-tone-muted (over --muted, with a --border hairline), --ma-tone-ink or --ma-tone-brand (over --primary) with the matching text. With theme.css, a painted tone also re-declares --card, --border, --input and --ring inside the section, so cards and fields follow the ground. Decoration is strongest on brand. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |
| `align` | `'start' | 'center'` | `'center'` | Heading alignment. |

## Usage

```astro
---
import LogoWall from '@/components/moonarc/pro/LogoWall.astro';
---
<LogoWall heading="Used by" grid logos={[
  { src: '/logos/a.svg', alt: 'A', href: 'https://a.example' },
  { src: '/logos/b.svg', alt: 'B' },
]} />
```

## Reduced motion

The strip stops and scrolls by hand; the grid fades in without stagger.

## With ClientRouter

CSS-only; nothing to rebind.

## Craft

- Greyscale at 70% until hovered: logos are proof, not decoration, and a wall of brand colours competes with the page.
- The strip pauses on hover so a logo can be clicked; the grid exists for the reader who wants to count.
- Duration ~1 s per 60 px of content keeps logos readable in motion.

## Replaces

- Logo clouds (Tailwind Plus)
- LogoLoop (React Bits)

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/logo-wall` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: marquee, reveal.