# Steps / Timeline (Moonarc)

A vertical timeline: the line draws itself down the page in step with the scroll, each step revealing from the line's side as it is reached, markers numbered or dated. Zero JavaScript of its own; where scroll timelines are missing the line is simply drawn.

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `steps` | `{ title, body, label? }[]` | none | Steps in order; label replaces the number (a date, a version) and, unlike the number, is read by screen readers. |
| `headline` | `string` | none | Section heading. |
| `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'` | Block padding and the gap between steps ×0.8 / ×1 / ×1.25 through --ma-density. |
| `align` | `'start' | 'center'` | `'start'` | Heading alignment. |

## Usage

```astro
---
import StepsSection from '@/components/moonarc/pro/StepsSection.astro';
---
<StepsSection headline="How it ships" steps={[
  { title: 'Install', body: 'npx astro add moonarc' },
  { title: 'Import', body: 'One component at a time.' },
  { title: 'Measure', body: 'The budget test prints every byte.' },
]} />
```

## Reduced motion

Steps fade in place; the line is drawn.

## With ClientRouter

Inherits Reveal; nothing to rebind.

## Craft

- The line is a scale-y bound to the list's own view timeline from entry 20% to exit 80%: it is always just ahead of the step you are reading.
- Steps reveal 20 px from the line's side: the inline start, so the right in a right-to-left page, where the line and markers sit too.
- Markers are ringed, not filled, so the line passing behind them reads as continuous.

## Replaces

- Timeline (Aceternity)
- Steps sections (Tailwind Plus)

## Source

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