Drag Trail
Particles dropped behind a dragged element, settling where they land.
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 · Drag Trail
*
* Particles left behind something being dragged, which come to rest
* where they land rather than fading out mid-air.
*About this effect
Weight and history for something being moved — a card between columns, a pin on a map, a slider being thrown. Particles are emitted per pixel travelled rather than per second, which is the difference between a trail and a fountain: a time-based emitter keeps pouring while the thing is held still and clumps at the start of a flick, while distance-based emission gives an even line at any speed, produces nothing at all during a pause, and stays even through a throw that crosses the surface in a single frame because the drop points are interpolated along the segment. Each particle inherits a fraction of the drag's velocity, slides a little past where it was dropped and comes to rest there rather than fading out mid-air. Left alone it follows the pointer on its parent; give it a position and it will follow a keyboard-driven control just as well.