一个有趣的小网页：移动鼠标，画面里的人就会一直看着你。
- 把视频每一帧（156 帧）拼成一张
sprite.webp大图，并通过colorkey抠掉粉色背景 - 鼠标移动时，根据相对人物中心的角度查询手工标定的非线性表得到对应帧号（视频本身不是匀速旋转，纯线性映射会有偏差）
- 通过修改 CSS
background-position立即切换到那一帧 —— 0 IO 延迟、0 视频 seek 卡顿 - 当鼠标接近人物中心（半径 31% 内）时，淡入显示独立的高清
frame_front.webp（正面凝视），切换到 NEAR 模式 - 正上方 ±20° 是"死区"，锁定 frame 16 避免 0° 附近因抖动闪烁
| 文件 | 用途 | 大小 |
|---|---|---|
index.html |
网页主文件（HTML + CSS + JS 全在内） | 17 KB |
sprite.webp |
156 帧 (13×12) 的雪碧图，原始 720×720 分辨率 + 透明背景 | 6.9 MB |
frame_front.webp |
高清无损正面凝视图，NEAR 模式叠加显示 | 147 KB |
bg.png |
背景图（暖米黄手绘风） | 1.9 MB |
cursor.png |
自定义鼠标光标图 | 3.7 KB |
圆形360角度.mp4 |
原始视频（仅作素材参考，不会被网页使用） | 897 KB |
发布到 GitHub Pages 时不需要包含 圆形360角度.mp4。
# 1. 在当前目录初始化 git
git init -b main
git add index.html sprite.webp frame_front.webp bg.png cursor.png README.md .gitignore
git commit -m "init: big sister is watching you"
# 2. 在 GitHub 上新建一个空仓库（不要勾选 README），然后：
git remote add origin https://github.com/<你的用户名>/<仓库名>.git
git push -u origin main
# 3. 在仓库 Settings → Pages：
# Source: Deploy from a branch
# Branch: main / (root)，保存。
# 几十秒后访问 https://<你的用户名>.github.io/<仓库名>/- 鼠标移动：人物视线跟随
- 鼠标接近人物中心：淡入高清正面凝视图
- 触摸滑动：移动端可用
- ← / →：微调整体角度偏移（offset），用来抵消方向偏差
- Shift + ← / →：±5°
- C：显示 / 隐藏校准面板
- D：显示 / 隐藏调试浮层（也可
?debug=1） - 0：恢复默认 offset
- URL 参数
?offset=12可固定一个角度偏移分享出去
如果要换成另一段 360° 环视视频：
# 1. 用 ffmpeg 切 sprite（13×12=156 帧；视频帧数变化时调整 tile）
# 把 0xFC4A8A 替换成你视频背景的实际颜色（用任意取色工具）
ffmpeg -y -i 你的源视频.mp4 \
-vf "colorkey=color=0xFC4A8A:similarity=0.22:blend=0.10,format=yuva420p,tile=13x12" \
-c:v libwebp -quality 85 sprite.webp
# 2. 单独导出无损正面凝视图
ffmpeg -y -i 你的源视频.mp4 \
-vf "select=eq(n\,0),colorkey=color=0xFC4A8A:similarity=0.22:blend=0.10,format=yuva420p" \
-frames:v 1 -c:v libwebp -lossless 1 frame_front.webp
# 3. 修改 index.html 中的 ANGLE_KEYS 查找表（根据新视频里人物视线方向重标）ANGLE_KEYS 表的标定方法：把视频每隔几帧抽出来拼成网格图，用肉眼标记每帧的视线朝向角度（屏幕上方为 0°，顺时针递增），然后填到表里。
- 桌面：Chrome / Safari / Firefox / Edge 全兼容
- 移动：iOS Safari、Android Chrome 均可
- 不依赖任何第三方库，纯静态部署