[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-11645":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":14,"stars30d":15,"stars90d":14,"forks30d":14,"starsTrendScore":14,"compositeScore":16,"rankGlobal":9,"rankLanguage":9,"license":9,"archived":17,"fork":17,"defaultBranch":18,"hasWiki":19,"hasPages":19,"topics":20,"createdAt":9,"pushedAt":9,"updatedAt":21,"readmeContent":22,"aiSummary":23,"trendingCount":14,"starSnapshotCount":14,"syncStatus":24,"lastSyncTime":25,"discoverSource":26},11645,"CuiMao","GordenSun\u002FCuiMao","GordenSun","眼睛跟着鼠标旋转。",null,"HTML",135,13,109,0,16,42.04,false,"main",true,[],"2026-06-11 04:04:15","# Big Sister is Watching You\n\n一个有趣的小网页：**移动鼠标，画面里的人就会一直看着你**。\n\n## 实现原理\n\n1. 把视频每一帧（156 帧）拼成一张 `sprite.webp` 大图，并通过 `colorkey` 抠掉粉色背景\n2. 鼠标移动时，根据相对人物中心的角度查询**手工标定的非线性表**得到对应帧号（视频本身不是匀速旋转，纯线性映射会有偏差）\n3. 通过修改 CSS `background-position` 立即切换到那一帧 —— 0 IO 延迟、0 视频 seek 卡顿\n4. 当鼠标接近人物中心（半径 31% 内）时，淡入显示独立的高清 `frame_front.webp`（正面凝视），切换到 NEAR 模式\n5. 正上方 ±20° 是\"死区\"，锁定 frame 16 避免 0° 附近因抖动闪烁\n\n## 文件结构\n\n| 文件 | 用途 | 大小 |\n| --- | --- | --- |\n| `index.html` | 网页主文件（HTML + CSS + JS 全在内） | 17 KB |\n| `sprite.webp` | 156 帧 (13×12) 的雪碧图，原始 720×720 分辨率 + 透明背景 | 6.9 MB |\n| `frame_front.webp` | 高清无损正面凝视图，NEAR 模式叠加显示 | 147 KB |\n| `bg.png` | 背景图（暖米黄手绘风） | 1.9 MB |\n| `cursor.png` | 自定义鼠标光标图 | 3.7 KB |\n| `圆形360角度.mp4` | 原始视频（仅作素材参考，不会被网页使用） | 897 KB |\n\n发布到 GitHub Pages 时**不需要**包含 `圆形360角度.mp4`。\n\n## 部署到 GitHub Pages\n\n```bash\n# 1. 在当前目录初始化 git\ngit init -b main\ngit add index.html sprite.webp frame_front.webp bg.png cursor.png README.md .gitignore\ngit commit -m \"init: big sister is watching you\"\n\n# 2. 在 GitHub 上新建一个空仓库（不要勾选 README），然后：\ngit remote add origin https:\u002F\u002Fgithub.com\u002F\u003C你的用户名>\u002F\u003C仓库名>.git\ngit push -u origin main\n\n# 3. 在仓库 Settings → Pages：\n#    Source: Deploy from a branch\n#    Branch: main \u002F (root)，保存。\n#    几十秒后访问 https:\u002F\u002F\u003C你的用户名>.github.io\u002F\u003C仓库名>\u002F\n```\n\n## 操作 \u002F 校准\n\n- **鼠标移动**：人物视线跟随\n- **鼠标接近人物中心**：淡入高清正面凝视图\n- **触摸滑动**：移动端可用\n- **← \u002F →**：微调整体角度偏移（offset），用来抵消方向偏差\n- **Shift + ← \u002F →**：±5°\n- **C**：显示 \u002F 隐藏校准面板\n- **D**：显示 \u002F 隐藏调试浮层（也可 `?debug=1`）\n- **0**：恢复默认 offset\n- URL 参数 `?offset=12` 可固定一个角度偏移分享出去\n\n## 替换素材\n\n如果要换成另一段 360° 环视视频：\n\n```bash\n# 1. 用 ffmpeg 切 sprite（13×12=156 帧；视频帧数变化时调整 tile）\n#    把 0xFC4A8A 替换成你视频背景的实际颜色（用任意取色工具）\nffmpeg -y -i 你的源视频.mp4 \\\n  -vf \"colorkey=color=0xFC4A8A:similarity=0.22:blend=0.10,format=yuva420p,tile=13x12\" \\\n  -c:v libwebp -quality 85 sprite.webp\n\n# 2. 单独导出无损正面凝视图\nffmpeg -y -i 你的源视频.mp4 \\\n  -vf \"select=eq(n\\,0),colorkey=color=0xFC4A8A:similarity=0.22:blend=0.10,format=yuva420p\" \\\n  -frames:v 1 -c:v libwebp -lossless 1 frame_front.webp\n\n# 3. 修改 index.html 中的 ANGLE_KEYS 查找表（根据新视频里人物视线方向重标）\n```\n\n`ANGLE_KEYS` 表的标定方法：把视频每隔几帧抽出来拼成网格图，用肉眼标记每帧的视线朝向角度（屏幕上方为 0°，顺时针递增），然后填到表里。\n\n## 适配\n\n- 桌面：Chrome \u002F Safari \u002F Firefox \u002F Edge 全兼容\n- 移动：iOS Safari、Android Chrome 均可\n- 不依赖任何第三方库，纯静态部署\n","这是一个有趣的网页项目，实现了画面中的人物眼睛能够跟随鼠标移动而旋转。其核心功能是通过将视频每一帧拼接成一张大图，并利用CSS背景位置切换来实现即时无延迟的动画效果。项目采用HTML、CSS和JavaScript编写，不依赖任何第三方库，支持桌面和移动端浏览器。特别适合用于增加网站互动性或作为创意展示。",2,"2026-06-11 03:32:13","CREATED_QUERY"]