首页里的猫不会说话，也没有复杂的剧情。它只做一件事：当你移动指针、滚动页面或轻轻转动手机时，慢慢把目光转向你。
这个动作很小，却比持续播放的装饰动画更像一种回应。它让页面里的角色知道访问者在这里，同时又不会抢走标题和内容的注意力。
先确定角色之间的关系
猫咪并不是单独摆在页面上的贴纸。它和人物线稿共用一个视觉舞台：人物保持克制、安静，猫咪负责对输入做出反应。
人物使用高挑的竖向构图，线条很轻，右侧保留了大量透明空间。放进首页标题后，这些空白会成为猫咪活动的位置，而不是需要被填满的缺口。
角色动效最重要的不是“动得多”，而是每个动作都能解释它为什么发生。
如果人物和猫同时追随指针，画面会变得焦躁；如果它们都完全静止，又会失去首页最特别的互动感。最后的分工很简单：人物稳定构图，猫咪传递反馈。
转头不是把图片旋转一下
直接旋转一张正面猫咪图片，耳朵、鼻子和身体会像一张纸片一起倾斜。角度虽然变了，视线却没有真正改变。
更自然的方法是准备一组不同朝向的绘制帧：抬头、低头、向左、向右，以及它们之间的过渡状态。
这张图集把多个方向放在规则网格中。运行时不需要加载几十张独立图片，只需要改变背景位置，就能从图集中取出当前帧。这样既减少网络请求，也让相邻方向之间的切换更稳定。
指针位置会先被归一化，再映射到图集的行和列：
const column = Math.round(normalizedX * (columns - 1));
const row = Math.round(normalizedY * (rows - 1));
const frame = row * columns + column;真正显示的帧不会立刻跳到目标值，而是经过一点平滑过渡。快速移动指针时，猫咪会跟上；停下来时，它也能自然地稳定在附近的朝向。
透明图片也需要参与排版
猫咪原始素材是透明 PNG。透明背景让它可以叠在标题、人物和页面底色之间，但也带来两个容易忽略的问题：
- 图片文件的边界不等于角色身体的边界；
- 在桌面和手机上，同一个定位值会产生完全不同的视觉重心。
因此，页面没有简单地按图片宽高居中，而是围绕猫咪的眼睛和身体重心调整缩放、偏移与裁切。移动端空间更窄，角色会靠近标题内部；桌面端则保留更多呼吸感。
给“不想看动画”的人一个安静版本
互动不应该成为使用页面的前提。系统开启“减少动态效果”后，猫咪会停在稳定的静态状态，不再持续跟随输入。
这条规则也提醒我：动效不是页面内容之外额外添加的烟花。它应该具备明确目的、可以被关闭，并且在关闭后不影响信息理解。
最后留下的不是技术演示
方向图集、指针映射和缓动算法都是实现手段。访问者最终看到的，只是一只会注意到自己的猫。
这正是我希望首页保留的感觉：安静、有一点意外，也愿意回应屏幕另一边的人。