Magnetic CTA
The pull starts outside the button, so the action answers a pointer that is still on its way rather than one that has already arrived.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useRef } from "react";
import { motion, useMotionValue, useSpring, useReducedMotion } from "motion/react";
/**
* Vibary · Magnetic CTA
*
* The primary action leans toward an approaching pointer and springs
* level the moment it leaves. The pull begins outside the button, notAbout this pattern
A primary action that acknowledges intent a moment before contact. The listener sits on the window rather than the button, which is the whole design: by the time a hover event fires the invitation has already been accepted, and there is nothing left to invite. Within a capture radius the button leans along the vector to the pointer, strongest close in and worth nothing at the rim, so it eases into the lean instead of snapping into one as the pointer crosses a line. Three things keep it a button rather than a toy. The lean is capped in pixels instead of left proportional, because a control that can be dragged out of its own slot breaks the row it was aligned to. The spring sits at or above a 0.897 damping ratio and never overshoots, because a target that wobbles under the cursor is a target that moves while it is being clicked. And coarse pointers get none of it: there is no hover on a touch screen, only a finger already committed, and a button that jumps as that finger lands is worse than one that holds still. Under prefers-reduced-motion it stays exactly where the layout put it.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Sign-up flow
The submit action leans toward the pointer while it is still crossing the card.
- Product page
The buy action reaches for the pointer a moment before it arrives on the button.
Related patterns
- Delete Confirm MorphA delete control widens in place into a question with a way out, instead of opening a dialog.
- Form Submit ProgressSubmit narrows to a turning disc while the request runs, then opens out as the confirmed state.
- Card Tilt TrackThe sheen, not the rotation, is what makes it read as an object: a highlight slides across the plate as it turns, the way light does on anything glossy.