# Process Thread (Moonarc)

How a thing is made, as steps sewn on one thread: a stitched line runs down the section and each step is a knot on it (a round number in a colour block, stitched round its edge) with a title, a line and how long it takes. On a wide screen the steps fall to either side of the thread in turn; on a phone the thread runs down the left. The thread is sewn as the list comes into view and each step settles in as it arrives. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/process-thread` (license key required)
- Tier B · category section · trigger scroll
- Readout: `<ProcessThread steps={[{ title, body, meta }]} />`
- Browser support: limited (Chrome 115 · not Firefox · Safari 26); elsewhere: the thread is whole and every step shows
- Measured cost: 0 B JS (CSS 11.6 kB raw)
- Page: https://moonarc.dev/components/process-thread/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `steps` | `{ title, body, meta?, label? }[]` | none | The steps, in order. meta: how long it takes, in the mono face; label: shown in the knot instead of the number, and read. |
| `eyebrow` | `string` | none | A short line above the heading. |
| `headline` | `string` | none | The heading. Slot "headline" wins and may hold an <em>, set in the emphasis face and colour. |
| `copy` | `string` | none | A line under the heading. |
| `blocks` | `(1 | 2 | 3 | 4 | 5)[]` | `[1, 2, 3, 4]` | The colour blocks the knots 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 knots keep their blocks on every tone. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import ProcessThread from '@/components/moonarc/pro/ProcessThread.astro';
---
<ProcessThread
  eyebrow="Process"
  steps={[
    { title: 'Throw', body: 'Each piece is pulled up on the wheel.', meta: 'Day 1' },
    { title: 'Trim', body: 'The foot is cut and the handles added.', meta: 'Day 3' },
    { title: 'Fire', body: 'Glazed by hand and fired to full heat.', meta: 'Week 5' },
  ]}
>
  <span slot="headline">Six weeks from <em>clay to table</em></span>
</ProcessThread>
```

## Reduced motion

The thread is whole and every step stands in place.

## With ClientRouter

CSS only; nothing to rebind.

## Craft

- The thread is a dashed gradient revealed by a clip-path on the list's view timeline, so it is sewn at the speed of the scroll, forward and back.
- Each step settles in on its own view timeline as it enters, so a long list never reveals rows the reader cannot see yet.
- The knot's dashed outline sits inside its edge, the way a button is sewn on, and a ring of the ground colour lets the thread pass behind it.
- The numbers are hidden from assistive technology: the ordered list already says the order.

## Replaces

- Vertical timelines (Framer templates)
- Process sections with a scroll line

## Source

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