큰언니가 널 지켜보고 있어

一个有趣的小网页：移动鼠标，画面里的人就会一直看着你。

实现原理

1. 把视频每一帧(156 帧)拼成一张 'sprite.webp' 대图,并通过 'colorkey' 抠掉粉색배경
2. 鼠标移动时，根据相对人物中心的角度查询手工标定的非线性表得到对应帧号（视频本身不是匀速旋转，纯线性映射会有偏差）
3. 通过修改 CSS 'background-position' 立即切换到那一帧 —— 0 IO 延迟, 0 视频 seek 卡顿
4. 当鼠标접근人物中心(半径 31% 内)时,淡入显示独立的高清 'frame_front.webp'(正面凝视),切换到 NEAR 模式
5. 正上方 ±20° 是"死区",锁定 frame 16 避免 0° 附近因抖动闪烁

文件结构

文件	用途	大小
'index.html'	웹주문서(HTML + CSS + JS 全在内)	17 KB
'sprite.webp'	156 帧 (13×12) 的雪碧图，原始 720×720 分辨率 + 透明背景	6.9 MB
'frame_front.웹'	高清无损正面凝视图,NEAR 模式叠加显示	147 KB
'bg.png'	背景图（暖米黄手绘风）	1.9 MB
'cursor.png'	自定义鼠标光标图	3.7 KB
'圆形360각도.mp4'	原始视频（仅作素材参考，不会被网页使用）	897 KB

发布到 GitHub Pages 时不需要包含 '圆形360角度.mp4'.

部署到 GitHub Pages

操作 / 校准

• 鼠标移动：人物视线跟随
• 鼠标接近人物中心：淡入高清正面凝视图
• 触摸滑动：移动端可用
• ← / →:微调整体角度偏移(offset),用来抵消방향偏差
• 시프트 + ← / →:±5°
• C:显示 / 隐藏校准面板
• D:显示 / 隐藏调试浮层(也可 '?debug=1')
• 0:恢复默认 offset
• URL 参数 '?offset=12' 可固定一个角度偏移分享出去

替换素材

如果要换成另一段 360° 环视视频：

'ANGLE_KEYS' 표의 标定방법:把视频每隔几帧抽出来拼成网格图,用肉眼标记每帧的视线朝向角度(屏幕上方为 0°,顺时针递增),然后填到表里。

适配

• 桌面:Chrome / Safari / Firefox / Edge 全兼容
• 移动:iOS Safari, Android Chrome 均可
• 不依赖任何第三方库，纯静态部署

---

🌐 본 텍스트는 빠른 이해를 돕기 위한 요약 번역본입니다. 정확한 기술 정보 및 전체 코드는 GitHub 원문에서 확인하실 수 있습니다.