Magnetic Elements · Playground

◇ CARD-01

◇ CARD-02

◇ CARD-03

◇ CARD-04

◇ CARD-05

◇ CARD-06

CAUSTICS · @caustics/magnetic-elements

/playground

Magnetic Elements

Scene mixed

Preset punch

Physics lerp

Mode Origin Smoothing 0.150

Geometry

Radius 120px Max Displacement 16px Lock X axis (vertical motion only) Lock Y axis (horizontal motion only)

General

Strength 1.00 Return Duration natural decay Return Easing

Return duration of 0 (default) lets natural physics decay handle the return — preserves spring overshoot. Set >0 for a deterministic JS tween.

Group repulsion · independent

independent — each element acts alone. repulsion — inactive neighbours yield space when one is hovered (great for nav). coordinated — neighbours displace toward the active member's direction (the "surface tilts together" feel; reads best for sparse layouts with lerp/spring physics).

Nav Group Mode Grid Group Mode Repulsion Strength 0.60 Coordination Strength 0.50

Constraints

Velocity Ceiling (px/s) 3000 Velocity Recovery (ms) 100 Scroll Debounce (ms) 150 Disable on touch-primary devices Suppress during scroll

Accessibility

Reduced Motion

The package's runtime default is pause — recommended for production. The playground overrides to ignore so the demo always plays regardless of OS preference. Switch to pause to test how the engine respects accessibility settings.