INTERACTION
自定义光标Custom Cursor
小圆点 + 缓迟圆环的双层光标，悬停可点元素时圆环放大——仪式感拉满。
效果预览
双层光标：点即时跟随 · 环缓迟拖尾
把鼠标移进来试试
适合用在哪
创意机构、作品集、高端品牌站；实用工具站慎用。
容易踩的坑
- 用 left/top 移动光标元素会每帧触发布局，帧率掉到 30 以下明显拖影。
- 光标层忘了 pointer-events:none，会挡住点击，导致按钮全部失灵。
- 缓迟系数低于 0.1，圆环落后鼠标太多，用户难以判断实际点击位置。
设计提示词 · Prompt
自定义光标（Custom Cursor）：两层结构——内层小圆点（8-10px 实心，完全跟随）+ 外层圆环（30-40px 描边，用 lerp 插值 0.15-0.25 的缓迟系数跟随，产生"拖尾感"）。悬停可点元素时圆环放大 1.5 倍并变色，悬停文本时变为竖线。系统光标 cursor:none 隐藏，body 上监听 mousemove 用 transform 移动（绝不改 left/top）。红线：只在 pointer:fine 设备启用；必须保留系统光标兜底（JR 失败时）；表单输入区恢复文本光标；prefers-reduced-motion 时禁用。
Custom Cursor: Two-layer structure — an inner small dot (8-10px solid, follows exactly) + an outer ring (30-40px stroke, follows with lerp interpolation at a 0.15-0.25 lag factor, creating a "trailing" feel). When hovering clickable elements the ring scales up 1.5× and changes color; over text it becomes a vertical bar. Hide the system cursor with cursor:none, listen to mousemove on body and move with transform (never change left/top). Red lines: enable only on pointer:fine devices; always keep the system cursor as a fallback (when JS fails); restore the text cursor in form inputs; disable under prefers-reduced-motion.
常见搭配
同一页面里经常和「自定义光标」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s s--abs d-cursorstage"> <div class="d-cursor__ring"></div> <div class="d-cursor__dot"></div> <b>双层光标：点即时跟随 · 环缓迟拖尾</b> <span>把鼠标移进来试试</span> </div>