# Integration Grid (Moonarc)

A grid of integrations, tools or partners: cards with an icon, a name and a line, each lit by a spotlight that follows the cursor and lifting on hover, revealed with a tight stagger.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/integration-grid` (license key required)
- Tier B · category section · trigger scroll, pointer
- Readout: `<IntegrationGrid items={[…]} columns={4}>`
- Browser support: widely (every browser)
- Measured cost: 0 B JS of its own · uses Spotlight + runtime + Reveal (with dependencies 3.3 kB raw; CSS 11.2 kB raw)
- Page: https://moonarc.dev/components/integration-grid/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `items` | `{ name, description, href?, icon? }[]` | none | Cards; icon is an HTML string (inline SVG or <img>). |
| `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'` | Card padding and gaps ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import IntegrationGrid from '@/components/moonarc/pro/IntegrationGrid.astro';
---
<IntegrationGrid columns={3} items={[
  { name: 'GSAP', description: 'ScrollTrigger on the Astro lifecycle.', href: '/docs/view-transitions/' },
  { name: 'Lenis', description: 'One instance per document.' },
  { name: 'Tailwind', description: 'Opt-in token layer.' },
]} />
```

## Reduced motion

Cards fade in without stagger; the spotlight still follows the cursor (direct manipulation); no lift.

## With ClientRouter

Inherits Reveal and Spotlight; nothing to wire.

## Craft

- Stagger 40 ms: twelve cards finish in under half a second, so the grid arrives as one piece.
- Hover lift is --ma-travel-hover, so it matches every other hover on the page and changes with the preset.
- The card, not the icon, is the link target (a pseudo-element covers it) so the whole spotlighted surface is clickable.

## Replaces

- Integration sections (Tailwind Plus)
- HoverEffect cards (Aceternity)

## Source

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