Game feel starts with the menu. This magnetic button effect — built in 40 lines of vanilla JavaScript with a single lerp formula — adds the satisfying pull-and-spring response that makes game menus feel alive. Use it on Start, Play, or Attack buttons to give your HTML5 game UI instant personality. No libraries. Works on every pointer device.
A button that detects cursor proximity, computes an attraction offset, and smoothly interpolates its position toward the cursor each frame. Remove the cursor and the button springs back to center via the same lerp formula.
Magnetic button
How the JavaScript magnetic button effect works
On each mousemove event, compute the vector from the cursor to the button center: dx = pointer.x - center.x, dy = pointer.y - center.y. Calculate distance with Math.hypot(dx, dy). If the cursor is within the activation radius, compute a pull factor that peaks at 1.0 when the cursor is on-center and fades to 0 at the radius edge. Multiply dx * pull * strength to get the target offset for the button.
Apply linear interpolation (lerp) every animation frame: currentX += (targetX - currentX) * 0.15. This creates the inertia—the button chases but never instantly reaches its target, which makes the motion feel organic. When the cursor leaves the proximity zone, the target snaps back to (0, 0) and the button eases to rest.
const dx = pointer.x - center.x;
const dy = pointer.y - center.y;
const distance = Math.hypot(dx, dy);
const pull = Math.max(0, 1 - distance / radius);
buttonX = center.x + dx * pull * 0.35;
buttonY = center.y + dy * pull * 0.35;The pull factor is the whole trick: 1.0 at center, 0.0 at the radius edge. Multiply it by a strength below 1.0 so the button never fully reaches the cursor—that gap is what makes it feel magnetic rather than sticky.
Why this interaction feels great in game menus
The "game feel" in a menu comes from physics-based response. A button that snaps instantly feels mechanical and cheap. A button that follows the cursor with a slight lag but springs back to center feels like it has mass and personality. The lerp factor (0.08–0.2) controls the spring: slow lerp = heavy button, fast lerp = light, snappy button. For a heavy warrior class button, use 0.06. For a fast rogue class button, use 0.2. Same formula, different personality.
Agencies like STRV, Locomotive, and Resn use this pattern on call-to-action buttons because it rewards cursor exploration. In a game, it rewards players for exploring the menu. The code is 40 lines including the lerp and the radius guard — drop it into your game's title screen tonight.
Apply will-change: transform to the magnetic element so the browser pre-promotes it to its own compositing layer. Skip the lerp and apply the transform synchronously inside the mousemove handler if you want zero-lag snap instead of eased follow. Cancel the animation frame loop when the cursor leaves the proximity zone to avoid unnecessary work.
Ways to extend this pattern
Apply the same proximity-and-lerp formula to multiple elements simultaneously—a group of nav links that each deflect slightly as the cursor passes through creates an immersive navigation experience. Add a subtle rotateX/rotateY tilt based on the cursor offset relative to the button center for a 3D card-tilt variant. Or drive the magnetic pull strength from a scroll progress value so the button gets stronger as the user scrolls toward it.
Frequently asked questions
Does the magnetic button effect work on touchscreens?
Yes, using touchmove. Set touch-action: none on the element to prevent scroll interference, and read position from event.touches[0].clientX/Y. The lerp factor makes it feel natural on touch since the element follows the finger with a slight delay rather than teleporting.
How do I tune the feel of the magnetic effect?
Three numbers control everything: radius (how close the cursor must be to activate), strength (how far the button travels toward the cursor, typically 0.25–0.45), and the lerp factor (0.08 for sluggish, 0.25 for snappy). Start with strength 0.35 and a radius equal to the button's diagonal length.
Related experiments
- JavaScript Particle Cursor Effect with Canvas
- Three.js Particle Cursor Effect
- JavaScript Neon Mouse Trail Animation
Part of a weekly series on visual JavaScript, modern CSS, browser graphics, and HTML5 games—one live experiment per post, production-ready code snippets, and the reasoning behind each technique.
No hay comentarios:
Publicar un comentario