Magnet
Magnetic hover that pulls any element toward the cursor. Attach any content to the mouse with adjustable in-frame and release transitions, plus tunable intensity.
Make it with Workshop
Build your own component with AI
A lightweight “magnet” effect that attracts your element toward the pointer on hover. Drop in your own content and get smooth attraction while hovering with a satisfying, configurable snap-back when the pointer leaves.
Features
Magnetic hover motion: Elements follow the cursor for delightful feedback
Content-agnostic: Use the Content slot to attach any component to the mouse
Two-phase transitions: Separate in-frame (while hovering) and end (on release) transitions
Adjustable intensity: Control how strongly the element moves toward the pointer
Properties (Controls)
Content: Component instance to be magnetized
Transition:
frame — transition used during hover (e.g., tween easing/duration)
end — transition used when hover ends (e.g., spring stiffness/damping/mass)
Intensity: Pull strength toward the cursor (0–2, decimals allowed)
