Queue Stream
Items flowing along a route, where the gap between them is the throughput.
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 · Queue Stream
*
* Items flowing along a route, where the gap between them is the
* throughput — a pipeline, a queue draining, traffic between two
* services.About this effect
Flow between two places — a queue draining, an ingestion pipeline, traffic between two services. Particles are emitted on a clock and then travel at a constant speed along the route's arc length, so nothing positions them: the gap between two particles is literally the time between two arrivals, and a busy stream packs tight while a quiet one strings out. Arc-length travel is the other half of it, because stepping a Bézier by its parameter makes particles race down the straights and crawl through the corners, which reads as a broken animation rather than as flow. Emission is back-dated within the frame so spacing stays exact at any frame rate.