unvibed.
Menu
Free UI audit
All motion techniques

Blueprint draw-on.

Trace a binding notch on a measured drawing. The width label is visible before you inspect the cut.

Notch guide

Resting states
Notch guide → Cut line traced
Reduced motion
The complete cut line appears with the dimension already in place.

Implementation excerpt

<path pathLength="1" strokeDasharray="1"
  strokeDashoffset={selected ? 0 : 1} d={notch} />

Where Unvibed uses it

The chart draws the measured series as it enters view. The labels already contain the values. The research chart

Related design directions