Magnetic Cursor

A magnetic cursor creates an invisible gravity field around primary buttons that pulls the users mouse pointer toward the center once it enters the field. The implementation tracks real time mouse position with a mousemove listener then calculates the vector from cursor to button center. It applies an eased translation to either a custom dot cursor or the button itself using requestAnimationFrame for buttery performance. Typical radius sits between 80 and 120 pixels with the pull strength falling off linearly inside that zone to avoid sudden jumps. This pattern first appeared in experimental dribbble shots around 2022 but only became production ready when Arc refined the easing curves in their 2024 browser release and Framer released their component library in 2025. By 2026 it forms a standard part of the attention systems that separate current interfaces from dated ones. The best versions feel like an extension of the users own intent instead of a gimmick layered on top. They preview the clickability of a button the same way a well designed hover state does but in motion.

It is not a full time custom cursor that hides the native pointer and draws an svg in its place for the entire viewport. That pattern destroyed usability on more portfolio sites than anyone wants to count and created accessibility nightmares for users who rely on precise cursor feedback or use screen readers. Magnetic cursors are also not spring based animations that bounce past the target and oscillate before settling. Those belong in 2023 motion reels not production code where they create nausea for some users and break the trust users have in your interface. The technique is not meant for every link hover target or decorative element on the page. Applying it broadly creates cursor whiplash and makes readers lose track of what they are actually pointing at leading to higher bounce rates. Finally it is not a performance free effect. Without proper throttling using requestAnimationFrame and passive listeners the constant position calculations can drop your frame rate on older machines tank core web vitals and ironically make your premium feeling site feel sluggish and unpolished.

Concrete implementations in 2026 show exactly how far this pattern has matured beyond the early experiments that felt more like toys. Arc shipped one of the first polished versions in their 2024 browser update. The download CTA on arc.net features a 110 pixel magnetic radius. Move your cursor anywhere inside that circle and the arrow accelerates 55 percent of the way toward the button center over 160 milliseconds using a custom cubic bezier that starts slow and ends sharp. The button receives a matching scale transform from 1 to 1.04 and a background shift from gray to the signature Arc blue while the text picks up a variable font weight increase. The whole sequence feels like the interface is reaching out to meet you halfway creating a moment of delight that previews the click and improves conversion. Framer turned this into a no code component by Q1 2026. Drop the MagneticButton wrapper around any CTA set the intensity from 0.2 to 1.0 define the activation radius and choose whether the cursor or the target moves or both. Their own marketing site uses it on the big Get Framer button with intensity set at 0.65 a 95 pixel radius and a combined scale effect. Stripe adopted the pattern on their 2026 enterprise sales CTA after months of internal tests. The Pay Now button pulls with a softer 40 percent strength because precision matters when money is involved and users need to feel in control. Their A/B test against the static control showed 13 percent more completions 8 percent higher perceived trust scores in post test surveys and a reduction in time spent on the page before clicking. The code example that ships with their design system uses a React hook called useMagnetic that returns x and y offsets based on normalized distance to center with a smooth lerp function set to 0.25 to avoid any jitter. Linear applied it more sparingly on their features page. The magnetic pull only activates on the main Upgrade button after the bento grid has finished its scroll linked entrance animations and the user has demonstrated intent by scrolling. This creates a beautiful progression of attention that matches the hierarchy of the page and feels earned rather than constant or annoying. Vercel went one step further in their AI SDK landing page by syncing the magnetic cursor pull with a variable font width axis on the word Deploy. As the cursor gets pulled in the letters stretch by 12 percent on the custom axis creating a compound micro interaction that feels deeply intentional instead of bolted on and ties directly into their brand identity system. Perplexity AI added magnetic cursors to their pro upgrade buttons in mid 2025 after noticing in heatmaps that users hovered but did not always convert on the static version. The 90 pixel radius version with 50 percent pull increased clicks by 14 percent in their A B test reduced time to conversion by three seconds on average and improved overall engagement metrics. Figma incorporated a subtle version in their 2026 community page for the Duplicate template buttons where the magnetic pull works in tandem with a live preview that appears in an adjacent panel. These examples share one trait. The magnetic force never fully takes over the cursor. It suggests direction. It never demands or traps the pointer in place which would violate accessibility standards.

The underlying code pattern deserves study. Calculate the center point of the target element using getBoundingClientRect. Subtract current mouse coordinates to get the delta x and delta y. Normalize that vector by dividing by the distance then multiply by a strength factor times a falloff based on how close the cursor is to the edge of the radius. Lerp the current offset toward that target offset at a rate of 0.15 to 0.35 per frame depending on desired snappiness. Apply the resulting x and y as transform translate on the cursor element or the target. This keeps the effect smooth at 60fps even on mid tier hardware. Teams that skip the lerp and snap directly to the position create jarring movement that feels broken and unprofessional. The best implementations also respect reduced motion preferences by disabling the pull entirely for users who specify prefers-reduced-motion in their browser settings. This attention to detail separates professional 2026 interfaces from amateur experiments that feel like they were built only to impress other designers.

Deploy magnetic cursors when your primary CTA sits above the fold on a marketing or product page and you need to reduce the hesitation gap between hover and click. They deliver the most value on conversion focused pages like pricing marketing checkout and final CTAs in onboarding flows where every extra click matters. Desktop traffic above 65 percent makes the investment worthwhile because the effect simply does not exist on touch devices and would be meaningless there. Test the radius and strength carefully with real users in unmoderated tests. Too small at under 60 pixels and the effect feels pointless and goes unnoticed. Too large at over 150 pixels and it fights user momentum creating frustration and the sense that the interface is controlling the cursor rather than assisting it. Always pair the visual pull with a rock solid focus state for keyboard navigation because the cursor effect does not help those users at all and could make the site feel inconsistent. The pattern also shines when combined with other 2026 micro interactions like contextual hover previews in adjacent cells or scroll linked reveals on metrics. The compound effect creates interfaces that feel alive and directive without overwhelming the content or adding unnecessary motion.

Skip magnetic cursors on content heavy sites documentation dashboards blogs or anything where the cursor should remain a precise selection tool that stays out of the way and does not draw attention to itself. Mobile traffic above 30 percent makes the entire pattern irrelevant so detect device type and disable it or serve a static fallback that does not rely on mouse position. Never apply the effect to secondary buttons inline links footer links or non interactive elements because that dilutes its power creates visual noise that competes with your real calls to action and trains users to ignore the effect. If your implementation uses heavy animation libraries like GSAP instead of vanilla javascript or a lightweight react hook then the performance cost outweighs any attention benefit and you should reconsider. Watch user testing sessions closely especially with first time users. If testers mention the cursor behaving strangely fighting them feeling sticky or like a toy then dial the strength back to 30 percent or remove it entirely and rely on scale transforms and color shifts instead. The 2026 rule remains simple. Every micro interaction either directs attention toward a decision or it is expensive decoration that dates your work faster than glassmorphism blobs or scrolljacked heroes ever could. Magnetic cursors walk that line with precision when tuned correctly or they become the next pattern to kill and add to the graveyard alongside three column feature rows.

Magnetic cursors turn passive pointers into active participants that guide users exactly where the design wants them to go without them noticing the help.