remotion-expert

Remotion 专家 - 高性能视频生成

Remotion v4.0+、React 19 和 Next.js 16 领域的资深专家。精通程序化视频生成、亚帧动画精度，以及面向 2026 年的 AI 驱动视频工作流。

🧭 概述

Remotion 允许你使用 React 以程序化方式创建视频。此技能扩展了大模型处理复杂动画、动态数据驱动视频和高保真渲染流水线的能力。

核心能力

• 程序化动画：通过 useCurrentFrame 和 interpolate 实现逐帧精准控制。
• 动态合成：可根据外部数据调整的参数化视频。
• 现代技术栈：针对 React 19.3、Next.js 16.2 和 Tailwind CSS 4.0 全面优化。
• AI 编排：集成 Remotion Skills，实现由指令驱动的视频编辑。

---

🛠️ 目录

1. 快速开始
2. 强制规则与反模式
3. 核心概念
4. 高级模式
5. “请勿”事项
6. 参考资料

---

⚡ 快速开始

使用 Bun（推荐用于 2026 年）搭建新项目：

bun create video@latest my-video
cd my-video
bun start

基本合成模式

import { AbsoluteFill, interpolate, useCurrentFrame, useVideoConfig } from 'remotion';

export const MyVideo = () => {
  const frame = useCurrentFrame();
  const { fps, durationInFrames } = useVideoConfig();

  // Animate from 0 to 1 over the first second
  const opacity = interpolate(frame, [0, fps], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill style={{ 
      backgroundColor: 'white', 
      justifyContent: 'center', 
      alignItems: 'center' 
    }}>
      <h1 style={{ opacity, fontSize: 100 }}>Remotion 2026</h1>
    </AbsoluteFill>
  );
};

---

🛡️ 强制规则与反模式

1. 禁止使用 CSS 动画：切勿使用标准 CSS @keyframes 或 transition。它们不具备确定性，会导致渲染失败。请使用 interpolate() 或 spring()。
2. 确定性逻辑：确保所有计算都由 frame 推导得出。除非使用种子值，否则不要在组件中使用 Math.random() 或 Date.now()。
3. Zod 验证：始终使用 Zod 验证 defaultProps，以确保参数化视频的类型安全。
4. 素材预加载：使用 staticFile() 加载本地素材，并确保渲染时可以访问远程素材。

---

🧠 核心概念

1. 基于帧的动画

所有内容都是当前帧的函数。

const frame = useCurrentFrame();
const scale = interpolate(frame, [0, 20], [0, 1], { easing: Easing.bezier(0.25, 0.1, 0.25, 1) });

2. 合成架构

合成是“入口点”，用于定义画布。

<Composition
  id="Main"
  component={MyComponent}
  durationInFrames={300}
  fps={60}
  width={1920}
  height={1080}
  defaultProps={{ title: 'Hello' }}
/>

---

🚀 高级模式

AI 驱动的视频修改（2026）

集成“Remotion Skills”后，可以通过自然语言指令修改合成。

// Pattern: Instruction-driven prop updates
export const aiUpdateHandler = async (instruction: string, currentProps: Props) => {
  // Logic to map LLM output to Remotion props
  return updatedProps;
};

动态元数据计算

在合成渲染之前获取数据，以设置时长或尺寸。

export const calculateMetadata = async ({ props }) => {
  const response = await fetch(`https://api.v2.com/video-data/${props.id}`);
  const data = await response.json();
  return {
    durationInFrames: data.duration * 60,
    props: { ...props, content: data.content }
  };
};

---

🚫 “请勿”事项（常见错误）

• 请勿使用 setTimeout 或 setInterval。它们无法与渲染器同步。
• 请勿在 2026 年的工作流中使用 npm；推荐使用 bun，以实现亚秒级安装和执行。
• 请勿忘记使用 <Sequence> 延迟元素。手动设置帧偏移容易出错。
• 请勿使用 Tailwind 3.x 模式；请利用 Tailwind 4.0 原生容器查询功能，构建响应式视频布局。
• 请勿使用 useState 管理动画进度。动画状态必须始终由 frame 推导得出。
• 请勿在渲染循环中使用 useMemo 以外的方式执行大量计算。请记住，组件会在每一帧都进行渲染。
• 请勿使用依赖 window.requestAnimationFrame 的外部库。Remotion 渲染器无法捕获它们。
• 请勿硬编码帧数。始终使用常量或 2 * fps 这类相对计算。

---

📚 参考资料

• 动画与计时 - 精准插值和弹簧动画。
• 合成与属性 - 组织复杂的视频项目。
• 媒体与素材 - 处理视频、音频和 Lottie。
• 序列与系列 - 时间线编排。
• Next.js 集成 - 视频的 SSR 和 Server Actions。

---

更新日期：2026 年 1 月 22 日 - 20:00