Interaction
Magnetic Button
A button that magnetically pulls toward the cursor within a small radius.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyadvanced
English Prompt
Create a single magnetic button. When the cursor enters a small radius around the button, the button should translate toward the cursor and scale up slightly. Use JavaScript to calculate the offset based on cursor position relative to the button center, and CSS transform for smooth movement. Use Tailwind CSS. Place on a dark background with a subtle border and a glowing hover state.
Chinese Prompt
创建一个磁性按钮。当光标进入按钮周围小半径时,按钮应向光标方向移动并轻微放大。使用 JavaScript 根据光标相对于按钮中心的位置计算偏移,CSS transform 实现平滑移动。使用 Tailwind CSS。放置在深色背景上,带微妙边框和发光悬停状态。

Overview
A button that feels alive and responsive to attention. Adds tactile delight to primary CTAs.
Features
- Cursor-attracted translation
- Subtle scale on proximity
- Smooth CSS transform
- Dark background
- Subtle border
- Glowing hover state
Usage
Use for primary CTAs on premium landing pages, portfolios, or product launches.
Customization
Modify the prompt to:
- Add magnetic pull to neighboring text
- Increase attraction radius
- Add a spring/lerp effect
- Use a circular vs pill shape