Magnetic Snap
Filings that belong to the nearest socket, let go for a passing pointer, and snap back.
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 · Magnetic Snap
*
* Filings that belong to the nearest of several sockets. Sweep a pointer
* through them and they let go, follow it, and snap back into whichever
* socket they end up closest to.About this effect
For a surface where things have places to be — a board with columns, a layout with drop targets, a set of presets. Both of its edges are bands rather than lines, and that is the whole effect. Allegiance is sticky: a filing changes socket only when another is closer by a clear margin, not merely closer, because a filing resting on a midline otherwise flips target on the noise of its own spring and buzzes there — simulated, one filing crossing a boundary switches 49 times bare and once with a 14px band. Arrival is an event: inside a small capture radius the filing is placed exactly on its slot, its velocity cleared, and it leaves the integrator, where a spring alone only ever approaches and so never actually snaps. Two things follow for free — a settled field parks the animation loop until the next pointer event, and each filing is drawn as a dash along the same vector the spring is already pulling on, so the field lines cost nothing extra.