Sparkle Trail
Small sparkles dropped behind a moving point, fading where they fell.
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 · Sparkle Trail
*
* Sparkles left behind a moving point. The technique is that they are
* emitted per unit of distance travelled, not per frame — and when a
* frame covers more than one spacing, the missing sparkles are placedAbout this effect
A trail for a cursor, a dragged handle, or the head of a progress sweep. Two decisions keep it from looking like glitter. Sparkles are emitted per unit of distance travelled rather than per frame — and when one frame covers several spacings, the owed sparkles are placed along the segment instead of piled at its end — so the density is the same whether the point crawls or races, and pausing drops nothing. And a sparkle never moves once it is born: it stays where it fell and fades, which is what reads as a trail. Drag them along with the point and you have a comet. About ten are alive at a time, hard-capped at sixty.