magnetic-hitbox-warplisted

# Magnetic Hitbox Warp A hover state that flips colour the instant the cursor crosses a pixel boundary feels like a switch. A control that *notices you coming* — starts to respond a couple of centimetres out, leans toward the cursor by a few pixels, and settles back with a small spring when you leave — feels like it has mass and wants to be pressed. The effect is tiny (never more than ~6px of travel, a 3% scale) and that's the point: it's felt more than seen. Used on a handful of primary controls it reads as craft; used on every link it reads as a gimmick and makes the page feel unstable. ## Anatomy Two elements with strictly separated jobs: - **The field** (`.magnetic`, a `span`) — an inline-flex host whose `::before` extends `--magnet-reach` (2rem) beyond the box on every side. It's what the pointer enters and what tracks position. It never moves. - **The target** (`.magnetic-target`, the real `<button>` or `<a>`) — the visible control. It's the only thing that translates and scales, driven by `--mx`/`--my` custom properties the script sets. ```html <span class="magnetic" data-magnetic="6"> <button class="btn magnetic-target" type="button">Book a call</button> </span> ``` `.magnetic-target` adds *only* the motion — transform, transition, the tracking state — and never sets colour, padding or radius, so it layers onto whatever button style the page already has (`.btn` from the boilerplate, `tactile-interaction-curves`' recipe). `.magnetic-pill` is an optional look fo