WBL effects shelf · batch 3 (GSAP) · #10

Magnetic button grid

A grid of service buttons that lean toward the mouse, the closest one most, like iron filings near a magnet.

✓ OK to use Not on the never list (batch 1 has one magnetic button; this is a whole grid). Desktop only: buttons lean 8 px at most and never dodge a click. Phones see plain buttons (Replay shows a scripted sweep).

Best for: “What do you need?” pickers with 6-9 choices on desktop: trades, salons.
How: gsap.quickTo on x / y per button, pull = falloff by distance to the pointer; only for (hover:hover) and (pointer:fine).
Weight: 1.6 KB gzipped (our CSS + JS) + GSAP from jsDelivr: GSAP core 28.3 KB gzipped. Plugins: none (core only).