Interaction
自定义光标跟随器
自定义光标平滑跟随鼠标,并在交互元素上磁性吸附。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
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.
中文提示词
创建一个自定义光标跟随器。默认光标隐藏。一个小圆圈带轻微滞后(lerp)跟随鼠标。悬停在按钮或链接上时,光标放大并磁性吸附到元素中心。使用 React state 跟踪鼠标位置,requestAnimationFrame 实现平滑插值。使用 Tailwind CSS。光标保持微妙——深色背景上的白色轮廓。添加几个大文本链接和按钮作为演示目标。

Overview
为界面增添精致感和触觉反馈的自定义光标。常见于高端机构和作品集网站。
Features
- 隐藏默认光标
- 平滑滞后的圆圈跟随
- 悬停时磁性吸附
- 交互元素上放大状态
- React + requestAnimationFrame
- 微妙白色轮廓
Usage
适用于创意作品集、机构网站或沉浸式产品页。
Customization
修改 prompt 以:
- 使用混合模式(difference)增强对比
- 在主光标后添加拖尾点
- 在特定目标上光标内显示文本标签
- 触摸设备上禁用