Enter
Navigation

Stepper

A step indicator. The fill travels between nodes and fuses with them on arrival, forming a meniscus at the join.

Step 1

Usage

<Stepper
  steps={3}
  gap={56}
  nodeRadius={9}
  trackWidth={4}
  intensity="normal"
  spring="smooth"
/>

How the motion works

The travelling head and the completed nodes are separate SVG shapes passed through an alpha goo filter — a Gaussian blur followed by a high-contrast alpha threshold. Where two shapes come close their blurred alpha sums past the threshold and they fuse. A CSS width transition cannot produce that join, which is why this is SVG with a filter rather than a growing bar.

useSpringStateSVG feGaussianBlur + feColorMatrix

Limitations

Known gap. The goo filter runs on the GPU but is still the most expensive effect in the library. On a page with many steppers, lower the intensity to reduce the blur radius.

Props

PropTypeDefaultDescription
stepsnumber—Total number of steps.
value / defaultValuenumber—Controlled or initial step, 1-based.
onChange(value: number) => void—Fires when a step is selected.
caption(step: number) => string—Builds the caption under the track.
interactivebooleantrueAllow clicking a node to jump to it.
intensity"subtle" | "normal" | "strong"—Scales the goo blur radius.