Experiment 02 · Beginner

Magnetic Elements — elastic spring physics.

Buttons lean toward the pointer the closer it gets, then spring back to rest the moment you leave. Organic, elastic, alive.

Technique · Magnetic cursor (custom spring) Hint · Get closer Level · 02 / 10
Demo 02 · Magnetic Elements
Magnetic
Explore Pull me closer
View work I can feel you
Get in touch Elastic spring
Technique

Proximity-triggered, spring-damped attraction

Each button measures its own centre. When the pointer is within 240px, it applies a force proportional to distance squared; an underdamped spring integrator returns it smooth and elastic.

⌁

Strong spring

Stiffness k = 130 with light damping 9.5 creates that over-shoot "boing" as each button settles back to its post.

⇄

Counter-shifted label

The label and meta shift in the opposite direction to the button shell — a subtle stretch that makes the whole element feel like one mass.

Physics are frame-rate independent via dt-scaled integration.

Keep exploring

More motion experiments