# Dot Process (Moonarc)

How the work runs, in a few steps across the page: each step a round number in a colour block, a title and a line. On a wide screen the steps stand in one row and a hairline runs behind the numbers, drawn across as the row comes into view on a scroll-driven timeline; on a phone each step is a card of its own. The steps come in one after another (Reveal). Zero JavaScript of its own.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/dot-process` (license key required)
- Tier B · category section · trigger scroll
- Readout: `<DotProcess steps={[{ title, body }]} />`
- Browser support: limited (Chrome 115 · not Firefox · Safari 26); elsewhere: the hairline is drawn whole from the start
- Measured cost: 0 B JS of its own · uses Reveal + runtime (with dependencies 3.0 kB raw; CSS 13.1 kB raw)
- Page: https://moonarc.dev/components/dot-process/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `steps` | `{ title: string; body: string; label?: string }[]` | none | The steps, in order. label replaces the number in the dot and is read (a week, a day); a plain number is hidden from a screen reader, since the list says the order. |
| `eyebrow` | `string` | none | A short line above the heading. |
| `headline` | `string` | none | The heading. Slot "headline" wins and may hold an <em>. |
| `blocks` | `(1 | 2 | 3 | 4 | 5)[]` | `[1, 2, 3, 5]` | The blocks the dots take in turn. |
| `level` | `2 | 3` | `2` | Heading level of the section's heading; the steps' titles are one below. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The section's ground; the dots keep their blocks. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import DotProcess from '@/components/moonarc/pro/DotProcess.astro';
---
<DotProcess
  eyebrow="How a month runs"
  headline="From brief to report"
  steps={[
    { title: 'Brief', body: 'A call about the month: what is new, what sells, what to say.' },
    { title: 'Plan', body: 'A calendar of posts and the shoot list, for you to approve.' },
    { title: 'Shoot', body: 'One day on site; the edit is back within two.' },
    { title: 'Post and report', body: 'Posting, replies and the numbers at the end of the month.' },
  ]}
/>
```

## Reduced motion

The steps are in place and the hairline is drawn whole.

## With ClientRouter

Inherits Reveal; the hairline is CSS (a view timeline). Nothing of its own to rebind.

## Craft

- The hairline is drawn from the reading start to the end over the stretch in which the row comes into view, so it is whole by the time the last step is read.
- The dots sit over the hairline (z-index 1), in their blocks: the line goes through the steps, not over them.
- On a phone the line would run off the screen, so each step becomes a card on the card colour instead.

## Replaces

- Process sections (Framer agency templates)

## Source

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