Heartbeat Dots
A row of dots beating in sequence, quicker and tighter as the system strains.
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 · Heartbeat Dots
*
* A row of dots that beats along its length, quicker and tighter as the
* system it reports on comes under strain.
*About this effect
A pulse for something that is running — a worker pool, an ingest queue, a live connection — where the rate is the reading. Nothing in it is scheduled: one phase accumulator advances by delta over the period each frame, and every dot's brightness is a function of that phase minus its own share of the lag. A change in load therefore changes the derivative of the phase and never the phase itself, so a metric that jumps between two frames speeds the beat up continuously instead of stuttering, skipping a dot or firing the same beat twice — which is what a cascade of timers restarted on each reading does, exactly when the reading is moving fastest. The lag between neighbours is a fraction of the period rather than a number of milliseconds, which is what guarantees there is never more than one beat on the row at any rate; fix it in seconds and a fast enough beat laps itself. Rate is the only channel — there is no colour ramp — so it reads the same in greyscale and beside a label.