# Team Grid (Moonarc)

Shows team members in a hairline grid: portraits that tilt toward the cursor with a glare, initials when there is no photo, names and roles revealed with a stagger.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/team-grid` (license key required)
- Tier B · category section · trigger scroll, pointer
- Readout: `<TeamGrid people={[{ name, role }]}>`
- Browser support: widely (every browser)
- Measured cost: 0 B JS of its own · uses Tilt + runtime + Reveal (with dependencies 3.5 kB raw; CSS 10.9 kB raw)
- Page: https://moonarc.dev/components/team-grid/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `people` | `{ name, role, photo?, href? }[]` | none | People; initials are drawn when photo is missing. |
| `columns` | `2 | 3 | 4` | `4` | Columns on wide screens. |
| `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'` | Cell padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import TeamGrid from '@/components/moonarc/pro/TeamGrid.astro';
---
<TeamGrid columns={3} people={[
  { name: 'Azri Putra', role: 'Maintainer', photo: '/team/azri.jpg', href: 'https://github.com/azriPtr' },
  { name: 'You', role: 'Contributor' },
]} />
```

## Reduced motion

Fades in without stagger; no tilt.

## With ClientRouter

Inherits Reveal and Tilt; nothing to wire.

## Craft

- Tilt 8° with glare on the photo only. The caption stays put so names remain readable while the portrait moves.
- Hairline grid, not cards: a team reads as one group.
- Initials as a fallback: a missing photo should never be a broken image.

## Replaces

- Team sections (Tailwind Plus)

## Source

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