Signal Ripple
Rings of dots leaving a point on a steady cadence, thinning as they spread.
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 · Signal Ripple
*
* Rings of dots leaving a point on a steady cadence — a broadcast, a
* sync reaching out, a beacon.
*About this effect
A broadcast made visible — a device announcing itself, a sync reaching outward, a beacon on a map pin. Each ring carries a fixed number of dots, so as its radius grows those dots spread around a longer circumference and the ring genuinely thins on the way out; opacity is tied to that spacing rather than to a timer, which is why the falloff still reads correctly when you change the speed, the reach or the cadence. Consecutive rings are rotated by the golden angle so their dots never line up into radial spokes, and a small emitter dot marks the source so the rings read as leaving somewhere.