Magnetic Pull

Featured

The button and its label track the cursor within a capture radius on separate spring constants, so the label lags the shell and creates depth.

#magnetic #cursor #spring

buttons / btn-magnetic

Playback

Parameters

Pull0.3

Complexity

Intermediate

Interaction

Cursor, Hover

Stack

Framer Motion

Related motions

Nebula Drift

Hero · Canvas / React

A slow field of luminous particles with parallax depth. The cursor carves a repulsion well, pushing nearby motes aside before they settle back on an ease-out curve.

Spotlight

Hero · CSS / Framer Motion

A headline sits in near-darkness. The pointer carries a soft light that reveals the type and a fine grid beneath it, with a slow ambient drift when idle.

Liquid Fill

Buttons · SVG / CSS

A gooey mass rises from the lower edge on hover, wobbles past level, and settles — the label crossfades to its inverted color as the fill passes.