# Remotion Expert - 高性能视频生成 Remotion v4.0+、React 19 和 Next.js 16 的高级专家。2026 年程序化视频生成、子帧动画精度和 AI 驱动的视频工作流程方面的专家。 ## 🧭 概述 Remotion 允许您使用 React 以编程方式创建视频。这项技能扩展了法学硕士处理复杂动画、动态数据驱动视频和高保真渲染管道的能力。 ### 核心能力 * **程序化动画**：通过“useCurrentFrame”和“interpolate”进行帧完美控制。 * **动态合成**：适应外部数据的参数化视频。 * **Modern Stack** ：针对 **React 19.3** 、 **Next.js 16.2** 和 **Tailwind CSS 4.0** 进行了全面优化。 * **AI Orchestration** ：与远程技能集成，以进行指令驱动的视频编辑。 ** ** ## 🛠️ 目录 1. 快速入门 2. 强制性规则和反模式 3. 核心概念 4. 高级模式 5.“不要”清单 6. 参考文献 ** ** ## ⚡ 快速入门使用 Bun 搭建一个新项目（推荐 2026 年）：包子创建视频@最新的我的视频 cd 我的视频发髻开始 ### 基本构图模式从 'remotion' 导入 { AbsoluteFill, interpolate, useCurrentFrame, useVideoConfig }; 导出 const MyVideo = () => { const 框架 = useCurrentFrame(); const { fps, 持续时间InFrames } = useVideoConfig(); // 在第一秒内从 0 动画到 1 const 不透明度 = 插值(帧, [0, fps], [0, 1], { extrapolateRight: '夹紧', }); 返回（ <绝对填充样式={{ 背景颜色：'白色'， justifyContent: '中心', 对齐项目：'居中' }}>

Remotion 2026

）； }; ** ** ## 🛡️ 强制性规则和反模式 1. **无 CSS 动画**：切勿使用标准 CSS `@keyframes` 或 `transition`。它们不是确定性的，并且会在渲染过程中失败。使用“interpolate()”或“spring()”。 2. **确定性逻辑** ：确保所有计算均源自“框架”。避免在组件内使用 `Math.random()` 或 `Date.now()` 除非有种子。 3. **Zod 验证** ：始终使用 Zod 作为 `defaultProps` 以确保参数化视频中的类型安全。 4. **资源预加载** ：对本地资源使用“staticFile()”，并确保在渲染期间可以访问远程资源。 ** ** ## 🧠 核心概念 ### 1\.基于帧的动画一切都是当前框架的函数。 const 框架 = useCurrentFrame(); const scale = interpolate(frame, [0, 20], [0, 1], { 缓动: Easing.bezier(0.25, 0.1, 0.25, 1) }); ### 2\.组合架构作品是“入口点”。他们定义了画布。 <构成 id=“主要” 组件={我的组件} 帧内持续时间={300} 帧率={60} 宽度={1920} 高度={1080} defaultProps={{ 标题: '你好' }} /> ** ** ## 🚀 高级模式 ### AI 驱动的视频修改 (2026) 与“远程技能”集成允许使用自然语言指令来修改构图。 // 模式：指令驱动的 prop 更新导出 const aiUpdateHandler = async (指令: string, currentProps: Props) => { // 将 LLM 输出映射到 Remotion props 的逻辑返回更新的Props； }; ### 动态元数据计算在合成渲染之前获取数据以设置持续时间或尺寸。导出常量计算元数据 = async ({ props }) => { const 响应 = 等待 fetch(`https://api.v2.com/video-data/${props.id}`); const data =等待response.json(); 返回{ 帧内持续时间：data.duration * 60，道具：{ ...道具，内容：data.content } }; }; ** ** ## 🚫 “不要”列表（常见错误） * **请勿** 使用 `setTimeout` 或 `setInterval`。它们不与渲染器同步。 * **请勿** 在 2026 年工作流程中使用 `npm`；更喜欢“bun”来实现亚秒级安装和执行。 * **不要**忘记使用 `` 来延迟元素。手动帧偏移很容易出错。 * **不要** 使用 Tailwind 3.x 模式；利用 **Tailwind 4.0** 本机容器查询来实现响应式视频布局。 * **请勿** 使用 `useState` 来实现动画进度。动画状态必须始终源自“frame”。 * **请勿** 在没有 `useMemo` 的情况下在渲染循环内执行繁重的计算。请记住，该组件渲染_每一帧_。 * **请勿** 使用依赖于 `window.requestAnimationFrame` 的外部库。它们不会被 Remotion 渲染器捕获。 * **不要** 硬编码帧计数。始终使用常数或相对计算，例如“2 * fps”。 ** ** ## 📚 参考文献 * [动画和计时]() \- 精确插值和弹簧。 * [构图和道具]() \- 构建复杂的视频项目。 * [媒体和资产]() \- 处理视频、音频和 Lottie。 * [排序和系列]() \- 时间线编排。 * [Next.js 集成]() \- 视频的 SSR 和服务器操作。 ** ** _更新时间：2026 年 1 月 22 日 - 20:00_

远程专家

包含技能