NinA AI Agency
NL
All elements

Freebies · UI library

Magnetic button

A button that pulls towards the cursor; the label moves slightly less.

HoverFree
Works inClaude CodeChatGPT CodexGemini CLIGitHub CopilotCursorLovablev0

Prompt plus working code in one go. Paste it into Claude Code, Codex, Gemini, Copilot or Cursor.

Build an interactive UI element: Magnetic button.

What it is: A button that pulls towards the cursor; the label moves slightly less.

Behaviour:
- Button that pulls towards the cursor within an area around it (35% of the distance to the centre).
- The label moves slightly less than the button, for a layered effect.
- Mouse leaves: smoothly back to the centre (transition of about 200 ms).
- No movement with prefers-reduced-motion.

Requirements:
- Work in this project's stack. If it is React with Tailwind CSS, make a single component without extra packages; otherwise plain HTML, CSS and JavaScript.
- Fully operable with keyboard and touch, with the right aria attributes.
- Respect prefers-reduced-motion: less or no movement.
- Use the colours, fonts and border radii of my project.
- At the end, show me where the component lives and how to use it.

Keep playing