Tracing Beam
ScrollA line beside an article fills as it is read, with a dot at its head.
Chrome 115 · not Firefox · Safari 26scroll
Process Thread
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.
Live demo
Process
Six weeks from clay to table
Every piece goes through the same five steps, by hand, in the same room.
Wedge
The clay is kneaded until it has no air in it.
Throw
Each piece is pulled up on the wheel, then left to firm.
Trim and handle
The foot is cut and the handles added.
Bisque
A first, cooler firing hardens the clay for glazing.
Glaze and fire
Dipped by hand and fired to full heat.
Live, from the library itself, at full size: scroll, hover, navigate away and back. The demo is never gated.
Variants · each row writes the attribute the prop writes; the section's own CSS answers
tone
density
Measured
JavaScript of its own
0 B
CSS 11.6 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.
Browser support
Limited availability
Chrome 115 · not Firefox · Safari 26; needs scroll-timeline. Elsewhere: the thread is whole and every step shows.
Install Pro
The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:
npx shadcn@latest add @moonarc-pro/process-thread---
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>Without a key the registry answers 401 with an upgrade message.
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. |
Theming and overrides
The section reads the theme contract (shadcn's variable names with the base tokens as fallback), so a pasted theme or one --ma-brand recolours it. Its class names are the override surface and stay stable; a named slot replaces the matching prop with your own markup.
Classes
.ma-thread.ma-thread__body.ma-thread__copy.ma-thread__eyebrow.ma-thread__head.ma-thread__headline.ma-thread__knot.ma-thread__list.ma-thread__meta.ma-thread__step.ma-thread__text.ma-thread__title
Slots
slot="eyebrow"slot="headline"
Reduced motion
The thread is whole and every step stands in place.
With ClientRouter
CSS only; nothing to rebind.
Why it is built this way
- 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. See the migration table.
Related
Dot Process
ProHow the work runs, in a few steps across the page: each step a round number in a colour block, a title and a line.
Chrome 115 · not Firefox · Safari 26scroll
Materials
What the pieces are made of
Three clays and the glazes we mix from them. Pick one to see it up close.
Speckled stoneware
A grey clay with dark iron spots that come through the glaze as it fires.
Goes into Cups, bowls, plates
Porcelain
White, smooth and hard to throw thin. It lets a little light through at the rim.
Goes into Espresso cups
Red earthenware
A soft, warm clay that fires at a lower heat and is glazed inside to hold water.
Goes into The low vase
Ash glaze
Wood ash, sieved and mixed with feldspar; it runs in the kiln and pools green.
Goes into Vases, jugs
What the work is made of, as a short index: each material a row with its name, where it comes from and a small swatch, and beside the rows a large card for the one picked, with the swatch drawn big (a weave, a speckle, a grain, a crumb or a ripple, in the colours of its block), a note and what it goes into.
newly · Chrome 105 · Firefox 121 · Safari 15.4clickhover
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.
Chrome 115 · not Firefox · Safari 26scroll
Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown