# Butterfly Wallpaper — 4K & Live

## 成品

- `Butterfly-Wallpaper-Ad-24fps.mp4`：1080×1920、9:16、24 fps 有声视频，按音轨重音对齐后导出。
- `index.html`：直接引用 `wallpaper-ad.svg` 的动画预览页，支持播放、暂停和拖动进度，并使用项目音轨同步播放。
- `preview.png`：主要场景预览。
- `wallpaper-ad.svg`：基于原 SVG 框架替换资源后的可编辑源文件。

## 素材

提供的 17 张图片按链接顺序保存为 `assets/static-01.jpg` 至 `static-17.jpg`，两段动态视频按链接顺序保存为 `assets/dynamic-01.mp4` 和 `dynamic-02.mp4`。`sources.json` 记录每个文件的来源。

壁纸和视频居中裁切填满 9:16 画布，保持原有比例。尾卡使用提供的应用 Logo，文案为两行：`Butterfly Wallpaper`、`4K & Live`。

`assets/click-hand.svg` 是黑色描边、白色填充的矢量点击手势，包含短线点击提示。主 SVG 在三处点击动画中复用该资源；第三次点击随第二段动态壁纸的入场提前。

打开 `index.html` 后点击播放即可同时预览 SVG 和配乐。页面通过 iframe 引用 SVG，并以音轨时间定位画面；不依赖导出的 MP4。也可以独立打开 `wallpaper-ad.svg` 自动播放无声动画。

`assets/reference-music.m4a` 为前面从参考视频中无损提取的配乐。先检测该音轨的瞬态重音，再将图片和场景切点量化到最近的 24 FPS 整数帧；动态壁纸自身的声音不混入成品。

## 音频重音与画面卡点

详细时间点、强度、原切点偏差和 24 FPS 帧号见 [audio-beats.md](audio-beats.md)。机器可读记录位于 `audio-beats.json`，波形及切点图为 `audio-beats.png`。

静态轮播使用 15 个实测峰值，素材顺序保持不变；三段内容分别在第 26、174、311 帧直接切入，尾卡在第 433 帧进入。入场取消 200–220 ms 淡入，避免画面落点滞后于重音。开头和段间静音保留列表及点击过场，不人为套统一 BPM。

## 重新导出

推荐使用通用 Python 工具导出 24 fps 视频（包含当前 SVG 的最新修改）：

```powershell
D:\live\svg2mp4\svg2mp4.cmd D:\live\butterfly-wallpaper-ad --overwrite
```

项目参数位于 `svg2mp4.json`。工具说明见 `../svg2mp4/README.md`。

`render-video.cjs` 使用 Chrome 逐帧渲染实际 SVG，包括内嵌 MP4，再用 FFmpeg 合成有声 MP4。输出为 1080×1920、30 fps，临时文件默认放在 `D:\codexWork\butterfly-wallpaper-export`。

需要 Node.js、Playwright、Chrome 和 FFmpeg。可通过环境变量设置 `PLAYWRIGHT_MODULE`、`CHROME_PATH`、`FFMPEG_PATH`、`EXPORT_TEMP`。在当前目录运行 `node render-video.cjs`。再次导出会先备份已有成品，完整解码校验通过后替换并删除备份。

独立打开 SVG 只预览画面；完整配乐已混入成品 MP4。`4K & Live` 是用户提供的尾卡文案，实际导出分辨率为 1080×1920。