FancyUI
Saved GitHub Get started
Button — magnetic pull — preview

Button — magnetic pull

FancyUI FANCYUI

The button leans toward the cursor before contact, then springs home.

#physical#playful#hover

Open docs

Use in FancyUI

Type
Interaction
Interaction
Hover
Style
Physical, Playful
Code availability
Open source

Why it works

Inside a radius, the button translates toward the pointer in proportion to distance, capped at a maximum travel, and a spring brings it home on leave. The click target comes to meet the cursor, so the press feels already accepted.

When to use it

One primary call to action per view, on pointer devices.

Things to watch

Off on touch (`hover: none`) and under reduced motion. While near, it listens to window `pointermove`, so keep it to a handful per page. A moving target is harder to hit for some motor abilities — keep the travel small.

Implementation clues

  • pointer distance → translate
  • radius gate
  • spring return
  • off under reduced motion