Kiro Motion Studio

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。能从上下文推断的就不问。

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

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

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

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

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

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

2.1 每个镜头至少 4 层

1. 背景层：渐变、噪声星云、天空或粒子场，慢速运动。
2. 主体层：Logo、3D 物体、大字、人物剪影。
3. 装饰动态层：HUD 线框、轨道环、扫描线、手绘涂鸦、粒子、光束、星星闪烁。
4. 前景层：飘过镜头的花瓣、光斑、散景或光速线条，制造景深。
5. 后期层：只让高光发光的 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：

  Copy code
  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：

  Copy code
  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 铬字

1. 用 opentype.parse 读字体，font.getPath(text,0,0,200) 得到路径。
2. 把路径转成 THREE.ShapePath，y 取负。
3. 调用 toShapes()。isCCW 参数要实测：检查 shape 数和 hole 数是否等于字母数和字母里的洞数，否则会丢字母。
4. 用 ExtrudeGeometry 挤出，开启 bevel。
5. 材质用 MeshPhysicalMaterial：metalness 1，roughness 0.1，clearcoat 1，可选 iridescence。
6. 环境贴图：画一张 equirect canvas，用 PMREMGenerator 处理。
7. 色调映射用 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 与相位

1. 用 numpy 做 STFT，分别算低、中、高频段的 onset flux。
2. 在 BPM 60～180 和相位上做网格搜索，找到让 flux 峰值落在拍点上的组合。
3. 分频段确认：底鼓看低频，军鼓看中高频。
4. 记录三个量：
   • BP：每拍秒数
   • B0：第一小节起点
   • 军鼓时刻，例如 0.924 + k·1.2685
5. 时间线全部用 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. 时间线写法（模板）

jsCopy code
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）

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

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 拼接各段，再合入音频：

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

6.4 交付

1. 用 SendUserFile 发送，caption 写明规格。
2. 中文总结写清：
   • 分镜要点
   • 卡点方式（BPM）
   • 规格
   • 循环说明
   • 已知限制，例如素材是程序画的，不是实拍
   • 用了网上资料的话，附 Sources
3. 主动提供可选项：封面（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 抓不到。请用户发截图，不要想办法绕过。