Particle Assemble
A scattered cloud converging into a mark, drawn in stroke order.
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 · Particle Assemble
*
* A scattered cloud converging into a glyph. The technique is where the
* targets come from: the glyph is a stroked path, and the targets are
* sampled along it by arc length — evenly spaced in distance travelled,About this effect
A confirmation that arrives rather than appears: a cloud of points gathers into a checkmark or a ring. The technique is where the targets come from — the glyph is a stroked polyline, and targets are sampled along it by arc length, evenly spaced in distance rather than per segment or by rejection-sampling a bitmap. The finished mark then has constant density and reads instantly. Better still, each particle knows how far along the stroke its target sits, and that same number becomes its delay, so the mark writes itself in stroke order instead of fading in everywhere at once. The loop stops the moment the last particle lands.