Magnetic Cursor Effect

1. Add GSAP and the effect before the closing </body> tag:

In your downloadThe working code for this step, in index.html.

2. Add the magnetic attribute to an interactive element:

In your downloadThe working code for this step, in index.html.

The effect needs nothing from your markup beyond the data-magnetic attribute on an element that can move, and it reads every setting from the data attributes below. Everything else in the demo (the studio nav, the headline, the call disc, the scroll cue) is ordinary page content styled in assets/style.css and can be deleted or replaced.

What the effect does depend on:

• [data-magnetic] must be transformable. Inline elements cannot be translated, so give links display: inline-flex (or inline-block). The demo's [data-magnetic] { position: relative; will-change: transform; } rule is the only structural CSS.
• Resting positions are measured, not tracked. The field centre is the element's layout position at init, re-measured on resize, scroll and once web fonts have loaded. If you move an element by other means (a layout change, an opened panel) call window.magneticCursor.refresh().
• data-magnetic-inner selects one descendant for the second movement layer. It is a normal querySelector inside the element, so any class of your own works; the demo's .btn__label and .hero__disc-content are demo names, not contract.
• The effect writes --magnetic-energy (0 to 1) and toggles .is-magnetic-active on each element while the pointer is inside its field. Both are optional hooks: the demo brightens a hairline ring around the disc and the border on the buttons with them. Declare --magnetic-energy: 0 on the element so its CSS has a value before the pointer arrives.
• No custom cursor is drawn. The demo uses the system pointer; if you add a custom cursor it is independent of this effect.
• Coarse pointers get real buttons. On touch devices the proximity loop never starts and each element receives a short elastic tap response instead, so every magnetic element should be a native link or button that works without the movement.

In your downloadThe working code for this step, in style.css.

The effect writes --magnetic-energy from 0 to 1. Use it to drive rings, borders, shadows, or other visual responses. The demo's call disc sharpens a hairline ring with it:

In your downloadThe working code for this step, in style.css.

• The proximity effect runs only with a fine pointer.
• Keyboard focus mirrors activation with a directional lift and inner response.
• Coarse-pointer devices receive a short elastic tap response rather than a hover dependency.
• Reduced motion keeps every control static and fully usable.
• Use native links and buttons so activation never depends on the visual effect.

• GSAP 3.15.0+