Add interactive cat-follow-cursor demo (single HTML file)

[lobokiol]

概述

新增一个完全自包含的单文件 HTML 演示 cat-follow.html：一只分层 SVG 小猫，头会轻微跟随鼠标倾斜，眼珠也会盯着光标看，并带有平滑过渡和眨眼动画。

实现要点

• 分层结构（SVG <g> 分组）：
  • cat-body 身体 + 尾巴 + 前爪（不动）
  • cat-head 头部（围绕“脖子”做轻微旋转）
  • .sclera 眼白 / 虹膜（不动）
  • .pupil + .glint 瞳孔与高光（在椭圆范围内平移）
• 跟随算法：用 Math.atan2(dy, dx) 算出鼠标相对猫脸中心的角度，再按距离归一化映射成：
  • 头部 rotate 角度（限制 ±8°）
  • 瞳孔 translate(x,y) 偏移（椭圆范围 ±9px / ±7px）
• 平滑过渡：CSS transition + cubic-bezier 缓动，避免抖动。
• 眨眼：CSS @keyframes blink 周期性眨眼 + Web Animations API 随机补眨 + 空格键手动触发。
• 全屏友好：渐变背景、地面光晕、自适应字号、vmin 缩放，移动端触摸也能跟随。
• 可读性：顶部有架构注释，每段代码有详细中文注释；切换为真实照片时只需把 cat-body / cat-head 内的形状替换为 <image>，并把眼白/瞳孔的 cx,cy 调到照片对应位置即可。

替换为真实猫咪照片的方法

后续上传真实高清猫咪照片后，按下面步骤即可替换：

1. 把 <g id="cat-body"> 内部的形状替换为整张照片：

   <image href="cat.jpg" x="0" y="0" width="600" height="720" preserveAspectRatio="xMidYMid slice"/>

2. 把 <g id="cat-head"> 内部的“头部形状”替换为去背景后的头部 PNG（以便整头一起倾斜）。
3. 调整两只眼睛 <ellipse class="sclera"> 与 <ellipse class="pupil"> 的 cx / cy 到照片中眼睛的实际位置。
4. 如有需要，调整脚本顶部 MAX_HEAD_TILT / MAX_PUPIL_OFFSET_* 常量微调跟随幅度。

试用

直接在浏览器中打开 cat-follow.html 即可，无需任何依赖或构建步骤。