Linkage
Dissecting a rotation that seems to stop
While the center square makes a quarter turn, the side squares slide as if bolted to it, and near the diamond everything seems to pause. Yet only the rotation carries keyframes — three. The sides have zero; their position is computed every frame as the closest spot that stays clear of the spinning square. Even the pause is nobody stopping anything. One rotation and a one-line contact law, dissected as one pure function.
- Published
- June 10, 2026
- Topics
- Tangency · Geometry · Easing · SVG
Who moves the side squares?
While the center square makes its quarter turn, the side squares slide outward, seem to pause around the diamond, and come back. The three motions are perfectly bound together — so what is doing the binding?
Only the center's rotation carries keyframes — three of them. The sides have none. Their position is computed every frame: the closest spot that stays just clear of the spinning square. The linkage is one rotation plus a one-line contact law.
Write one rotation and one line of law
- 3 rotation keys — 0° on frame 3, 45° on frame 46, 90° on frame 89
- one easing curve per segment, two in total
- zero keyframes on the side squares
- push distance runs 0 → 11px → 0
A square with a 54px side is 54px wide while it stands upright. At the diamond (45°) its diagonal turns sideways and it widens to about 76px. Each frame, the sides are placed to keep a 0.1px gap from half that width — right pushed out, left pushed out, symmetric. No time offset.
The apparent stop near the diamond is not a key holding anything. Around 45° the width barely changes, so the push barely changes — a fake stop created by the shape itself. Measured, the rotation passes 45° at +0.175° per frame, not zero. The rotation never stops.
Is it really touching?
From the push trajectory alone you can solve backwards: if the sides really are touching, what must the square's side length be? The answer comes out 53.83 — and the side measured independently from the video is 53.92–53.95. The remaining gap also stays constant, +0.103 ± 0.064px, across the whole travel. A size that matches and a gap that holds still — those two are contact's fingerprints.
You could also key the sides by hand — 13 keys fit slightly better (0.043px vs 0.075px). That explanation was still thrown out: if the sides were keyed by hand, the 53.83px side length recovered from their track matching the real square would be pure coincidence. The apparent 1.5-frame left–right offset also vanished under finer measurement, to below 0.36 frames — false evidence manufactured by a coarse measuring method.
One pure function is all you need
The implementation is one pure function: pass a frame number, get back the center's angle and the sides' positions. The law is 90°-periodic, so a quarter turn yields one push — and feeding it a half turn really does yield two. The push count is not decided in advance; it follows automatically from the rotation you feed in. Every number sits as a plain constant in the JavaScript this page loads: the browser's view-source doubles as the spec sheet.