Communitygithub.com

Remotion 渲染

将 Remotion 合成渲染为 MP4,并运行“编辑-重新渲染”循环——包括 CLI 渲染命令、1080p/4K/9:16 预设、并发调优、编码器选择、基于 JSON 数据文件的批量变体渲染,以及用于云端渲染的 Lambda。当用户提出相关需求时使用。

Remotion 渲染 是什么?

该技能驱动 Remotion 的“渲染与迭代”循环:将合成转化为 MP4,接收自然语言反馈,进行最小化编辑以满足要求并重新渲染。它涵盖了完整的操作流程:从收集输入(合成 ID、入口点、目标格式)开始,通过 CLI 命令执行基础渲染,支持分辨率、帧率和编码器预设(H.264、VP8/VP9、ProRes),并可调整并发度以优化本地渲染速度。该技能强调“外科手术式编辑”而非重写——即只修改与反馈相关的值、属性或时间线,保留已批准的内容。针对数据驱动的合成,它支持通过 JSON 文件批量生成变体,并提供了当本地渲染成为瓶颈时通过 Lambda 进行云渲染的指导。该技能还包含了常见问题的故障排除(帧计数不匹配、静态资源引用错误、字体闪烁),并明确规定了应避免的操作(例如,不要通过标志修改帧率而不更新合成配置、不要在每次迭代时都执行完整渲染)。它适用于 Remotion Studio、CLI 和 Lambda 平台。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/SkillMedev/tutorial-video-studio/tree/main/skills/remotion-render

在你喜欢的 AI 中提问

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

文档

Remotion 渲染 是做什么的?

驱动渲染与迭代循环:将合成转换为 MP4,接收自然语言反馈,进行满足需求的最小编辑,然后重新渲染。高成本的失败模式是相反的循环——为了一句文案的调整重写整个场景文件,或者为每次检查重新以全质量渲染——这会破坏已批准的工作,并毁掉让 Remotion 值得使用的迭代速度。

操作流程

第 1 步:收集输入

  • 合成 ID(src/Root.tsx 中 <Composition> 上的 id,不是文件名)和入口点(调用 registerRoot 的文件,通常是 src/index.ts)。
  • 目标:平台/宽高比(横向 16:9、纵向 9:16、正方形)、分辨率(默认 1080p;仅按需使用 4K),以及是否需要透明度。
  • 机器核心数(用于并发度)、以及这是单次渲染、迭代会话还是批量渲染。

第 2 步:基础渲染

npx remotion render src/index.ts <CompositionId> out/video.mp4

默认输出为使用合成自身宽度/高度/帧率的 H.264 MP4;Remotion 在需要时自动创建 out/ 目录。

第 3 步:分辨率、帧率和编码器预设

分辨率和帧率定义在 <Composition> 上(width/height/fps)——请修改源码。仅使用标志进行缩放和容器设置:

# 1080p 横向 - 合成本身尺寸为 1920x1080@30
npx remotion render src/index.ts ProductDemo out/1080p.mp4

# 4K - 将 1080p 画布放大,不触发布局
npx remotion render src/index.ts ProductDemo out/4k.mp4 --scale=2

# 9:16 纵向 - 渲染一个尺寸为 1080x1920 的合成
npx remotion render src/index.ts ProductDemoVertical out/vertical.mp4

编码器规则:

  • 社交/网络交付使用 H.264 MP4(默认)——兼容性最佳。
  • 透明度:--codec=vp8 或 vp9(WebM),或用于剪辑管线的 --codec=prores(带 alpha)。H.264 无法携带 alpha 通道。
  • 真正的 60fps 意味着在合成上设置 fps={60} 并等比缩放帧计数——仅通过标志更改帧率会导致所有按帧计时的动画不同步。

第 4 步:调整并发度

渲染是 CPU 密集型任务(每帧都是一张无头 Chromium 截图)。默认并发度约为核心数的一半;显式调整是最简单的本地加速方法:

npx remotion render src/index.ts ProductDemo out/video.mp4 --concurrency=8

从物理核心数开始(--concurrency=50% 接受百分比值);如果机器出现内存交换或热节流则减少——超过最佳点后,更多的 Chromium 标签页只会拖慢速度,而非加快。

第 5 步:运行迭代优化循环

保持 Studio 打开(npx remotion studio,http://localhost:3000)以便用户即时预览;保留完整渲染用于最终确认。

  1. 用户在 Studio 中预览并给出自然语言反馈。
  2. 将其转化为一次外科手术式编辑——仅修改相关值:
    • “太快了”→ 扩大 interpolate 的输入范围或提高弹簧 damping。
    • “Logo 应该更突出”→ 降低弹簧 damping / 添加过冲。
    • “更改 CTA 文案”→ 编辑 prop / defaultProps,不触碰其他任何内容。
    • “不同的强调色”→ 在颜色对象中更改一个十六进制值。
    • “最后一个特性停留更久”→ 增加该 <Sequence> 的 durationInFrames 并重新推导合成总的 durationInFrames。
  3. 重新渲染,或让 Studio 热重载来检查视觉效果。

外科手术式编辑 vs 重写:当更改只涉及值、属性、颜色或单个场景的时间时,进行原地编辑;仅在场景结构改变时(添加/删除/重新排列场景——并将结构性的创作路由到 remotion-compose)才重写。默认采用外科手术式编辑:它保留所有已批准的内容。

第 6 步:批量变体

合成是数据驱动的,因此 N 个变体 = JSON 文件中的 N 个属性集:

[
  { "out": "out/acme.mp4",   "props": { "logoText": "Acme",   "colors": { "accent": "#6C5CE7" }, "cta": "Try Acme" } },
  { "out": "out/globex.mp4", "props": { "logoText": "Globex", "colors": { "accent": "#00B894" }, "cta": "Try Globex" } }
]

--props 接受内联 JSON 或文件路径;对于超过几个变体的情况,编写一个小型 Node 脚本来读取 JSON 并为每个条目调用 shell 命令,或使用 @remotion/renderer 的 renderMedia() 进行类型化的循环。通过仅编辑 JSON 即可实现本地化或 A/B 文案和颜色的更改。

第 7 步:当本地渲染成为瓶颈时使用 Lambda

当单次渲染在本地需要几分钟,或批量很大时,请使用 Lambda——它将帧分散到无服务器工作节点上。否则,本地渲染更简单且免费。

npx remotion lambda functions deploy            # 每个 AWS 账户/区域只需一次
npx remotion lambda sites create src/index.ts --site-name=product-demo
npx remotion lambda render product-demo ProductDemo --props='{"logoText":"Acme"}'

需要根据 Remotion 的 Lambda 设置提供 AWS 凭证和 IAM 权限。

第 8 步:排查三个常见故障

  1. 帧计数不匹配——动画提前结束或片段末尾出现死帧。原因:某个 <Sequence> 的时长发生了更改,但合成的总时长未更新。修复:确保总时长等于其序列时长之和;每次编辑时间后重新计算。这是第一大渲染意外。
  2. 缺少 staticFile() 引用——渲染失败或某个素材为空白。原因:素材通过路径引入或位于 public/ 外部。修复:将其放入 public/assets/ 并通过 staticFile("assets/<name>") 引用。
  3. 字体闪烁/回退——文本使用错误的字体渲染或发生位移。原因:@remotion/google-fonts 的 loadFont() 缺失或调用过晚。修复:在模块顶层调用 loadFont() 并应用返回的 fontFamily;这样渲染将等待字体加载完成。

交付物

一个位于 out/ 目录下、符合请求预设的渲染文件,此外——对于迭代会话——提供循环选项:列出可调整的维度(节奏、文案、颜色、时间)并根据反馈重新渲染。对于批量渲染,提供变体 JSON 和每个变体的输出文件。

禁止操作

  • 禁止为了一个值级别的更改而重写场景文件——外科手术式编辑保留已批准的工作。
  • 禁止仅通过标志更改帧率——必须在合成上设置 fps 并重新缩放帧计数。
  • 禁止更改 Sequence 时长而不重新推导合成的总 durationInFrames。
  • 禁止每次迭代都进行完整渲染——Studio 热重载是预览循环;在最终确认时才渲染。
  • 禁止在进行内存交换或热节流的机器上将并发度推高至超过物理核心数。
  • 禁止在本地渲染只需几秒钟时使用 Lambda——这会无谓地增加 AWS 设置和成本。
  • 禁止在此处创作新场景或重组合成——那属于 remotion-compose 的范畴。

质量标准

  • 输出视频以请求的分辨率/宽高比/帧率播放,无死帧尾,无提前截断(合成总时长等于序列时长之和)。
  • 资源和字体在第一帧就能正确渲染——无双退字体闪烁,无空白资源。
  • 一次迭代只更改了反馈所要求的行;所有已批准的内容保持不变。
  • 批量输出的差异仅在于其属性集。

升级

场景创作、动画设计和组件结构转到 remotion-compose;项目脚手架转到 remotion-setup;评分和音频时间转到 sound-and-music-sync。

Individual skills in this repo

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

Captions From Transcript

Produce an accurate, properly timed caption track (SRT or WebVTT) from a video

Kinetic Typography

Put text in motion the right way - title cards, animated captions, lower-thirds, callouts, and word-by-word reveals - with a reading-time-per-word budget so copy holds long enough to read, plus enter/exit timing, weight and size transitions, and type hierarchy in motion. Use when someone asks to

Motion Design Principles

The craft layer for motion: pick the right easing (ease-in / ease-out / ease-in-out / spring), get timing and spacing right, build the anticipation→action→follow-through arc, and apply Disney

Narration Script

Write the spoken voiceover for a tutorial or demo - the actual words, phrased for the ear and synced one-instruction-per-action to what is on screen, with a pacing budget and a confident, jargon-checked tone. Use when someone says

Product Demo Director

Direct the craft of putting a real software UI on screen - cursor choreography, zoom/pan/callout language, screen-recording vs recreated-UI, and making state changes legible with highlights, focus pulls, and slow-downs. Use when filming or recreating an app for a product demo, feature walkthrough, onboarding clip, or release reel and asking

Remotion Compose

Turns a natural-language video brief into a complete, ready-to-preview Remotion composition - extracts duration, scenes, brand colors, aspect ratio, and real copy; plans the frame budget; and writes data-driven React/TypeScript using useCurrentFrame, interpolate, spring, AbsoluteFill, and Sequence, registered in Root.tsx. Use when someone says

Remotion Setup

Scaffolds a new Remotion video project wired for Claude Code Agent Skills - Node check, create-video scaffold, skills install, folder conventions, Google Fonts, and a smoke-test render. Use whenever someone wants to start making videos with Remotion and Claude, even just

Screencast Capture

Capture clean raw screen and camera footage for a tutorial or product demo - choosing the recorder (macOS Screenshot toolbar, QuickTime, OBS, Windows Game Bar), setting resolution / frame-rate / cursor / microphone, prepping a distraction-free stage, and recording in retakeable segments. Use when someone says

SkillMedev/tutorial-video-studio

Plan a product demo, feature announcement, or launch video as a beat sheet and shot list BEFORE animating - hook in the first 3s, problem, reveal, proof, CTA - with target duration and pacing per scene type, output as a JSON scene plan that remotion-compose consumes directly. Use when someone says

Social Video Formatter

Reframe and export a finished video for social platforms - 9:16 ↔ 16:9 cropping, burned-in captions, a platform-native first frame, loop design, and per-platform specs (aspect, length, safe areas) for TikTok, Reels, Shorts, X, and LinkedIn. Use when someone says

Sound and Music Sync

Score a video like an editor: beat-match cuts to the music, land SFX on transitions, pace the voiceover so it breathes, source royalty-free tracks safely, and duck the music so the VO sits clearly on top. Use when adding music, sound effects, or voiceover to a video, when asked to

相关技能