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