Process
Process Chart
How a project's time divides: the phases as bars on a percent axis in two rows, growing once the chart is in view.
Layout and motion from the Compose Digi template — see it in contextTry it in the page builderBlocks come with Pro
Preview every block now, in any theme and at any width. The source, the install command and the AI prompt unlock when Pro opens, once the catalog reaches 20 templates.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label / title / lead | string | — | The title block over the chart (up to 650px). |
| axis | number[] | [0, 25, 50, 75, 100] | The marks in percent, dashed lines with labels; on phones only the first, middle and last. |
| phases | { name, from, to, row: 1 | 2 }[] | 5 phases | Each a bar from from% to to% on its row, its name above; the fills step from light to dark in this order. |
| chartLabel | string | — | The name of the visually hidden list that reads each phase with its range. |
| className | string | — | Classes for the <section>. |
- The bars start 1px wide and grow to their range, the names fading in, once the whole chart is in view (a spring with bounce 0.2, 0.4s; motion's useInView); not reversed. Full at once with reduced motion.
- The drawing is aria-hidden; screen readers read the hidden list. The fills are opacity steps of the foreground colour.
