Interaction
Custom Cursor Follower
A custom cursor that smoothly follows the mouse with a magnetic snap on interactive elements.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyadvanced
English Prompt
Create a custom cursor follower. The default cursor should be hidden. A small circle follows the mouse with slight lag (lerp). When hovering over buttons or links, the cursor expands and snaps magnetically toward the element center. Use React state to track mouse position and requestAnimationFrame for smooth interpolation. Use Tailwind CSS. Keep the cursor subtle—white outline on dark background. Add a few large text links and buttons as demo targets.
Chinese Prompt
创建一个自定义光标跟随器。默认光标隐藏。一个小圆圈带轻微滞后(lerp)跟随鼠标。悬停在按钮或链接上时,光标放大并磁性吸附到元素中心。使用 React state 跟踪鼠标位置,requestAnimationFrame 实现平滑插值。使用 Tailwind CSS。光标保持微妙——深色背景上的白色轮廓。添加几个大文本链接和按钮作为演示目标。

Overview
A custom cursor that adds a layer of polish and tactile feedback. Common on high-end agency and portfolio sites.
Features
- Hidden default cursor
- Smooth laggy circle follower
- Magnetic snap on hover
- Expand state over interactive elements
- React + requestAnimationFrame
- Subtle white outline
Usage
Use on creative portfolios, agency sites, or immersive product pages.
Customization
Modify the prompt to:
- Blend modes (difference) for contrast
- Add a trailing dot behind the main cursor
- Show text labels inside the cursor on specific targets
- Disable on touch devices