3.2 KiB
README 演示素材
2026-09-09 从当前应用重新采集，运行版本为 e0cb75ffcc1bf7d1fb5e2458b3c35fa0f6f336da。使用独立的 Chrome 浏览器上下文、GPU 硬件加速与默认「原始」画质，不读取日常浏览器的收藏和偏好。素材仅用于文档展示，不参与应用运行。
静态截图
全部截图为 1600 × 900 JPEG，质量参数 93。保留真实界面与模型，没有叠加宣传文字或替换背景。
| 文件 | 展示内容 |
|---|---|
archive.jpg |
新版循环阵列与档案导航 |
detail.jpg |
解密完成后的双环内构与档案概述 |
research.jpg |
研究记录页签 |
viewer-clear.jpg |
独立查看器，清晰玻璃 |
viewer-frosted.jpg |
相同视角下的磨砂玻璃 |
assembly.jpg |
六组结构拆解 |
search.jpg |
搜索「莱茵」后的档案索引 |
settings.jpg |
音效、音乐、减少动态效果与画质设置 |
boot.jpg |
白底开场中的 Logo 与身份接入 |
动图
通过 Chrome DevTools Protocol 录制运行页面，按捕获时间戳保留真实节奏，再用 FFmpeg 缩放、降帧和量化。GIF 使用 96 色调色板与 Bayer 抖动，无声音，不代表应用实时帧率。浏览器仅在合成帧变化时输出录制帧，静止画面依照原时间保持。
| 文件 | 内容 | 大约时长 | 尺寸 / 帧率 |
|---|---|---|---|
decryption.gif |
抽取、对角解密线、玻璃与正文同步揭示 | 7.9 秒 | 960 × 540 / 12 fps |
glass-motion.gif |
清晰 → 磨砂 → 清晰 | 4.2 秒 | 800 × 450 / 12 fps |
assembly-motion.gif |
拆解、旋转、视角复位与重组 | 8.0 秒 | 800 × 450 / 12 fps |
browse.gif |
连续选档、切列和文字滚动 | 6.8 秒 | 640 × 360 / 8 fps |
boot-motion.gif |
白底输入、Logo、权限扫描与欢迎转场 | 20.4 秒 | 800 × 450 / 12 fps |
README 直接展示解密动图，其余动图放在可展开区域。采集时间、源码版本与原始帧间隔记录见 capture.json；GIF 编码的帧时长取整可能使成片时长略有差异。
重新采集
采集脚本为 scripts/capture-readme.mjs。需要 Chrome、Playwright 与 FFmpeg；它们是文档制作工具，普通应用运行不需要安装。脚本会覆盖本目录同名素材，并将中间 JPEG 帧保存在被 Git 忽略的 .tools/readme-capture/。
先启动应用：
npm ci
npm run dev -- --port 5186
再从仓库根目录执行脚本。已能通过 Node 导入 Playwright、且 FFmpeg 在 PATH 中时：
node scripts/capture-readme.mjs
也可以指定现有工具的位置，例如 PowerShell：
$env:PLAYWRIGHT_MODULE = 'C:/tools/node_modules/playwright/index.mjs'
$env:FFMPEG = 'C:/tools/ffmpeg.exe'
$env:CAPTURE_URL = 'http://127.0.0.1:5186'
node scripts/capture-readme.mjs
其中工具路径需要替换为本机的实际位置。Windows 录制显式使用 D3D11；其他平台使用 Chrome 可用的 GPU 后端。录制后应查看截图、GIF 的起止帧及中间过渡，确认资源加载完整、没有遮挡或异常，检查 README 图片链接，并更新此处的版本与时长。