name	kiro-motion-studio
description	KIRO 风格炫酷视觉视频工作流：片头、个人展示片、热点视频、歌词MV、3D铬金属Logo片、说唱/演出VJ循环，含卡点剪辑、封面和抖音文案。

KIRO Motion Studio：代码生成 AE 级炫酷视频

这个 skill 来自 KIRO 的一整套作品：KIRO 片头 v2/v3、KIRO 个人展示片、Kimi 热点视频、《全息恋人》MV、KIRO 3D 部落铬 Logo、Kjstar 宇宙 VJ、BAIFU 阳光拼贴 VJ。目标是做出“看起来像高质量 AE 做的”炫酷视频。

做法是：画面每一帧都用代码渲染（Node canvas 或 three.js），按音乐节拍精准剪辑，最后用 ffmpeg 合成。

覆盖的片型：

个人 Logo 片头 / 名字视觉符号（如 KIRO 片头）
个人展示片：我是谁 → 用什么工具 → 做出了什么 → 关注能看到什么
蹭热点的资讯类炫酷视频（先查资料再做）
歌词 MV：逐句对齐人声、字幕动画、歌词互动
3D 铬金属 Logo 片：部落/刀锋字体、镜面反射
说唱歌手 / 演出用 VJ 循环视频：宇宙遨游、阳光拼贴等主题
配套：多比例封面（3:4、4:3、5:2）、抖音和小红书文案

回复用户一律用中文。

1. 开工前确认

只问一次，用 AskUserQuestion。能从上下文推断的就不问。

画幅：16:9 横屏、9:16 竖屏或其他。用户强调过“16:9 不要搞错”，交付前必须用 ffprobe 核对 1920×1080。
时长：多少秒；VJ 是否要首尾无缝循环。
音乐：三种情况。
- 用户给的音频。
- 视频里的歌。
- 不要音乐：纯画面按固定 BPM 卡点，默认 120 BPM。
- 音乐不够长时，按小节重排拓展。
名字 / 水印：例如 KIRO、Kjstar、BAIFU。名字要做成视觉符号，不能只是打字。
配色禁忌：例如“不要粉色”，或“可以有一点粉但不要全粉”。用户说过的禁忌要一直记住。
参考资料：
- 小红书、抖音链接通常抓不到（robots 屏蔽），直接请用户发截图或录屏。
- 用户说“只做参考”时，学手法和感觉，不照抄画面。

热点类视频：先查清事实再动手。

用 WebSearch / WebFetch 查资料；用户给了 URL 就逐个读。
把关键信息、数字、卖点提炼成画面文案。

2. 审美原则：“帅”的标准

用户反复强调：视觉必须拿死，转场和踩点要最帅，要像高质量 AE 做的。

“炫酷”不是把画面铺满，而是每个场景多层次、多动态、技术感强。

2.1 每个镜头至少 4 层

背景层：渐变、噪声星云、天空或粒子场，慢速运动。
主体层：Logo、3D 物体、大字、人物剪影。
装饰动态层：HUD 线框、轨道环、扫描线、手绘涂鸦、粒子、光束、星星闪烁。
前景层：飘过镜头的花瓣、光斑、散景或光速线条，制造景深。
后期层：只让高光发光的 bloom、色差、颗粒、暗角，偶尔加故障。

2.2 卡点与剪辑

先分析节拍，再设计镜头。
- 镜头长度取整数个小节。
- 切点落在小节线或强拍上。
快切段：每拍一个画面，连续 4～8 拍。一般放在副歌前或高潮。
鼓点触发的效果：
- 闪白
- 色差尖峰
- 径向缩放模糊
- 故障切片
- Logo 缩放弹跳（用指数衰减脉冲）
轻重分配：军鼓和强拍用强效果，弱拍只做轻微脉冲，不要每拍都炸。
定格动画对比：
- 拼贴、贴纸、手绘元素按 12fps 抖动（“boil”）。
- 主体和摄像机保持 60fps 丝滑。
- 两种节奏放在一起会很高级。

2.3 转场库

挑着用，不要反复用同一种。

穿越画框 / 窗口推进：缩放加径向模糊，闪白落在下一拍。
曲速跃迁：星线拉长。
像素拖影：横向拉丝，或竖向滴落。
方块拼贴洗牌，最后拼成 Logo。
横条错位：画面切成几条，分别滑入，再对齐成一整幅。
纸条撕开飞走，露出下一场景。
长曝光残影：多个半透明分身。
星座连线变成实体 Logo。
物体被吸成光环绕着 Logo 旋转，再炸开。
画面压成细线消失。

2.4 色彩与质感

冷暖反差是记忆点。例如阳光童话的主调里，在小节点上闪 0.25 秒克莱因蓝的故障拖影。
高光：只让真正亮的部分发光（阈值 bloom），不要整片发白。
后期参数：
- 色差：平时 1～1.5px，鼓点上冲到 6～10px。
- 颗粒约 0.05。
- 暗角约 0.35。
铬金属字要反射有内容的环境：天空、云、地平线、亮地面。纯黑环境会让铬字变脏变暗。加 iridescence 可以做出珍珠虹彩。
用户说不要粉时：换成银白（#e4eaff）、冷紫或星光金。

2.5 字体

名字 Logo，两条路线：

自制刀锋 / 部落字：
- 笔画是锥形的：中心线用三次贝塞尔，宽度按 s^a(1-s)^b 变化。
- 加 0.28 的斜切。
- 再配四芒星装饰。
现成展示字体挤出成 3D：例如 Shrikhand（复古胖斜体）。挤出时加大倒角，会显得圆润饱满。

辅助字体：

Space Mono：HUD、等宽信息
Unbounded / Space Grotesk：标题
Rock Salt：手写涂鸦字
Noto Sans CJK SC：中文

字体来源：网络通常只放行 npm，所以从 @fontsource/<name> 安装，取 files/*-latin-400-normal.woff。

中文字形：Space Mono 等西文字体没有中文。所有中文文字，包括解码乱码动画里的字，都要换成 CJK 字体。

2.6 HUD / 信息层（科技感）

角落小字，例如“NAME / LIVE VISUAL // THEME”、“BPM // BAR xx.x”，或小节计数。
样式：18px，白色，透明度 60～75%。
阳光童话类的片子，HUD 要克制。

2.7 KIRO 品牌习惯

水印：KIRO 的作品要带 KIRO 视觉水印或签名式 Logo。
展示片的整体气质：这个人很会玩 AI，而且真的在产出。不要做成工具说明书，也不要只卖短剧。
爆款经验：KIRO v3 在抖音反响很好，参考点是每个场景多层动态加技术感。

3. 技术流水线

素材全部程序生成。 环境里通常没有 AE，也拿不到网上的图片和视频，所以星空、云、草地、花、羊、星球、玻璃珠、彩虹、热气球、蝴蝶、纸张纹理、手绘涂鸦，都用 seeded 随机加噪声画出来。

生成后加白边和投影做成“贴纸”，就有拼贴画质感。
用户提供了照片时，优先用真实照片做拼贴。

3.1 路线 A：2D Node canvas

适合文字、HUD、粒子、MV 字幕，速度快。

用 @napi-rs/canvas 逐帧绘制，原始 RGBA 通过管道送进 ffmpeg：

ffmpeg -f rawvideo -pix_fmt rgba -s 1920x1080 -r 60 -i - -c:v libx264 -crf 16 -pix_fmt yuv420p out.mp4

运动模糊：在快门时间内渲染 N 个子帧，再求平均。
后期：在 2D 里做色差（按通道错位绘制）、颗粒、暗角。
注册字体：GlobalFonts.register(buffer, name)。

3.2 路线 B：three.js 跑在无头 Chromium 里

适合 3D 铬字、宇宙场景、复杂后期。

打包与驱动

scene.js 用 esbuild 打包成 IIFE：
```
esbuild scene.js --bundle --format=iife --loader:.woff=binary --outfile=bundle.js
```
这样字体会直接嵌进 bundle，避免 file:// 读取被拦截。
用 playwright-core 启动预装的 Chromium。
- 先 ls /opt/pw-browsers 找到路径，形如 .../chrome-linux64/chrome。
- 启动参数：--use-gl=angle --use-angle=swiftshader --enable-unsafe-swiftshader --ignore-gpu-blocklist。
页面暴露两个接口：window.ready 和 window.renderFrame(t)。
驱动脚本的流程：
1. 调用 renderFrame(t)。
2. 对 #out canvas 截图，JPEG 质量 96。
3. 用 -f image2pipe -c:v mjpeg 送进 ffmpeg。
素材构建可能要 1～2 分钟：
- page.goto 用 {waitUntil:'commit'}。
- waitForFunction 放宽超时到 900000，每 1000ms 轮询一次。

3D 铬字

用 opentype.parse 读字体，font.getPath(text,0,0,200) 得到路径。
把路径转成 THREE.ShapePath，y 取负。
调用 toShapes()。isCCW 参数要实测：检查 shape 数和 hole 数是否等于字母数和字母里的洞数，否则会丢字母。
用 ExtrudeGeometry 挤出，开启 bevel。
材质用 MeshPhysicalMaterial：metalness 1，roughness 0.1，clearcoat 1，可选 iridescence。
环境贴图：画一张 equirect canvas，用 PMREMGenerator 处理。
色调映射用 ACES，曝光 1.1～1.3。

自制 Logo

用笔画多边形做 ExtrudeGeometry，加星形装饰。
镜面高光处放 glint 精灵。

场景元素

星空：Points 加自定义 shader。
螺旋星系：7 万个粒子。
黑洞：黑球 + 吸积盘粒子 + 始终朝向镜头的透镜环。
带环行星：shader 球加环。
星座：点按多边形顺序连线，最后补一段闭合线。
星云：噪声云精灵。

后期

Bloom：UnrealBloomPass，或手写 8-tap 高光模糊。
自定义 ShaderPass 统一处理：色差、径向 zoom blur（14 taps）、闪白、颗粒、暗角。
也可以把 2D 合成画布作为纹理上传，最后统一过一遍后期 shader。

2D 与 3D 混合

开多个 WebGLRenderer：
- 一个渲染 Logo，alpha 透明。
- 一个渲染 shader 背景，如水波焦散、迷幻漩涡。
- 一个做最终后期。
主 2D canvas 负责合成，用 drawImage(glCanvas) 把 WebGL 画面叠进来。

2D 故障特效

像素拖影：
1. 先把当前画面快照到 SNAP。
2. 按 2～8px 高的行带处理，每带选一列 x0。
3. 执行 drawImage(SNAP, x0,y,2,bh, x0,y,len,bh)，把这一列横向拉长。
竖向滴落：同样的方法，改成按列拉伸。
切片错位：整段横条整体平移。
单色 duotone：先用 saturation 混合模式填灰色，再用 color 模式填 #1838ff。

3.3 性能与并行

swiftshader 每帧约 1～3.5 秒。
先用 nproc 看核数，按核数把帧区间分段并行渲染。
每段渲染完写一个 OUT.done 标记文件。后台用 until [ -f a.done ] && [ -f b.done ]; do sleep 30; done 等待全部完成。
进程管理：
- 不要用 pgrep -c 或 pkill -f 直接匹配，它们会把自身也算进去。
- 要 kill 时用 "[r]ender.js video" 这种写法。
删除文件：不要在 cd 之后用相对通配符删除；改用新目录输出更安全。

4. 音频：节拍、拓展、歌词

4.1 BPM 与相位

用 numpy 做 STFT，分别算低、中、高频段的 onset flux。
在 BPM 60～180 和相位上做网格搜索，找到让 flux 峰值落在拍点上的组合。
分频段确认：底鼓看低频，军鼓看中高频。
记录三个量：
- BP：每拍秒数
- B0：第一小节起点
- 军鼓时刻，例如 0.924 + k·1.2685
时间线全部用 B(n) = B0 + n*BP 表达。

4.2 音乐拓展到目标时长

按小节切片，挑合适的小节重复或重排。
拼接处做 20～50ms 交叉淡化，拼接点落在小节线上。
结尾做淡出，或者回到开头那一小节形成闭环。

4.3 歌词对齐（MV）

用 faster-whisper 的 medium 模型取词级时间戳。
- 要传 numpy 数组：先用 ffmpeg 解码成 16k 单声道 float32。
- 直接传文件可能触发 av 的 metadata 报错。
以用户给的歌词文本为准，用它校正识别出来的文字，只取 whisper 的时间。
字幕动画：逐字出现、解码乱码效果、按词高亮。
重点词放大或加特效。
歌词里的动作可以做画面互动，例如唱到“吻你”时出现唇印或光斑聚焦。
截取片段时（例如 10s～1:04），视频时间轴从 0 开始，歌词时间要减去偏移。

4.4 纯画面 VJ

不配音乐时用固定 120 BPM：一拍 0.5 秒。
30 秒正好是 60 拍、15 小节。
现场接 60 或 120 BPM 的歌都能对上。

5. 时间线写法（模板）

const BP = 0.5, B0 = 0, B = n => B0 + n * BP;
const SH = [[0, B(8), 'intro'], [B(8), B(16), 'gal'], [B(16), B(24), 'cuts'], [B(24), 99, 'outro']];
const pulse = (t, k = 7) => Math.exp(-(((t - B0) % BP + BP) % BP) * k);   // 每拍衰减脉冲
const beatHit = (T, t0, k = 9, a = .5) => { const p = T - t0; return p >= 0 && p < .5 ? Math.exp(-p * k) * a : 0; };
const sm = (t, fps = 12) => Math.floor(t * fps);                          // 定格帧号，用于 jitter / boil
// 缓动：eio / eout / ein / expo / back（弹出）

镜头函数

每个镜头写成一个函数 shotX(ctx, localT)，要能画到任意 ctx 上。
这样转场时可以把两个镜头分别渲染进缓冲区，再做撕纸、方块、横条之类的合成。

快照缓存

马赛克或方块拼贴需要别的镜头某一刻的画面时，渲染一次后缓存起来，不要每帧重算。

全局对象的画布

涂鸦器之类的全局对象，每次使用前先设定当前 ctx，否则会画到错误的画布上。

镜头开始时复位

每个镜头开始时，复位共享对象的位置、旋转和可见性。
否则上一个镜头的状态会残留，例如星系位置没归位，导致铬字特写发灰。

摄像机避免退化

正俯视时，up 向量与视线平行，画面会出错。改用斜俯视。

5.1 无缝循环（VJ）

让一个镜头跨越接缝：它从时间轴末尾开始，在开头结束。
镜头局部时间 u = T >= 28 ? T - 28 : T + 2，所有运动都用 u 计算，保证连续。不要用 T % 30。
前一个镜头的转场要落到这个镜头 u=0 时的状态，例如画框合拢、Logo 落回原位。
交付前把最后一帧和第一帧并排对比。

5.2 主题镜头配方（举例）

宇宙遨游 VJ

星座连成名字 → 曲速 → 星系侧掠与俯瞰 → 星云剪影 → 黑洞 → 带环行星 → 每拍快切 → 主视觉 → 拉远回到星座。

阳光拼贴 VJ

花丛画框窗口 → 草地贴纸定格蹦出 → 冷蓝故障四拍 → 横条拼贴（两侧竖排名字）→ 太空数羊 → 剪报马赛克 → 阳光主视觉 → 撕纸转场回到画框。

个人展示片

四个章节各有一个视觉母题：身份、工具墙、作品画廊、关注 CTA。

3D Logo 片

黑场火花 → 字从碎片或刀锋拼合 → 铬面扫光 → 鼓点驱动的镜头推拉和旋转 → 定版加 glint。

6. 质检与交付

6.1 先渲预览静帧

每个镜头取 1～2 个时间点，拼成 contact sheet，用 Read 查看。
检查项：
- 缺字母
- 铬字发灰发暗
- 元素重叠
- 空洞黑屏
- 文字溢出
- 涂鸦画错画布
修完再渲全片。

6.2 全片检查

用 ffprobe 核对：
- 各段帧数之和
- 分辨率（16:9 应为 1920×1080）
- 帧率
- 时长
抽帧拼 contact sheet：fps=1/1.5,tile=4x5。
循环片要把首尾两帧并排对比。

6.3 合成

先用 concat 拼接各段，再合入音频：

-map 0:v -map 1:a -c:v copy -c:a aac -b:a 256k -shortest -movflags +faststart

6.4 交付

用 SendUserFile 发送，caption 写明规格。
中文总结写清：
- 分镜要点
- 卡点方式（BPM）
- 规格
- 循环说明
- 已知限制，例如素材是程序画的，不是实拍
- 用了网上资料的话，附 Sources
主动提供可选项：封面（3:4 / 4:3 / 5:2）、抖音文案、竖屏版、加长循环版。

6.5 封面

从视频里最帅的一帧取构图，单独高分辨率渲染，不要直接截视频帧。
大字标题加 KIRO（或对应名字）水印。
留出平台 UI 遮挡的安全区。
3:4 和 4:3 要各自重新构图，不要简单裁切。

6.6 抖音 / 小红书文案

标题有钩子，正文 2～4 行，带话题标签。
热点视频的文案要紧扣热搜关键词。
可以给 2～3 个不同风格的版本。

7. 常见坑速查

中文显示成方框：西文字体没有中文字形。把 CJK 字形池单独换成 CJK 字体。
音频 JSON 里出现 NaN：空频段导致，替换成 0。
参数名遮蔽同名函数：例如参数叫 label，又有 label() 函数。把参数改名为 lab。
用 Python 改文件：
- 先 grep 确认原文。
- 断言 replace 的匹配数等于 1。
npm i --no-save 删掉了包：它会删除 node_modules 里不在 package.json 中的包（three、esbuild）。之后要补拷回来，或者写一个 package.json。
esbuild 跑不起来：bin/esbuild 是 ELF 原生程序，直接执行，不要用 node 运行。
网页抓不到：小红书和部分站点 WebFetch 抓不到。请用户发截图，不要想办法绕过。

name	kiro-motion-studio
description	KIRO 风格炫酷视觉视频工作流：片头、个人展示片、热点视频、歌词MV、3D铬金属Logo片、说唱/演出VJ循环，含卡点剪辑、封面和抖音文案。

KIRO Motion Studio：代码生成 AE 级炫酷视频

做法是：画面每一帧都用代码渲染（Node canvas 或 three.js），按音乐节拍精准剪辑，最后用 ffmpeg 合成。

覆盖的片型：

个人 Logo 片头 / 名字视觉符号（如 KIRO 片头）
个人展示片：我是谁 → 用什么工具 → 做出了什么 → 关注能看到什么
蹭热点的资讯类炫酷视频（先查资料再做）
歌词 MV：逐句对齐人声、字幕动画、歌词互动
3D 铬金属 Logo 片：部落/刀锋字体、镜面反射
说唱歌手 / 演出用 VJ 循环视频：宇宙遨游、阳光拼贴等主题
配套：多比例封面（3:4、4:3、5:2）、抖音和小红书文案

回复用户一律用中文。

1. 开工前确认

只问一次，用 AskUserQuestion。能从上下文推断的就不问。

画幅：16:9 横屏、9:16 竖屏或其他。用户强调过“16:9 不要搞错”，交付前必须用 ffprobe 核对 1920×1080。
时长：多少秒；VJ 是否要首尾无缝循环。
音乐：三种情况。
- 用户给的音频。
- 视频里的歌。
- 不要音乐：纯画面按固定 BPM 卡点，默认 120 BPM。
- 音乐不够长时，按小节重排拓展。
名字 / 水印：例如 KIRO、Kjstar、BAIFU。名字要做成视觉符号，不能只是打字。
配色禁忌：例如“不要粉色”，或“可以有一点粉但不要全粉”。用户说过的禁忌要一直记住。
参考资料：
- 小红书、抖音链接通常抓不到（robots 屏蔽），直接请用户发截图或录屏。
- 用户说“只做参考”时，学手法和感觉，不照抄画面。

热点类视频：先查清事实再动手。

用 WebSearch / WebFetch 查资料；用户给了 URL 就逐个读。
把关键信息、数字、卖点提炼成画面文案。

2. 审美原则：“帅”的标准

用户反复强调：视觉必须拿死，转场和踩点要最帅，要像高质量 AE 做的。

“炫酷”不是把画面铺满，而是每个场景多层次、多动态、技术感强。

2.1 每个镜头至少 4 层

背景层：渐变、噪声星云、天空或粒子场，慢速运动。
主体层：Logo、3D 物体、大字、人物剪影。
装饰动态层：HUD 线框、轨道环、扫描线、手绘涂鸦、粒子、光束、星星闪烁。
前景层：飘过镜头的花瓣、光斑、散景或光速线条，制造景深。
后期层：只让高光发光的 bloom、色差、颗粒、暗角，偶尔加故障。

2.2 卡点与剪辑

先分析节拍，再设计镜头。
- 镜头长度取整数个小节。
- 切点落在小节线或强拍上。
快切段：每拍一个画面，连续 4～8 拍。一般放在副歌前或高潮。
鼓点触发的效果：
- 闪白
- 色差尖峰
- 径向缩放模糊
- 故障切片
- Logo 缩放弹跳（用指数衰减脉冲）
轻重分配：军鼓和强拍用强效果，弱拍只做轻微脉冲，不要每拍都炸。
定格动画对比：
- 拼贴、贴纸、手绘元素按 12fps 抖动（“boil”）。
- 主体和摄像机保持 60fps 丝滑。
- 两种节奏放在一起会很高级。

2.3 转场库

挑着用，不要反复用同一种。

穿越画框 / 窗口推进：缩放加径向模糊，闪白落在下一拍。
曲速跃迁：星线拉长。
像素拖影：横向拉丝，或竖向滴落。
方块拼贴洗牌，最后拼成 Logo。
横条错位：画面切成几条，分别滑入，再对齐成一整幅。
纸条撕开飞走，露出下一场景。
长曝光残影：多个半透明分身。
星座连线变成实体 Logo。
物体被吸成光环绕着 Logo 旋转，再炸开。
画面压成细线消失。

2.4 色彩与质感

冷暖反差是记忆点。例如阳光童话的主调里，在小节点上闪 0.25 秒克莱因蓝的故障拖影。
高光：只让真正亮的部分发光（阈值 bloom），不要整片发白。
后期参数：
- 色差：平时 1～1.5px，鼓点上冲到 6～10px。
- 颗粒约 0.05。
- 暗角约 0.35。
铬金属字要反射有内容的环境：天空、云、地平线、亮地面。纯黑环境会让铬字变脏变暗。加 iridescence 可以做出珍珠虹彩。
用户说不要粉时：换成银白（#e4eaff）、冷紫或星光金。

2.5 字体

名字 Logo，两条路线：

自制刀锋 / 部落字：
- 笔画是锥形的：中心线用三次贝塞尔，宽度按 s^a(1-s)^b 变化。
- 加 0.28 的斜切。
- 再配四芒星装饰。
现成展示字体挤出成 3D：例如 Shrikhand（复古胖斜体）。挤出时加大倒角，会显得圆润饱满。

辅助字体：

Space Mono：HUD、等宽信息
Unbounded / Space Grotesk：标题
Rock Salt：手写涂鸦字
Noto Sans CJK SC：中文

字体来源：网络通常只放行 npm，所以从 @fontsource/<name> 安装，取 files/*-latin-400-normal.woff。

中文字形：Space Mono 等西文字体没有中文。所有中文文字，包括解码乱码动画里的字，都要换成 CJK 字体。

2.6 HUD / 信息层（科技感）

角落小字，例如“NAME / LIVE VISUAL // THEME”、“BPM // BAR xx.x”，或小节计数。
样式：18px，白色，透明度 60～75%。
阳光童话类的片子，HUD 要克制。

2.7 KIRO 品牌习惯

水印：KIRO 的作品要带 KIRO 视觉水印或签名式 Logo。
展示片的整体气质：这个人很会玩 AI，而且真的在产出。不要做成工具说明书，也不要只卖短剧。
爆款经验：KIRO v3 在抖音反响很好，参考点是每个场景多层动态加技术感。

3. 技术流水线

生成后加白边和投影做成“贴纸”，就有拼贴画质感。
用户提供了照片时，优先用真实照片做拼贴。

3.1 路线 A：2D Node canvas

适合文字、HUD、粒子、MV 字幕，速度快。

用 @napi-rs/canvas 逐帧绘制，原始 RGBA 通过管道送进 ffmpeg：

ffmpeg -f rawvideo -pix_fmt rgba -s 1920x1080 -r 60 -i - -c:v libx264 -crf 16 -pix_fmt yuv420p out.mp4

运动模糊：在快门时间内渲染 N 个子帧，再求平均。
后期：在 2D 里做色差（按通道错位绘制）、颗粒、暗角。
注册字体：GlobalFonts.register(buffer, name)。

3.2 路线 B：three.js 跑在无头 Chromium 里

适合 3D 铬字、宇宙场景、复杂后期。

打包与驱动

scene.js 用 esbuild 打包成 IIFE：
```
esbuild scene.js --bundle --format=iife --loader:.woff=binary --outfile=bundle.js
```
这样字体会直接嵌进 bundle，避免 file:// 读取被拦截。
用 playwright-core 启动预装的 Chromium。
- 先 ls /opt/pw-browsers 找到路径，形如 .../chrome-linux64/chrome。
- 启动参数：--use-gl=angle --use-angle=swiftshader --enable-unsafe-swiftshader --ignore-gpu-blocklist。
页面暴露两个接口：window.ready 和 window.renderFrame(t)。
驱动脚本的流程：
1. 调用 renderFrame(t)。
2. 对 #out canvas 截图，JPEG 质量 96。
3. 用 -f image2pipe -c:v mjpeg 送进 ffmpeg。
素材构建可能要 1～2 分钟：
- page.goto 用 {waitUntil:'commit'}。
- waitForFunction 放宽超时到 900000，每 1000ms 轮询一次。

3D 铬字

用 opentype.parse 读字体，font.getPath(text,0,0,200) 得到路径。
把路径转成 THREE.ShapePath，y 取负。
调用 toShapes()。isCCW 参数要实测：检查 shape 数和 hole 数是否等于字母数和字母里的洞数，否则会丢字母。
用 ExtrudeGeometry 挤出，开启 bevel。
材质用 MeshPhysicalMaterial：metalness 1，roughness 0.1，clearcoat 1，可选 iridescence。
环境贴图：画一张 equirect canvas，用 PMREMGenerator 处理。
色调映射用 ACES，曝光 1.1～1.3。

自制 Logo

用笔画多边形做 ExtrudeGeometry，加星形装饰。
镜面高光处放 glint 精灵。

场景元素

星空：Points 加自定义 shader。
螺旋星系：7 万个粒子。
黑洞：黑球 + 吸积盘粒子 + 始终朝向镜头的透镜环。
带环行星：shader 球加环。
星座：点按多边形顺序连线，最后补一段闭合线。
星云：噪声云精灵。

后期

Bloom：UnrealBloomPass，或手写 8-tap 高光模糊。
自定义 ShaderPass 统一处理：色差、径向 zoom blur（14 taps）、闪白、颗粒、暗角。
也可以把 2D 合成画布作为纹理上传，最后统一过一遍后期 shader。

2D 与 3D 混合

开多个 WebGLRenderer：
- 一个渲染 Logo，alpha 透明。
- 一个渲染 shader 背景，如水波焦散、迷幻漩涡。
- 一个做最终后期。
主 2D canvas 负责合成，用 drawImage(glCanvas) 把 WebGL 画面叠进来。

2D 故障特效

像素拖影：
1. 先把当前画面快照到 SNAP。
2. 按 2～8px 高的行带处理，每带选一列 x0。
3. 执行 drawImage(SNAP, x0,y,2,bh, x0,y,len,bh)，把这一列横向拉长。
竖向滴落：同样的方法，改成按列拉伸。
切片错位：整段横条整体平移。
单色 duotone：先用 saturation 混合模式填灰色，再用 color 模式填 #1838ff。

3.3 性能与并行

swiftshader 每帧约 1～3.5 秒。
先用 nproc 看核数，按核数把帧区间分段并行渲染。
每段渲染完写一个 OUT.done 标记文件。后台用 until [ -f a.done ] && [ -f b.done ]; do sleep 30; done 等待全部完成。
进程管理：
- 不要用 pgrep -c 或 pkill -f 直接匹配，它们会把自身也算进去。
- 要 kill 时用 "[r]ender.js video" 这种写法。
删除文件：不要在 cd 之后用相对通配符删除；改用新目录输出更安全。

4. 音频：节拍、拓展、歌词

4.1 BPM 与相位

用 numpy 做 STFT，分别算低、中、高频段的 onset flux。
在 BPM 60～180 和相位上做网格搜索，找到让 flux 峰值落在拍点上的组合。
分频段确认：底鼓看低频，军鼓看中高频。
记录三个量：
- BP：每拍秒数
- B0：第一小节起点
- 军鼓时刻，例如 0.924 + k·1.2685
时间线全部用 B(n) = B0 + n*BP 表达。

4.2 音乐拓展到目标时长

按小节切片，挑合适的小节重复或重排。
拼接处做 20～50ms 交叉淡化，拼接点落在小节线上。
结尾做淡出，或者回到开头那一小节形成闭环。

4.3 歌词对齐（MV）

用 faster-whisper 的 medium 模型取词级时间戳。
- 要传 numpy 数组：先用 ffmpeg 解码成 16k 单声道 float32。
- 直接传文件可能触发 av 的 metadata 报错。
以用户给的歌词文本为准，用它校正识别出来的文字，只取 whisper 的时间。
字幕动画：逐字出现、解码乱码效果、按词高亮。
重点词放大或加特效。
歌词里的动作可以做画面互动，例如唱到“吻你”时出现唇印或光斑聚焦。
截取片段时（例如 10s～1:04），视频时间轴从 0 开始，歌词时间要减去偏移。

4.4 纯画面 VJ

不配音乐时用固定 120 BPM：一拍 0.5 秒。
30 秒正好是 60 拍、15 小节。
现场接 60 或 120 BPM 的歌都能对上。

5. 时间线写法（模板）

const BP = 0.5, B0 = 0, B = n => B0 + n * BP;
const SH = [[0, B(8), 'intro'], [B(8), B(16), 'gal'], [B(16), B(24), 'cuts'], [B(24), 99, 'outro']];
const pulse = (t, k = 7) => Math.exp(-(((t - B0) % BP + BP) % BP) * k);   // 每拍衰减脉冲
const beatHit = (T, t0, k = 9, a = .5) => { const p = T - t0; return p >= 0 && p < .5 ? Math.exp(-p * k) * a : 0; };
const sm = (t, fps = 12) => Math.floor(t * fps);                          // 定格帧号，用于 jitter / boil
// 缓动：eio / eout / ein / expo / back（弹出）

镜头函数

每个镜头写成一个函数 shotX(ctx, localT)，要能画到任意 ctx 上。
这样转场时可以把两个镜头分别渲染进缓冲区，再做撕纸、方块、横条之类的合成。

快照缓存

马赛克或方块拼贴需要别的镜头某一刻的画面时，渲染一次后缓存起来，不要每帧重算。

全局对象的画布

涂鸦器之类的全局对象，每次使用前先设定当前 ctx，否则会画到错误的画布上。

镜头开始时复位

每个镜头开始时，复位共享对象的位置、旋转和可见性。
否则上一个镜头的状态会残留，例如星系位置没归位，导致铬字特写发灰。

摄像机避免退化

正俯视时，up 向量与视线平行，画面会出错。改用斜俯视。

5.1 无缝循环（VJ）

让一个镜头跨越接缝：它从时间轴末尾开始，在开头结束。
镜头局部时间 u = T >= 28 ? T - 28 : T + 2，所有运动都用 u 计算，保证连续。不要用 T % 30。
前一个镜头的转场要落到这个镜头 u=0 时的状态，例如画框合拢、Logo 落回原位。
交付前把最后一帧和第一帧并排对比。

5.2 主题镜头配方（举例）

宇宙遨游 VJ

星座连成名字 → 曲速 → 星系侧掠与俯瞰 → 星云剪影 → 黑洞 → 带环行星 → 每拍快切 → 主视觉 → 拉远回到星座。

阳光拼贴 VJ

花丛画框窗口 → 草地贴纸定格蹦出 → 冷蓝故障四拍 → 横条拼贴（两侧竖排名字）→ 太空数羊 → 剪报马赛克 → 阳光主视觉 → 撕纸转场回到画框。

个人展示片

四个章节各有一个视觉母题：身份、工具墙、作品画廊、关注 CTA。

3D Logo 片

黑场火花 → 字从碎片或刀锋拼合 → 铬面扫光 → 鼓点驱动的镜头推拉和旋转 → 定版加 glint。

6. 质检与交付

6.1 先渲预览静帧

每个镜头取 1～2 个时间点，拼成 contact sheet，用 Read 查看。
检查项：
- 缺字母
- 铬字发灰发暗
- 元素重叠
- 空洞黑屏
- 文字溢出
- 涂鸦画错画布
修完再渲全片。

6.2 全片检查

用 ffprobe 核对：
- 各段帧数之和
- 分辨率（16:9 应为 1920×1080）
- 帧率
- 时长
抽帧拼 contact sheet：fps=1/1.5,tile=4x5。
循环片要把首尾两帧并排对比。

6.3 合成

先用 concat 拼接各段，再合入音频：

-map 0:v -map 1:a -c:v copy -c:a aac -b:a 256k -shortest -movflags +faststart

6.4 交付

用 SendUserFile 发送，caption 写明规格。
中文总结写清：
- 分镜要点
- 卡点方式（BPM）
- 规格
- 循环说明
- 已知限制，例如素材是程序画的，不是实拍
- 用了网上资料的话，附 Sources
主动提供可选项：封面（3:4 / 4:3 / 5:2）、抖音文案、竖屏版、加长循环版。

6.5 封面

从视频里最帅的一帧取构图，单独高分辨率渲染，不要直接截视频帧。
大字标题加 KIRO（或对应名字）水印。
留出平台 UI 遮挡的安全区。
3:4 和 4:3 要各自重新构图，不要简单裁切。

6.6 抖音 / 小红书文案

标题有钩子，正文 2～4 行，带话题标签。
热点视频的文案要紧扣热搜关键词。
可以给 2～3 个不同风格的版本。

7. 常见坑速查

中文显示成方框：西文字体没有中文字形。把 CJK 字形池单独换成 CJK 字体。
音频 JSON 里出现 NaN：空频段导致，替换成 0。
参数名遮蔽同名函数：例如参数叫 label，又有 label() 函数。把参数改名为 lab。
用 Python 改文件：
- 先 grep 确认原文。
- 断言 replace 的匹配数等于 1。
npm i --no-save 删掉了包：它会删除 node_modules 里不在 package.json 中的包（three、esbuild）。之后要补拷回来，或者写一个 package.json。
esbuild 跑不起来：bin/esbuild 是 ELF 原生程序，直接执行，不要用 node 运行。
网页抓不到：小红书和部分站点 WebFetch 抓不到。请用户发截图，不要想办法绕过。

kiro-motion-studio★ 27

README / Details

KIRO Motion Studio：代码生成 AE 级炫酷视频

1. 开工前确认

2. 审美原则：“帅”的标准

2.1 每个镜头至少 4 层

2.2 卡点与剪辑

2.3 转场库

2.4 色彩与质感

2.5 字体

2.6 HUD / 信息层（科技感）

2.7 KIRO 品牌习惯

3. 技术流水线

3.1 路线 A：2D Node canvas

3.2 路线 B：three.js 跑在无头 Chromium 里

3.3 性能与并行

4. 音频：节拍、拓展、歌词

4.1 BPM 与相位

4.2 音乐拓展到目标时长

4.3 歌词对齐（MV）

4.4 纯画面 VJ

5. 时间线写法（模板）

5.1 无缝循环（VJ）

5.2 主题镜头配方（举例）

6. 质检与交付

6.1 先渲预览静帧

6.2 全片检查

6.3 合成

6.4 交付

6.5 封面

6.6 抖音 / 小红书文案

7. 常见坑速查

KIRO Motion Studio：代码生成 AE 级炫酷视频

1. 开工前确认

2. 审美原则：“帅”的标准

2.1 每个镜头至少 4 层

2.2 卡点与剪辑

2.3 转场库

2.4 色彩与质感

2.5 字体

2.6 HUD / 信息层（科技感）

2.7 KIRO 品牌习惯

3. 技术流水线

3.1 路线 A：2D Node canvas

3.2 路线 B：three.js 跑在无头 Chromium 里

3.3 性能与并行

4. 音频：节拍、拓展、歌词

4.1 BPM 与相位

4.2 音乐拓展到目标时长

4.3 歌词对齐（MV）

4.4 纯画面 VJ

5. 时间线写法（模板）

5.1 无缝循环（VJ）

5.2 主题镜头配方（举例）

6. 质检与交付

6.1 先渲预览静帧

6.2 全片检查

6.3 合成

6.4 交付

6.5 封面

6.6 抖音 / 小红书文案

7. 常见坑速查