光标跟随
Cursor Follower
一个圆点慢半拍地跟在指针后面，把系统鼠标指针换掉。
- 又叫：
- 跟随鼠标
- 指针跟随
- 鼠标尾巴
- custom cursor
- cursor follower
- mouse follower
- pointer follower
- 展厅
- 动效与节奏
- 形态
- 指针交互
- 播放
- 手动触发
- 关键词
- 需要 JS / 浏览器 API / 合成层动画 / 主线程每帧 / 只能指针操作
参数工作台
复制给 AI
随参数实时更新做一个光标跟随（cursor follower）：用一个 20px 的圆点代替鼠标指针，在容器上设 cursor: none 把系统光标藏掉，圆点用 requestAnimationFrame 平滑追向 pointermove 的位置，延迟约 90ms，mix-blend-mode: difference，pointer-events: none；指针移出容器就淡出。触屏和 prefers-reduced-motion 下关掉跟随，保留系统光标，并保证键盘焦点可见。
custom cursor follower, 20px dot, cursor: none on the container, pointermove + requestAnimationFrame smooth follow with 90ms lag, transform: translate3d, mix-blend-mode: difference, pointer-events: none, fade out on pointer leave, disabled on touch and under prefers-reduced-motion, keep focus-visible styles
https://publieople.github.io/design-museum/entry/cursor-follower/?stage=light
链接带着你调好的参数
什么时候用
- 作品集、品牌页这类要「有手感」的页面，想让指针变成设计的一部分
- 需要一个大一点的指针指示当前可交互区域（比如画布、画廊）
- 配合聚光、磁吸这类指针驱动的效果，做统一的指针语言
适用场景：页面 / 按钮 / 卡片
推荐取值
- 跟随延迟
- 60–150ms（越小越跟手，越大越飘）
- 圆点直径
- 12–32px
- 混合模式
- mix-blend-mode: difference（深浅背景都看得见）
- 跟随元素
- pointer-events: none; position: fixed
- 触屏与降级
- 粗指针设备直接关掉，保留系统光标
别搞混
和「磁吸按钮」的区别
磁吸按钮是按钮朝指针靠过来，指针本身不动；光标跟随是替代指针的位置，元素永远慢半拍追着指针跑。
容易混的去看「磁吸按钮」
和「光标拖尾」的区别
拖尾会在后面留一串残影（几十个点或一条流线）；跟随只有一到两个点，重点是「滞后感」而不是「痕迹」。
容易踩的坑
- 把系统光标藏了，就必须保证键盘用户还能看清焦点：:focus-visible 的样式不能省
- pointermove 里每帧 setState 会掉帧，用 requestAnimationFrame 或直接改元素的 transform
- 跟随元素要 pointer-events: none，否则它会挡住底下的点击
- 触屏没有指针，要在触屏或粗指针设备上直接关掉跟随
- 指针移出窗口时要归位或淡出，别让圆点卡在角落不动
无障碍降级
prefers-reduced-motion 下不要藏系统光标、也不要做跟随（跟随本身就是持续运动），直接保留默认指针。
关键词
- cursor follower
- custom cursor
- pointermove
- transform: translate3d
- requestAnimationFrame
- mix-blend-mode: difference
- pointer-events: none
- cursor: none