Sync Orbit
Two rings of points turning at different rates that catch and hold when coupled.
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 · Sync Orbit
*
* Two rings of points turning at different rates. As the coupling
* between them is raised they slip more and more slowly, hang almost in
* step, slip once more — and then catch and hold.About this effect
A readout for two things that are meant to agree — replicas, a device and its backup, a local cache against the server. Nothing tweens the rates together: the inner ring's rate is nudged by how far out of step it currently is, so lock is something the pair does rather than something the animation announces, and it happens exactly when the coupling can cover the rate difference and not before. That threshold is what buys the good part — just under it the slip collapses at the alignment and races between them, a twelfth of its peak in simulation, so the rings visibly hang together, give up and hang again. That beat is what two nearly-synchronised things actually look like, and it costs nothing extra because it is the same equation rather than a second animation. Locked is not identical either: the pair settles at whatever standing phase error it needs to make up the rate difference, about a degree and a half at full coupling, which is what a real phase-locked loop does.