Scatter On Press
A tile of points that opens away from a press and closes back into itself on release.
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 · Scatter On Press
*
* A tile made of points. Press it and it opens away from your finger;
* let go and it closes back into exactly the tile it was.
*About this effect
Physical feedback for a press that should feel like touching something rather than clicking it — a long-press affordance, a card being picked up, a control that admits it has substance. The press is a force applied for as long as it is held rather than a burst fired once, and that single choice makes the gesture legible twice over. Hold time matters, because reaching the balance between the outward push and each point's spring takes about a quarter of a second, so a tap opens the tile a tenth of the way and a held press opens it fully. And nothing can be blown off the surface, because the balance is a fixed distance: a point 14px from the press settles 61px out whether it is held for a second or a minute. Where you press matters too — the push falls off with distance, so the near points travel about three times as far as the far ones. The return is exactly critically damped, so a hundred and fifty points close once and stay closed instead of jittering after the gesture is over.