Communitygithub.com

berhjoan/video-con-codigo

用代码 100% 制作完整动画短片(故事、角色、摄像机、粒子、西班牙语配音、口型同步、音乐、混音),依靠 Remotion 和本地工具,无付费 API。

video-con-codigo 是什么?

此技能提供了一套完整的端到端工作流程,用于使用 Remotion 和本地开源工具 100% 通过代码生成动画短片。它涵盖了从故事构思(使用 HyperFrames 方法)到最终视频渲染的整个过程,包括西班牙语配音合成(使用 Kokoro-82M 和 Piper TTS)、口型同步(使用 Rhubarb)、音乐和音效生成(使用 pretty_midi 和 FluidSynth)以及专业级音频混音(达到 −15.5 LUFS)。工作流程严格遵循特定顺序:先写故事,然后生成声音并获得时间码,接着制作音频主轨,再在 Remotion 中构建场景,最后按场景渲染并拼接。该技能包含丰富的可复用组件库(角色绑定、摄像机、粒子系统等),并提供了处理沙盒环境(无 GPU)、字体加载、成本估算以及 1080p 3 分钟短片渲染时间(约 1.5 小时/2 核 CPU)的详细指导,非常适合希望完全以代码驱动动画制作的开发者。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/berhjoan/claqueta/tree/HEAD/library/skills-propias/video-con-codigo

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

100% 代码视频(Remotion + 本地音频)

工作顺序(请勿更改顺序)

  1. 先写故事(HyperFrames story.md 方法):仅此一项,3 条故事线,前 2 秒内要有钩子,按百分比划分节拍,禁止生成视频的“提示”(所有元素平等进入、无故漂浮、卡片排列、浮动标志)。编写包含时间码的 SCRIPT.md。
  2. 配音 → 实际时长 → timeline.json(场景、每行开始时间、事件、音乐段落)。音频和视频读取同一个 JSON。
  3. 音频主轨(音乐 + 音效 + 带闪避的配音,−15.5 LUFS,峰值 ≤ −1 dBTP)。
  4. Remotion 场景,一个 Film 合成,每个场景使用 <Sequence>;在渲染前检查控制帧(联系表)。
  5. 按场景渲染(--frames=a-b --muted) → 拼接 → 用 ffmpeg 混流 → 用提取的帧进行质量控制。

引擎

  • npx create-video@latest --yes --blank --no-tailwind <dir>; npx remotion add @remotion/transitions @remotion/media @remotion/effects @remotion/noise @remotion/paths @remotion/shapes @remotion/motion-blur @remotion/fonts。
  • 无 GPU 沙盒:在 remotion.config.ts 中设置 Config.setBrowserExecutable(<chrome-headless-shell>)、Config.setChromiumOpenGlRenderer("swangle")、setConcurrency(2)、setCrf(18)、setPixelFormat("yuv420p")。
  • 字体:使用 @fontsource[-variable]/* 包(npm 可用;Google Fonts 不可用)。在捕获前使用 delayRender 等待 document.fonts.load()(包含 glyphs áéíóúñ¿¡)。
  • Remotion 规则:所有内容从 useCurrentFrame() 派生;使用带 clamp 的 interpolate;使用 Remotion 的 random(seed);禁止使用 CSS transition/animation、Math.random、Date、定时器、useFrame。
  • 成本估算(2 CPU,1080p):空场景 ≈0.1 秒/帧;2000 个 canvas 精灵 ≈0.7 秒/帧;全屏 filter: blur() ≈2.5 秒/帧。粒子:封闭形式(位置 = f(种子, i, t))、径向预模糊精灵、globalCompositeOperation: "lighter"。
  • 一个 3 分钟的短片(5400 帧,1080×1920)在 2 核 CPU 上大约需要 1 小时 30 分钟。保存 bundle(npx remotion bundle)并从它渲染。

可复用工具包(此仓库中不包含;作为待构建零件列表)

anim.ts(按角色分类的缓动、闭合弹簧、keyedState、眨眼、漂移)、Camera2D.tsx(带视差/推拉的图层)、Particles.tsx(雨、萤火虫、灰尘、星星、颗粒)、City.tsx(程序化霓虹城市 + 反射)、Text.tsx(动态、霓虹、逐词字幕、可变标题)、Post.tsx(暗角、闪光、宽银幕、光线)、character/Mia.tsx(绑定:姿势 + 表情 + 口型 A–H/X + 眨眼 + 呼吸 + 边缘光 + 道具)、character/Lucero.tsx、Flat.tsx(带手绘风格的扁平世界)、ChatScreen.tsx、lipsync.ts。tools/ 中的脚本:voice.py、make_voices.py、asr.py、make_timeline.py、make_audio.py、render_all.sh、assemble.sh、sheet.py。

角色

  • 绑定 = 数值参数(姿势、表情、口型),可按帧混合;表情预设;使用 keyedState(预期 → 动作 → 稳定)进行过渡。头部引导,身体跟随;每 2–5 秒播种式眨眼;切勿用相同曲线同时移动所有部分。
  • 口型同步:Rhubarb -r phonetic -f json 处理 22 kHz 单声道 16 位 WAV → 生成 A–H/X 提示 → 在提示之间混合嘴部参数(50 ms 混合)。轻声时开口强度 ×0.7。
  • 在动画开始前,先制作角色表(表情、口型、姿势)的静态图。

配音(西班牙语,本地)

  • Kokoro-82M ONNX(kokoro-onnx,语音 ef_dora、em_alex、em_santa,语言 es-419)和 Piper(piper-tts,es_MX-claude-high、es_AR-daniela-high)。模型在 GitHub releases(thewh1teagle/kokoro-onnx,k2-fsa/sherpa-onnx)。
  • 儿童音:用 rubberband -p N -F 升 +4…+6 半音(保持共振峰)。低音:−4。“合成声音”:−2 st 层(26%)+ 延迟 12 ms 的 +0.3 st 层(18%)+ 大混响。
  • 务必用 ASR 验证(通过 sherpa-onnx ≥ 2.0 的 Parakeet-TDT 0.6B v3):计算 WER 与文本的比较;若 > 5% 则重新生成或重写句子。在应用效果前验证(混响会混淆 ASR 的语言检测器)。ASR 的逐词时间戳用于字幕。
  • 如果用户有自己的配音(例如 ElevenLabs),则替换每行的 WAV 并重新生成提示和时间线,无需修改场景。

音乐与音效

  • 用 pretty_midi 按段落(BPM、和弦进行、GM 乐器)创作 MIDI → fluidsynth -ni -g 0.6 -r 48000 -F out.wav MuseScore_General_Full.sf3 in.mid → pedalboard(高通滤波器、压缩器、混响)→ pyloudnorm。
  • 视觉同步 = 相同的节拍算术(每节拍帧数 = fps·60/bpm,根据节拍索引计算每个节拍)。
  • 音效需要有屏幕上的原因;将峰值放在图像之后 1 帧;轮换采样;用 numpy 合成不存在的音效(嗡嗡声、雨声、铅笔声、闪光声、低音冲击)。
  • 混音:配音 −20 dBFS RMS,音乐在配音下方 −8 dB(闪避 120 ms / 700 ms),音效 −4 dB,主轨 −15.5 LUFS,峰值 0.6。使用频谱图(ffmpeg showspectrumpic)检查是否有任何背景噪音(如雨声)覆盖了配音。

指导(来自已读取的技能:Remotion、HyperFrames、iart-ai motion/kinetic/webgl、nolanx、anatomy、isometric-ops、taste-skill)

  • 每个节拍一个动作;入场使用长尾缓动(bezier(0.16,1,0.3,1)),出场速度加快 40–50%;摄像机使用 inOut;标题落地后保持静止;3–5 种有原因的转场;在最快帧处剪切。
  • 视差:背景 0.1–0.3×,中景 0.5–0.7×,前景 1–1.5× 带模糊。无人机镜头 = 嵌套图层堆叠,使用对数缩放(窗户 → 外墙 → 街区 → 地图 → 云层 → 星球)。
  • 等距:单一投影;平面阴影 15–30%;顶部更亮。
  • 字体:最多 2 个家族;标题高度为画面高度的 4–9%;字母错开 20–40 ms,单词错开 40–70 ms;可变字体用于字重/宽度。
  • 竖屏:关键内容在中央 80%;字幕在下方安全区域(≥ 110 px);文字 ≥ 44 px;逐词字幕,确保无声也能理解。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

相关技能