Interaction · 2026
Five concentric rings, each governed by its own spring stiffness and damping coefficient. Move the cursor — or leave it — and watch them settle.
Try it
Move the cursor over the area. When it leaves, the rings settle back to centre with a slight oscillation.
What it is
I wanted to understand how interactions behave when they have physical weight behind them — not just easing curves, but actual forces. Five concentric rings, each governed by a damped harmonic oscillator with its own stiffness and damping values — the innermost responds almost immediately, the outermost hangs behind with elastic lag. When the cursor leaves, the rings settle back to centre with a natural oscillation. When idle, they drift in a slow figure-8 pattern.
How I built it
Each ring is an independent spring. Every frame, the force is calculated as F = k × (target − position) − b × velocity, then applied to update velocity and position. Stiffness ranges from 0.14 (innermost) to 0.025 (outermost); damping from 0.72 to 0.82. The idle drift uses a Lissajous curve — sine and cosine at slightly different frequencies. The loop runs on requestAnimationFrame with no libraries.
Built with