# Code Mv Render

代码渲染 MV / 数据纪录片的确定性工程库, , 帧 = f(时间)，浏览器预览与离线导出逐帧一致。收录两支开源音乐视频参考工程（world.execute(me); 的...

- Repository: https://github.com/Unclecheng-li/AI_Animation (1689 stars)
- Category: Security
- License: MIT
- Last updated: 2026-10-26
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add Unclecheng-li/AI_Animation --skill code-mv-render -g -a claude-code -y`
Codex: `npx skills add Unclecheng-li/AI_Animation --skill code-mv-render -g -a codex -y`
Cursor: `npx skills add Unclecheng-li/AI_Animation --skill code-mv-render -g -a cursor -y`
Gemini CLI: `npx skills add Unclecheng-li/AI_Animation --skill code-mv-render -g -a gemini-cli -y`

## Description

代码渲染 MV / 数据纪录片的确定性工程库, , 帧 = f(时间)，浏览器预览与离线导出逐帧一致。收录两支开源音乐视频参考工程（world.execute(me); 的 Canvas2D 三画面 + pdoom 的 three.js 逐字卡拉 OK），以及本库自建并已导出的《CVE 编号破十万》90 秒数据纪录片实现：镜头模型、15 种入场转场、字体/遮罩动效、纸底三墨风格、口播字幕时间轴、无头浏览器录制与质检。只要用户提到：代码渲染 MV、歌词 MV、音乐视频生成、MV 渲染工程、world.execute(me)、pdoom、卡拉 OK 排版、数据纪录片、口播视频、新闻数据动画、把文案做成同步动画视频、确定性 Canvas 视频, , 就用本 Skill。与 video-shot-demos / swiss-shot-demos 互补：那些产出分镜演示页，本 Skill 面向整片可导出的视频工程。

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 代码渲染 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. 镜头模型

```js
{ 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. 镜头内运动六条

The rest: https://github.com/Unclecheng-li/AI_Animation/blob/HEAD/skills/code-mv-render/SKILL.md