# Motif Stats (Moonarc)

Numbers someone can plan around, on a colour block: a panel in one of the palette's blocks with a drawing (Motif) half out of its corner, a short line and a heading, then the figures in a row, each large in the block's emphasis colour with its unit beside it and a line under a hairline. The numbers count up when the panel comes into view (CountUp) and the panel opens a little as it arrives (Reveal). Zero JavaScript of its own.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/motif-stats` (license key required)
- Tier B · category section · trigger scroll
- Readout: `<MotifStats stats={[{ value, unit, label }]} motif="wave" />`
- Browser support: newly (Chrome 91 · Firefox 128 · Safari 17); elsewhere: the final numbers, shown at once
- Measured cost: 0 B JS of its own · uses Reveal + runtime (with dependencies 3.0 kB raw; CSS 18.4 kB raw)
- Page: https://moonarc.dev/components/motif-stats/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `stats` | `{ value: number; unit?: string; label: string; prefix?: string; decimals?: number }[]` | none | The figures: the number (counted up), what it counts set small beside it, and the line under it. |
| `eyebrow` | `string` | none | A short line above the heading. |
| `headline` | `string` | none | The heading. Slot "headline" wins and may hold an <em>. |
| `block` | `1 | 2 | 3 | 4 | 5` | `2` | The colour block the panel paints. |
| `motif` | `'sun' | 'gate' | 'flower' | 'grid' | 'phone' | 'plate' | 'wave' | 'shapes'` | none | The drawing hanging out of the panel's top corner; none when unset. |
| `level` | `2 | 3` | `2` | Heading level. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import MotifStats from '@/components/moonarc/pro/MotifStats.astro';
---
<MotifStats
  eyebrow="From the price list"
  motif="wave"
  stats={[
    { value: 3, unit: 'days', label: 'From brief to the first posts.' },
    { value: 12, unit: 'posts', label: 'A month on the smallest package.' },
    { value: 48, unit: 'hours', label: 'Before the edit of a shoot is back.' },
  ]}
>
  <span slot="headline">Numbers you can <em>plan around</em></span>
</MotifStats>
```

## Reduced motion

The final numbers are there from the start and the panel does not open.

## With ClientRouter

Inherits CountUp and Reveal; nothing of its own to rebind.

## Craft

- The figures take the block's emphasis colour, which the palette picks to read at 4.5 : 1 on that block: a lagoon panel gets its butter, a wine one its blush.
- Each number starts 120 ms after the previous, so the row reads left to right.
- The drawing hangs out of the corner and is cut by the panel's edge: a picture that does not fit reads as part of the panel, one that fits reads as a sticker on it.

## Replaces

- Stats sections (Tailwind Plus)

## Source

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