# Feature Atlas (Moonarc)

Lays out features as a bento grid: one slab split by 1 px hairlines, with the page ground showing through the gaps. Each cell has a stage slot for a live demo, an index, a title (a link when `href` is set), a blurb and one readout line. Cells reveal with a stagger, and two can be accent-filled. The Moonarc home page's atlas uses the same pattern.

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `items` | `{ title, blurb, href?, readout?, fill?, wide? }[]` | none | Cells, in order. Put a live demo in slot="stage-{index}": the stage exposes it as it is, so a demo's controls stay reachable and decoration marks itself aria-hidden. |
| `columns` | `2 | 3 | 4` | `4` | Columns on wide screens; two on tablets, one on phones. |
| `accent` | `string` | `var(--primary)` | Fill colour for `fill` cells; the primary colour of the theme by default. |
| `onAccent` | `string` | `var(--primary-foreground)` | Text colour on the accent. |
| `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 FeatureAtlas from '@/components/moonarc/pro/FeatureAtlas.astro';
import Aurora from '@/components/moonarc/Aurora.astro';
---
<FeatureAtlas columns={3} items={[
  { title: 'Measured', blurb: 'Every byte from a real build.', readout: '0 B', fill: true },
  { title: 'Survives navigation', blurb: 'Rebinds after every swap.', href: '/docs/view-transitions/' },
  { title: 'Page transitions', blurb: 'On Astro\'s router.', wide: true },
]}>
  <Aurora slot="stage-0" />
</FeatureAtlas>
```

## Reduced motion

Cells fade in without stagger or travel.

## With ClientRouter

Inherits Reveal; nothing to wire.

## Craft

- gap: 1px with the edge colour as the grid background: hairlines, not card gaps, so the slab reads as an instrument panel.
- Fill the 2nd and 7th cells, never neighbours. On a diagonal, two accents read as a deliberate pattern rather than emphasis.
- Titles at 23 px: the middle step between body and section heading that a tile needs.

## Replaces

- BentoGrid (Aceternity / Magic UI)
- Feature sections (Tailwind Plus)

## Source

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