Path Follow Trail
A chain of points following a drawn path, over a trail that records how fast you drew it.
The canvas in this preview is the file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useRef } from "react";
/**
* Vibary · Path Follow Trail
*
* A short chain of points following the path you draw, over a trail that
* records how fast you drew it.
*About this effect
For a surface where the gesture itself is the content — a signature field, a drawing canvas, a swipe tutorial, a cursor that should feel attached to something. The lag is a distance rather than a time: the path is resampled into samples a fixed number of pixels apart, so follower k simply sits k spacings back along it and the chain holds its formation at any speed. Easing each follower toward the one ahead cannot do that — in simulation the same chain closes to 3.5px gaps at 60px/s and stretches to 53px at 900px/s, fifteen times the difference, where the resampled one measures 26.0px at both. It is also why stopping leaves the chain strung out along the path rather than collapsing onto your finger. The trail is the same buffer read a second way: each sample carries the speed it was laid at and is drawn as a dash exactly as long as the head travelled in one frame there, so the trail is dotted where you were slow and closes into a solid line above about 240px per second, with nothing to tune — the crossover is just the ratio of the dash to the sample spacing.