Cursor Trail/

彩色字符方块跟随鼠标 · 源自 githubuniverse.com 的 CursorTrailAnimation 组件

trailAnimationArea

把鼠标在这块区域里划动

每移动一个 20px 网格，就会点亮一个新方块：随机从 6 色里取一个颜色，随机从 11 个符号里取一个字符，30% 概率是空格。方块从 scale(0) 弹到 scale(1)，停留 100–400ms 后缩回去。

总共只有 10 个方块在轮转复用 —— 所以拖尾最长不会超过 10 段。这是原站的做法，不是每帧新建元素。

next-char/

参数（原站默认值已标注）

网格间距 grid 20px

方块池 pool 10

停留时长 life 100–400ms

方块尺寸 size 20px

宽松模式（文字上也能触发；原站会跳过纯文本元素）

调色盘 / 字符集

- / ) . + = > < * & (

颜色是每次点亮时随机取的，不是按顺序轮转 —— 原站源码里就是 colors[Math.floor(Math.random() * colors.length)]。

核心逻辑（原站解出）

// 网格吸附：只有当网格坐标变了才点亮，避免高频抖动
gx = grid * Math.floor(clientX / grid)
gy = grid * Math.floor(clientY / grid)

// 轮转复用 10 个方块
idx = (idx + 1) % pool
tiles[idx] = { x: gx, y: gy, active: true,
               color: colors[random], text: random() < .3 ? " " : chars[random] }

// 到点失活，CSS 负责缩回去
setTimeout(() => tiles[idx].active = false, 100 + 300 * Math.random())

位移用 transform: translate(x, y)，容器 position: fixed，所以直接吃视口坐标。