Back to Motion Prompt examples
Landing page & web effects · #12
Magnetic button
The button is pulled toward a nearby cursor. As the cursor comes near, the button is drawn toward it and follows; when the cursor leaves, the button wobbles back to its place.
Hover & click interactionsmagneticmagnetic-buttonhovercursorelasticctainteraction
Full motion specification
How the movement works
Use it on the one button you most want clicked, such as sign-up or contact.
- 01A 168 × 52 button (orange, radius 26) in the centre. The pull range is a 110 px radius from the button's centre.
- 02Inside the range: target offset = (cursor − button centre) × 0.35; every frame (60 fps) the button covers 18% of the way to the target.
- 03On leaving the range it returns from its current offset to 0 over 1.1 s with elastic.out(1, 0.3): 2^(−10x)·sin((x − 0.075)·2π/0.3) + 1.
- 04The cursor enters from the left, circles the button and leaves to the right.
Prompt
Make the contact button a magnetic button: move 0.3× toward the cursor, and spring back when it leaves.