Magnetic Cursor Attraction Button
A magnetic button calculates cursor proximity relative to the center of the bounding box. When the cursor enters a proximity threshold (e.g., 60px), the component pulls toward the pointer with damped spring force, releasing back to origin on mouse exit.
Move the cursor near the button, then click it.
Technical Specifications
Interaction Phases
The scene keeps one Idle state. These phases are driven by its inputs and pointer events; the same values appear in the code below.
Use the scene
import { ExodeUICanvas } from 'exodeui';
// magnetic-button.bexode goes in /public
export function MagneticButton() {
return (
<ExodeUICanvas
src="/animations/javascript-magnetic-button.bexode"
fit="Layout"
autoPlay
interactive
inputs={{
label: 'Claim reward',
strength: 0.35,
accent: '#111827',
accent2: '#f59e0b',
bg: '#f5f5f4',
}}
onTrigger={(name) => {
// fires: 'click'
}}
style={{ width: '100%', height: 440 }}
/>
);
}This snippet loads /animations/javascript-magnetic-button.bexode with the same inputs shown in the live stage.
Architectural Breakdown
Magnetic attraction guides user attention toward primary calls to action by physically responding to cursor approach.
ExodeUI computes distance delta vectors (dx, dy) and multiplies them by a pull factor (0.25 - 0.4) so the movement is subtle rather than jarring.
On pointer leave, the spring controller automatically returns the button to center coordinates with a natural oscillation.
Frequently Asked Questions
Explore Related Motion Guides & Tooling
Build your next living interface today.
Design fluid physics and visual logic in ExodeUI and export directly to React, Swift, and Flutter.