FIELD NOTES 02 / 02
目光，跟着你走。
文章右下角的水墨熊猫，只做一件小事：望向你正在看的地方。没有聊天框，也没有打断阅读的任务。
02 / 目光实验室 
在展台内移动鼠标；手机轻点不同方向。
它在看哪里？
试着绕它走一圈。它不是在切换八个视频，而是在一张连续的环形图集里，走向离目标最近的一帧。
目标 −135°当前帧 00 / 53
正在准备图集…
正式文章里它只有 144px，并在窄屏隐藏。这里把它请到展台上，让手机也能体验。
54 帧环形图集288 × 288 每格0.11s 平滑参数停止输入后按需停止绘制
FRAME BY FRAME
一圈目光，藏在一张图里。
下面是同一张线上图集里的八个采样帧。动作本身已经画好了，浏览器只需要决定现在取哪一格。
MAKING OF
让视频，成为输入的函数。
普通视频由时间决定画面，这只熊猫由指针的方向决定画面。先让 H3 生成一段目光绕一圈的连续动作，再抽帧、清理循环接缝、去除背景，打成透明 WebP 图集。
不要把角度直接四舍五入成八个方向，也不要用视频 currentTime 反复跳转。连续目标帧加上阻尼，能在快速移动与跨越 0° 接缝时保持连贯。
pointer → atan2(dy, dx) → target frame
target → shortest circular path → damping
rounded frame → canvas.drawImage()身份一致，镜头不动
身体与构图固定，只让头部和目光沿闭合路径转动。一次完整生成，比八个独立视频更容易保持脸与体型一致。
清理首尾，标定方向
剔除重复停顿，检查最后一帧接第一帧。线上第 0 帧对应左上方，起始角是 −135°，不是通用默认值。
走最近的那条路
从第 53 帧到第 0 帧应向前一步，而不是倒退 53 步。中心设置死区，避免鼠标停在鼻尖时快速乱转。
安静地陪伴阅读
限制设备像素比，目标收敛就停止 RAF。正式挂件不拦截正文点击，可以隐藏；减少动态效果时留下静态熊猫。
给另一个 agent 的实现提示
先用角度滑杆检查完整一圈，再接真实指针。用真实图集验证校准角；换角色后重新测量，不要沿用 −135°。本展台直接复用正式挂件的 renderer、animator 和 pointer vector。
angle = atan2(pointerY - centerY, pointerX - centerX)
frame = wrap(angle - startAngle, 2π) / (2π) * frameCount
delta = shortestCircularDelta(current, target, frameCount)源码入口：animator + renderer · pointer vector · manifest · BlogPetWidget