Feedback & Interaction · What a tap feels like
Magnetic snap磁吸吸附
- pull to press
- gravitational
- springs back
As the pointer nears the button, the button itself leans toward it as if pulled. Move away and it springs back past its resting place before settling.
When to use it
Use it on the single most important action — checkout, start, send. Two or more on one screen kills the effect, and magnetism makes precise clicking slightly harder, so avoid it on small icon buttons.
Parameters
radius 90px · translate = offset × 0.28 · back 400ms cubic-bezier(.34,1.56,.64,1) · inner label × −0.12
Recipe
Magnetic snap → 400ms cubic-bezier(.34,1.56,.64,1)Magnetic snap → radius 90px · translate = offset × 0.28 · back 400ms cubic-bezier(.34,1.56,.64,1) · inner label × −0.12
One sentence for your AI
Make this primary button magnetic: while the pointer is within a 90px radius of the button centre, read its offset from the centre and write offset × 0.28 as the button's translate (pulling harder the closer it gets), with the inner label counter-translating by 0.12 for parallax. On leave, spring back to rest over 400ms cubic-bezier(.34,1.56,.64,1) with a little overshoot.