remotion-video-composition

Remotion 视频合成制作

当 Remotion 是实际视频交付物的合成层时，请使用此技能：例如生成式媒体解说视频、产品视频、社交媒体多版本视频、数据驱动视频、屏幕演示合成视频、带字幕的访谈视频重剪，以及任何需要将 React 代码、素材、字幕、音频和交付元数据整合成可复现视频包的渲染项目。

这是一项制作技能，不只是编码教程。应将 Remotion 视为确定性的组装与后期制作引擎，用于处理可能在其他地方生成的媒体素材。

来源状态与时效性

除非另有说明，以下事实均依据截至 2026-07-11 核验的第一手来源：

• Remotion 关于合成属性、素材、静态文件、媒体组件、渲染器 API、架构、动态元数据、随机性、性能、字幕和许可的文档：https://www.remotion.dev/docs/
• FFmpeg 关于流映射、编解码器、滤镜和滤镜图的官方文档：https://ffmpeg.org/ffmpeg.html 和 https://ffmpeg.org/ffmpeg-filters.html
• W3C/WAI 关于字幕和闪光的 WCAG 指南：https://www.w3.org/WAI/WCAG22/Understanding/captions-prerecorded.html 和 https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html
• W3C WebVTT 关于定时文本提示的规范：https://www.w3.org/TR/webvtt1/
• C2PA 关于溯源清单的规范和 Content Credentials 指南：https://spec.c2pa.org/ 和 https://c2pa.org/

时效性较强的信息：Remotion 软件包版本、API 可用性、许可与定价、云渲染限制、浏览器渲染器状态、软件包弃用情况、社交平台交付规格、字幕文件要求，以及 AI／服务提供商的使用权。请在制作时重新核查，并在项目交接材料中记录核验日期。

制作原则

当视频可以表示为基于时间线的确定性 React 时，Remotion 最适用：

• 品牌动态影像；
• 生成图像或生成片段的组装；
• 图表／统计／数据视频；
• 配音字幕视频；
• 批量多版本视频；
• 程序化产品或屏幕演示布局；
• 基于精确帧数的审核导出。

不要用 Remotion 替代缺失的创意决策。编写代码前，应确定项目简报、视觉系统、素材列表、字幕方案、音频计划、目标宽高比、时长和交付要求。

遇到以下情况时，应升级处理，而非自行猜测：

• 目标平台或法律使用权会决定编码、字幕或许可要求；
• 客户要求 C2PA 签名、EIDR／ISAN／广播元数据、工会艺人限制、音乐授权，或受监管的宣传声明；
• 源媒体可能包含第三方知识产权、肖像、商标、私人数据，或许可条款不明确的模型输出；
• 自动字幕或翻译会影响安全、法律、医疗、金融或面向公众的声明；
• 闪光、光敏风险、未成年人、政治劝服、合成肖像或无障碍义务具有重大影响。

需求约定

在开始创作前，收集或确定以下信息：

1. 交付内容：最终运行环境、宽高比、分辨率、帧率、音频声道、封装格式/编解码器、平台、语言，以及是否需要烧录字幕。
2. 受众与目的：观看场景、品牌调性、行动号召、无障碍需求、审核流程。
3. 时间线：各场景或节拍的精确起止时间，以秒和帧为单位。
4. 媒体清单：所有图像、视频、音频分轨、字体、徽标、字幕文件、数据文件和源转录文本。
5. 权利与来源：来源、所有者、许可/授权、限制、模型/提供方、提示词、种子、生成日期、修改链，以及是否需要 Content Credentials。
6. 质量标准：参考风格、动态强度、文字密度、安全区域、颜色/对比度限制（如有提供）响度目标，以及变体规则。
7. 审批节点：最终渲染前，用户/客户端必须审批的内容。

如果用户只提出模糊的“制作一个视频”需求，先提供一份简短方案，并询问会实质影响结果的未决事项。创作约定尚未明确之前，不要开始需要大量素材的实现工作。

项目架构

创建一个项目，让代码结构与制作约定相对应。

建议结构：

project/
+- package.json
+- remotion.config.ts
+- public/
|  +- assets/
|  |  +- image/
|  |  +- video/
|  |  +- audio/
|  |  +- fonts/
|  |  +- captions/
|  +- provenance/
+- src/
|  +- Root.tsx
|  +- compositions/
|  +- scenes/
|  +- components/
|  +- data/
|  +- styles/
|  +- utils/
+- review/
+- renders/
+- handoff/

将创意数据与渲染机制分开：

• src/Root.tsx 注册合成。
• src/data/*.json 或类型化模块定义场景、变体、字幕和素材引用。
• src/scenes/* 根据数据渲染单个场景。
• src/components/* 存放可复用的布局基元，而非特定场景的临时决策。
• public/assets/* 存放通过 staticFile() 使用的固定媒体素材。
• handoff/ 存放最终输出、字幕旁文件、分轨、来源记录和渲染说明。

为每个素材、场景、字幕轨和变体使用稳定标识符。这些 ID 应在代码重构后保持不变，并出现在文件名、审核记录和来源记录中。

合成注册与时间模型

在 Remotion 中，合成是可渲染的视频，并通过 durationInFrames、fps、width 和 height 等属性进行注册。明确设置这些值，并根据制作约定推导，不要将它们散落在各个组件中。

使用：

• <Composition> 注册可渲染的视频。
• <Sequence> 或 <Series> 将场景放置到时间线上。
• useCurrentFrame() 实现相对于帧的动画。
• useVideoConfig() 获取 fps、durationInFrames、width 和 height。
• 当必须根据输入数据计算时长、尺寸、fps、编解码器或 props 时，使用 calculateMetadata()。

帧数计算：

export const secondsToFrames = (seconds: number, fps: number) =>
  Math.round(seconds * fps);

在所有地方使用同一个辅助函数。对于 23.976 或 29.97 等精确广播帧率，应决定项目是根据剪辑决策列表将时间表示为整数帧数，而不是反复转换十进制秒数。

场景按顺序排列时，应根据累计帧时长计算 from 值，而不是将其硬编码。只有经过审核后，才可在小型一次性合成中使用硬编码的帧偏移量。

示例：

import {Composition, Series} from 'remotion';
import {z} from 'zod';
import {MainVideo} from './compositions/MainVideo';
import {projectSchema, defaultProject} from './data/project';

export const RemotionRoot = () => (
  <Composition
    id="MainVideo"
    component={MainVideo}
    fps={30}
    width={1920}
    height={1080}
    durationInFrames={defaultProject.totalFrames}
    defaultProps={defaultProject}
    schema={projectSchema}
    calculateMetadata={({props}) => ({
      durationInFrames: props.scenes.reduce((sum, s) => sum + s.frames, 0),
      props,
    })}
  />
);

用于渲染时，Remotion 输入 props 必须可序列化为 JSON。使用 Zod 架构定义变体数据，以便在生成帧之前发现错误并使渲染失败。

画面比例、分辨率和安全区域

布局前，先选定一个标准构图目标：

• 横屏：通常为 16:9，适用于网页播放器和演示文稿；
• 竖屏：通常为 9:16，适用于手机优先的信息流；
• 仅在明确要求时使用正方形或其他竖版比例。

不要假设一个主构图裁剪后就能适用于所有场景。可以采用以下任一方式进行构图：

• 为每种画面比例分别构图，共享场景数据；或
• 使用根据 width 和 height 推导画布区域的布局系统。

使用安全区域常量，并按其进行设计：

export const makeSafeArea = (width: number, height: number) => ({
  x: Math.round(width * 0.07),
  y: Math.round(height * 0.07),
  w: Math.round(width * 0.86),
  h: Math.round(height * 0.86),
});

除非平台特定规范另有要求，否则关键文字、徽标、字幕和行动号召应放在安全区域内。平台 UI 覆盖层会变化；导出时请重新核对当前的平台模板或客户端交付规范。

资源管理

开始编写代码前，先冻结输入资源。

对于每项资源，请记录：

• 稳定的资源 ID；
• public/assets 下的本地路径；
• 来源路径或 URL；
• SHA-256 或其他校验和；
• 创作者／所有者；
• 许可证或授权；
• 适用时，生成服务提供商／模型／版本；
• 适用时，提示词、种子、参数和生成日期；
• 导入前执行的转换；
• 使用限制和所需署名；
• 资源是否包含 C2PA／Content Credentials，以及这些信息是否在转换后保留。

项目 public/ 目录中的文件请使用 Remotion staticFile()。这样可避免脆弱的绝对路径，并能在 Studio 和渲染环境中正常工作。对于嵌入式视频，请检查已安装的 Remotion 版本，并选择该版本当前推荐的媒体组件：当前文档建议新代码使用来自 @remotion/media 的 <Video>；如果确实需要 FFmpeg 支持的帧提取行为，<OffthreadVideo> 仍然适用。

不要让最终构图依赖临时文件夹、下载目录、云端 URL 或外置硬盘中的资源。远程 URL 仅适用于快速探索；生产渲染应使用冻结的本地副本，除非流水线明确要求远程获取，并记录其不可变版本。

对每个媒体文件进行预检：

• 检查尺寸、时长、帧率、编解码器、Alpha 通道、色彩配置文件／HDR 和音频声道；
• 检查片段是否包含需要静音或混音的音频；
• 如果浏览器或渲染器处理困难，请使用 FFmpeg 转码或生成代理文件；
• 将名称规范化为 ID，而非面向用户的描述；
• 确认字体已获授权并已打包。

字幕

字幕策略是一项制作决策：

• 独立字幕文件：随视频一同交付 SRT 或 WebVTT 文件；
• 烧录字幕：将字幕渲染到像素中，适用于无法使用原生字幕或不希望使用原生字幕的平台或风格；
• 两者兼备：社交媒体和无障碍交付中很常见。

对于包含有意义音频的预录同步媒体，WCAG 1.2.2 要求字幕呈现口语内容和有意义的非语言信息。如果音效、说话者身份或音乐提示对理解视频很重要，请勿仅提供对白字幕。

推荐工作流：

1. 创建或导入转录文本。
2. 按字幕片段或单词进行时间对齐。
3. 人工审核姓名、术语、数字、主张和翻译。
4. 转换为合成所用的标准化字幕格式。
5. 检查安全区域、对比度、阅读速度以及与下三分之一字幕的重叠后，再渲染烧录字幕。
6. 如果平台或客户端支持原生字幕，则导出独立的 SRT/VTT 文件。

Remotion 通过 @remotion/captions 提供字幕工具；使用 SRT 解析或 TikTok 风格分段等辅助功能前，请重新检查已安装的软件包和 API 版本。

字幕设计规则：

• 除非平台叠加元素要求采用其他位置，否则字幕应位于标题安全区／动作安全区内；
• 避免遮挡嘴部、产品、UI 控件或重要图表标签；
• 使用高对比度，并为多变的画面留出足够的背景分隔；
• 除非有意采用且易于阅读，否则避免逐词快速显示的卡拉 OK 式字幕；
• 有意义的非语言提示也应包含在内，例如 [door closes] 或 [music swells]；
• 对于多语言输出，应将换行和文本扩展视为设计问题，而不是事后才考虑。

音频混音与分轨

将音频规划为多个分轨：

• 旁白／对白；
• 音乐；
• 音效；
• 源片段音频；
• 可选的无障碍音轨或音频描述音轨。

在 Remotion 中，音频应与视觉内容使用相同的帧时间线进行对齐。使用 <Sequence> 延迟分轨，并通过媒体组件的 volume 属性设置静态或随帧变化的音量。可以混合多个音频标签，但仍需使用音频工具检查最终渲染结果；仅靠视觉预览是不够的。

制作经验法则：

• 确保旁白在音乐和音效之上仍清晰可辨；
• 在有人声时降低音乐音量，并在间隙中恢复；
• 避免混音叠加后出现削波；
• 除非有意采用硬切音频，否则应让环境音在场景切换时保持连续；
• 交付时保留独立分轨，以便客户端进行本地化、修订或合规审查。

如果使用 FFmpeg 进行后期混音或响度检查，请查阅 loudnorm、amix、atrim、afade 及相关滤镜的官方文档。不要将某个 LUFS 目标值硬编码为通用标准；平台、广播、播客和客户端的规格各不相同。如果规格未知，请将所选目标值标注为制作假设。

动画与转场

保持动画确定性，并基于帧进行控制：

• 使用 useCurrentFrame() 和 useVideoConfig()；
• 使用 spring() 实现符合物理规律的显现效果；
• 使用 interpolate() 和 interpolateColors() 映射数值；
• 使用 Remotion random(seed) 实现确定性变化；
• 避免使用 Math.random()、Date.now()、渲染期间不稳定的网络获取，以及依赖浏览器计时的布局。

根据要传达的信息设计动态效果：

• 按照观众需要了解信息的顺序逐步呈现；
• 使用转场来理清结构，而不是为每个剪辑添加装饰；
• 将复杂的动态效果留给需要强调的时刻；
• 让动态效果的强度与品牌和受众相匹配；
• 避免动态效果导致小字难以阅读。

对于场景转场，先判断剪辑属于概念、空间、节奏还是纯编辑层面的转场，再选择转场类型：

• 直接剪切：速度最快，通常最适合信息密集的内容；
• 淡入淡出／溶解：用于柔和地转换主题或表现时间流逝；
• 滑动／擦除：用于表现空间移动或类 UI 动效；
• 缩放／推拉：用于层级变化或内容揭示；
• 匹配剪辑：在场景之间保持形状、颜色或动态效果的一致；
• 音频引导转场：由音乐或 SFX 推动视觉剪辑。

如果使用 @remotion/transitions 或任何转场包，请在制作时确认当前 API 和版本。

文本、布局与视觉系统

将文本视为经过设计的媒体：

• 使用字号体系，而不是随意指定字体大小；
• 限制行长；
• 为标题、章节标签、说明文字、注释、数据、来源注释和 CTA 定义样式；
• 将关键信息放在安全区域内；
• 考虑文本扩展，为本地化留出空间；
• 在需要时为事实性声明添加来源注释。

使用能适应画面尺寸的布局原语：

• Frame：设置背景和安全区域；
• Grid 或 Stack：控制间距；
• CaptionLayer：预留字幕位置；
• BrandBug：控制 Logo 的位置；
• SceneChrome：可选的场景标签、来源注释或进度指示器；
• MediaSlot：处理图像或视频的适配与裁剪。

不要只依赖 CSS 响应式行为。请在多个帧和宽高比下渲染预览静帧，以发现文本被裁切、叠加层不可见，以及字幕与 UI 相互干扰等问题。

数据驱动的变体

如果创意系统明确，Remotion 非常适合批量生成变体。

在以下内容发生变化时使用变体：

• 文案、语言、配音、字幕；
• 产品截图或生成的图像；
• 数据、姓名、优惠、日期；
• 宽高比；
• Logo／品牌主题；
• CTA 或本地化内容。

变体规则：

• 将所有渲染输入保存在可序列化为 JSON 的 props 中；
• 渲染前使用 schema 验证 props；
• 当场景数量或字幕长度变化时，根据数据推导时长；
• 使用稳定的资源 ID 和变体 ID；
• 生成渲染清单，将每个输出映射到 props、资源、字幕和来源记录条目；
• 批量渲染视频前，先渲染确定性的静帧。

在一个代表性变体通过视觉、字幕、音频和无障碍审查之前，不要批量渲染大量变体。

渲染与导出

根据环境选择合适的渲染方式：

• 本地操作工作流使用 CLI 渲染；
• 通过 @remotion/renderer renderMedia() 进行 Node/Bun 程序化渲染；
• 只有在查阅 Remotion 当前的 SSR/云端文档、许可条款和基础设施限制后，才使用云端/服务端渲染。

根据交付规格选择输出设置：

• 容器和编解码器；
• 分辨率和帧率；
• 音频编解码器/采样率/声道数；
• CRF 或比特率限制；
• Alpha 要求；
• 缩略图/静帧要求；
• 字幕外挂文件格式；
• 文件名约定和版本。

Remotion renderMedia() 和 CLI 渲染都提供编解码器和输出位置选项。Remotion 的质量指南指出，CRF 是受支持编解码器的主要质量控制参数；FFmpeg 文档则规定了底层编解码器和滤镜的行为。压缩率越低，通常质量越高、文件越大；导出后务必进行视觉检查。

最终交付前，先导出可重复的审核版本：

• 关键帧联系表：首帧、每个场景的起始帧、每种字幕样式、每个 CTA、每个转场的中间帧；
• 文件大小较重要时，导出带水印的低分辨率审核预览；
• 导出最高动态部分附近的短片段，使用全分辨率；
• 只有清除关键问题后，才进行最终的完整渲染。

如果渲染失败，请对问题分类：

• 代码/构建错误；
• 资源缺失或路径错误；
• 媒体解码/转码问题；
• 内存/并发问题；
• 字体/渲染不匹配；
• 音频混音问题；
• 平台/编解码器不兼容。

然后针对问题类别进行修复，而不是盲目重试。

性能与可靠性

进行重要渲染前：

• 固定软件包版本，或记录已安装的版本；
• 如果可用，运行类型检查、lint 和构建；
• 确认 public/ 下存在所有资源；
• 确认渲染时不会从可变的外部服务获取数据；
• 缩减过大的输入属性；将大型数据或媒体存为文件；
• 在完整视频渲染前，使用静帧渲染调试布局；
• 根据硬件和内存选择并发度；
• 长时间渲染前，先测试一个有代表性的片段。

避免：

• 每帧都进行网络调用；
• 明明有更小的生产资源可用，却仍解码超大图像；
• 不必要的 DOM 深度和繁重的 CSS 效果；
• 在多个元素上使用未经测试的动画模糊/阴影/滤镜效果；
• 无界的图像/视频元素；
• 在属性中放入大型 Base64 数据块；
• 不确定性的计时器或随机值。

如果使用 calculateMetadata() 获取数据，请遵循 Remotion 当前指南，避免在高并发渲染时重复调用受速率限制的接口。在可行时，将获取的数据缓存或固定到项目文件中。

无障碍与安全检查

交付前运行以下检查：

• 字幕：预录制的有意义音频应配有字幕；必要时，字幕应包含有意义的非语音音频和说话者语境。
• 阅读：字幕和标题文字在目标设备上的播放速度下应易于阅读。
• 对比度：文字和 UI 叠加层在所有背景上都应清晰可读。
• 闪烁：避免任何内容在一秒内闪烁超过三次，除非其低于 WCAG 通用闪烁/红色闪烁阈值。不确定时，应减少闪烁、降低对比度、放慢序列或移除效果。
• 运动敏感：避免不必要的抖动、快速缩放或频闪背景；如有要求，提供更平缓的版本。
• 音频：避免削波、刺耳的峰值或突然的大音量转场。
• 音频描述或替代方案：如果主音频未传达重要视觉信息，应升级处理，决定是否需要音频描述或文本替代方案；对于受无障碍法规约束的交付物尤其如此。

自动化检查不能取代人工对字幕、闪烁风险或理解程度的审核。

来源记录、许可与内容凭证

即使最终文件没有 C2PA 签名，也要维护来源记录台账。

台账至少应包含以下字段：

{
  "project_id": "example-video",
  "verified_on": "2026-07-11",
  "outputs": [
    {
      "id": "main-16x9-v03",
      "path": "handoff/main-16x9-v03.mp4",
      "sha256": "..."
    }
  ],
  "assets": [
    {
      "id": "hero-image-01",
      "local_path": "public/assets/image/hero-image-01.png",
      "source": "generated",
      "provider": "example-provider",
      "model": "example-model",
      "prompt_or_brief": "stored in secure project notes",
      "seed": "12345",
      "license_or_permission": "client approved for this campaign",
      "restrictions": "no standalone resale",
      "sha256": "..."
    }
  ],
  "software": {
    "remotion": "record installed version",
    "ffmpeg": "record installed version"
  },
  "human_approvals": [
    {
      "scope": "final render",
      "approver": "client/contact",
      "date": "YYYY-MM-DD"
    }
  ]
}

C2PA 内容凭证是一项技术来源标准，以清单、断言、声明、签名和素材为基础。如果客户端要求使用 C2PA，请使用当前兼容 C2PA 的工具链，并验证凭证在导出和平台上传流程中得以保留。如果平台会剥离元数据，请在交接时保留已签名的源文件／输出文件以及单独的台账。不要暗示 C2PA 能证明内容真实；它记录的是来源声明，其可信度取决于签署者及信任链。

遇到以下情况时，应升级给客户、法律顾问或平台负责人处理：

• 许可条款不明确，或与预期用途冲突；
• 涉及生成的人像、声音、徽标、音乐或商标权利；
• 必须注明来源，但平台版式无法支持；
• AI 提供商的输出条款或安全政策会影响发布；
• 合成或编辑后的媒体必须标注；
• 字幕、旁白、画面或元数据中出现受监管的声明。

QA 检查清单

最终交接前运行此清单：

1. 构成约定：时长、fps、尺寸、宽高比和变体列表均与需求说明一致。
2. 时间线：场景边界、转场、字幕时间和音频提示均精确到帧。
3. 媒体保管：每个引用的文件都在本地存在、经过校验和检查，并有来源记录。
4. 视觉审查：关键帧联系表通过布局、安全区域、裁切、品牌、文本和 CTA 检查。
5. 动态审查：转场有助于表达含义；没有意外抖动、卡顿或过度动画。
6. 字幕审查：通过转录准确性、标点、说话人提示、非语音提示、换行和翻译检查。
7. 音频审查：通过清晰度、混音、淡入淡出、同步、削波和响度假设检查。
8. 无障碍审查：通过字幕、对比度、闪烁、动态敏感性和音频描述决策检查；未通过时应升级处理。
9. 确定性：重新渲染的审查静帧符合预期；不存在随机、网络或时间依赖。
10. 编码审查：最终文件可在目标播放器中打开；编解码器、容器和音频设置符合交付要求。
11. 来源审查：台账、许可、审批、版本、提示词／种子和来源备注均完整。
12. 交接审查：包含最终文件、附属文件、分轨文件、源文件包、渲染备注和剩余风险。

交付交接

交付以下内容：

• 最终视频文件；
• 字幕附属文件（如有）；
• 是否已烧录字幕的状态；
• 缩略图／静帧导出文件；
• 双方约定的音频分轨或最终混音；
• Remotion 源项目或归档的源文件包；
• 确切的渲染命令或脚本入口；
• 锁定文件和软件版本备注；
• 来源／许可台账；
• QA 报告，其中包含已知限制以及重新核查过的时效性信息；
• 客户审批记录或仍待决定的事项清单。

交接内容应使其他 Agent 或工程师无需猜测所用素材、属性或设置，就能复现渲染结果。

示例：使用 Remotion 组装的生成式媒体解说视频

用户请求：“用生成的图像、旁白、音乐、字幕和行动号召，制作一段 60 秒的竖屏解说视频。”

推荐做法：

1. 确认 1080x1920、30 fps、60 seconds、语言、字幕样式、品牌颜色和音乐来源。
2. 将生成的图像固定在 public/assets/image/ 下，将旁白和音乐固定在 public/assets/audio/ 下。
3. 创建一个 project.json，包含五个场景，每个场景都包含时长、图像资源 ID、旁白片段、标题、字幕提示范围和转场样式。
4. 使用 width={1080}、height={1920}、fps={30} 注册 VerticalExplainer，并根据场景计算 durationInFrames。
5. 使用 <Series> 排列场景，并使用 <Sequence> 添加叠加层、音频提示和字幕层。
6. 对于生成的片段，使用当前推荐的 Remotion 视频组件；当基于 FFmpeg 的提取方式更合适时，则改用 OffthreadVideo。其他情况下，使用 Img 配合确定性的镜头移动来呈现静态图像。
7. 渲染一张联系表：场景开头、标题显现时刻、字幕密集的帧、转场中点和最终行动号召。
8. 在完整渲染前检查字幕和闪烁情况。
9. 导出 MP4、SRT/VTT、来源记录清单和源文件包。

场景数据示例：

{
  "id": "scene-03-proof",
  "frames": 360,
  "image": "workflow-diagram-01",
  "narration": "vo-03-proof",
  "headline": "The hidden cost is handoff friction",
  "captionCueIds": ["c011", "c012", "c013"],
  "motion": {"type": "slow-push", "intensity": 0.18},
  "transitionOut": "match-cut-line"
}

实现草图示例：

const Scene = ({scene}: {scene: SceneData}) => {
  const frame = useCurrentFrame();
  const {fps, width, height} = useVideoConfig();
  const safe = makeSafeArea(width, height);
  const reveal = spring({frame, fps, config: {damping: 18}});

  return (
    <AbsoluteFill style={{backgroundColor: '#080A12'}}>
      <KenBurnsImage assetId={scene.image} motion={scene.motion} />
      <Headline text={scene.headline} progress={reveal} safe={safe} />
      <CaptionLayer cueIds={scene.captionCueIds} safe={safe} />
    </AbsoluteFill>
  );
};

为什么这样做有效：Remotion 控制确定性的时间线，同时将生成的媒体固定下来并保持可追溯性。Agent 可以修改文案、字幕、时间安排或布局，而无需重新生成所有资源。

需要留意的常见问题：字幕位置过低，被平台界面遮挡；图像分辨率过低，不适合竖屏裁切；音乐盖过旁白；翻译版本的文本长度增加；以及未记录的 AI 生成设置。

示例：数据驱动的变体营销活动

用户请求：“制作 40 个简短的产品更新视频，每个客户细分各一个，使用相同结构，但采用不同的指标、屏幕截图和行动号召。”

推荐做法：

1. 先制作一个代表性变体。
2. 定义带有架构验证的 VariantProps。
3. 将变体数据存储在 JSON 中，并为所有资源使用稳定 ID。
4. 使用 calculateMetadata() 为本地化文案较长的变体延长时长。
5. 在批量生成视频前，为每个变体的首帧、指标显现时刻和行动号召渲染静帧。
6. 生成渲染清单，将每个输出映射到输入属性和记录清单条目。

变体属性结构示例：

const variantSchema = z.object({
  variantId: z.string(),
  locale: z.string(),
  segmentName: z.string(),
  metrics: z.array(z.object({
    label: z.string(),
    value: z.string(),
    sourceNote: z.string().optional(),
  })),
  screenshotAssetId: z.string(),
  cta: z.string(),
  captionTrack: z.string(),
});

批处理规则：如果任何变体未通过架构验证、资源存在性检查、字幕时间检查或安全区域静帧审核，就停止批处理并修正数据或布局。不要为了更快而渲染 40 个有问题的视频。