代码渲染 MV 工程库（两支上游 + 一套自建实现）

本 Skill 不生成单页演示，而是一座**"整片视频渲染工程"参考库**：收录两支开源音乐视频工程，外加本库自建、已经导出成片的《CVE 编号破十万》数据纪录片实现。它们共用同一条底层原理, , 每一帧只是时间的函数（frame = renderFrame(t)），因此浏览器里的实时预览与离线导出的成片逐帧一致，可反复复现、可精确质检。要做同步视频时，从这里选最贴近的工程去 fork / 改编，而不是从零搭渲染管线。

你是什么

• 面向"整片、带音轨或口播、逐帧确定"的视频（MV / 歌词视频 / 数据纪录片 / 生成式视觉），不是分镜演示页。
• 提供的不只是参考工程，而是可执行的方法论 + 模板：镜头模型、转场库、运动语法、时间系统、导出与质检。
• 与 video-shot-demos / swiss-shot-demos 的边界：那两者是"一镜一 HTML"的演示片段；本 Skill 管的是从时间轴到成片的整条工程链（分析 → 时间线 → 镜头 → 预览 → 导出 → 质检）。

三支参考工程

	world-execute-me-lyric-mv	pdoom-video	本库自建：CVE 编号破十万
类型	歌词 MV（对话叙事）	生成式 MV（逐字卡拉 OK）	数据纪录片（口播字幕驱动）
画面技术	Canvas 2D + WebGL2	three.js + TypeScript	Canvas 2D，单文件 HTML
画面语言	聊天界面 / 三墨版画 / 代码	每片一个 GPU 场景	数据 / 界面 / 版画 三型交替
状态系统	颜色 = 状态（off/on/warm/error/ash/dead）	节拍吸附场景窗口	语义色：中性 / 里程碑 / 风险
同步依据	行级歌词时间 + cues 拍点	Demucs + CTC × Whisper 词级时间	口播字幕段 + 句内事件时间
导出	无头 Chrome 逐帧 → ffmpeg	无头 Chrome → WebSocket 帧 → ffmpeg	无头 Edge + captureStream → WebM → ffmpeg
亮点	成品级闪光安全、缩图表回归	块级自适应子帧运动模糊	单文件、零依赖、可直接改文案复用
许可	代码 MIT；剪影 CC BY-NC-SA；歌曲不在仓库	代码 MIT；歌曲不属 MIT	本库自建，可自由改写

动效框架（从原片抽取，已落到本库模板）

完整参数见 references/motion-system.md。核心是五层：

1. 镜头模型

{ id, at, lines, moment, layout, palette, enter, camera, render(ctx,t,f,u) }

• moment 一句话说清"这是哪一刻"，写不出来就是废镜头。
• 切点必须落在拍 / 半拍 / 小节线；口播视频落在句子边界或关键词上。
• render 是纯函数；camera 返回 {x,y,zoom,rot}。
• 镜头内部三拍：入场（0.25, 0.8s）→ 展开 → 由事件结束。

2. 十五种入场转场

cut / fade / glitch / scan / circle / diag / grid / zoom / shatter / dissolve / winclose / winpop / push / slices / flashcut

按语义选：scan = 打印/写入，grid = 参数/数据，winpop = 记录页/弹窗，glitch = 异常，zoom = 深入，circle = 聚焦，shatter = 推翻，flashcut = 大段落切换。支持 align: start|end|center 与 flash。一个视频最多用 4, 6 种。

Canvas 2D 版已实现：templates/transitions2d.js（15 种，零依赖）+ templates/transitions-demo.html（逐段预览）。

3. 镜头内运动六条