Back to Details

remotion

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Remotion

Remotion

Overview

概述

Remotion enables programmatic video creation using React components. Compositions define renderable videos with explicit width, height, fps, and duration. All animations must be driven by 
useCurrentFrame()
-- CSS animations and Tailwind animation classes are forbidden as they cause rendering artifacts. Use this skill for Remotion compositions, animations, audio, captions, transitions, media handling, or rendering. Not intended for general React UI development.
Remotion允许使用React组件进行程序化视频创作。Composition用于定义可渲染的视频，包含明确的宽度、高度、帧率（fps）和时长。所有动画必须由
useCurrentFrame()
驱动——禁止使用CSS动画和Tailwind动画类，因为它们会导致渲染异常。本指南适用于Remotion合成、动画、音频、字幕、转场、媒体处理或渲染场景，不适用于通用React UI开发。

Quick Reference

快速参考

PatternAPI / ApproachKey Points
Basic animation
useCurrentFrame()
+ 
interpolate()
Always clamp with 
extrapolateRight: 'clamp'
Spring animation
spring({ frame, fps })
{ damping: 200 }
for smooth, no-bounce motion
Composition
<Composition id, component, durationInFrames, fps, width, height>
Always set explicit dimensions
Dynamic metadata
calculateMetadata
on 
<Composition>
Set duration, dimensions, props before render
Sequencing
<Sequence from, durationInFrames>
useCurrentFrame()
returns local frame (starts at 0)
Series
<Series>
with 
<Series.Sequence>
Sequential playback; negative offset for overlaps
Transitions
<TransitionSeries>
with 
fade()
, 
slide()
, 
wipe()
Total duration = sum of scenes minus transition durations
Audio/Video
<Audio>
/ 
<Video>
from 
@remotion/media
Use 
staticFile()
for local assets
Captions
createTikTokStyleCaptions()
Token-level word highlighting via 
page.tokens
Images
<Img>
from 
remotion
Never use native 
<img>
or Next.js 
<Image>
GIFs
<AnimatedImage>
from 
remotion
Synced with timeline; 
playbackRate
for speed control
Fonts
@remotion/google-fonts
or 
@remotion/fonts
Call 
loadFont()
at top level; blocks rendering until ready
3D content
<ThreeCanvas>
from 
@remotion/three
Must set 
width
/
height
; 
useFrame()
from R3F is forbidden
Text measurement
measureText()
, 
fitText()
from 
@remotion/layout-utils
Load fonts first; match properties for measurement and render
ParametersZod schema on 
<Composition schema>
Top-level must be 
z.object()
; exact Zod version required (check Remotion docs)
Transparent video
--pixel-format=yuva420p --codec=vp9
WebM for browser; ProRes 4444 for editing software
MapsMapbox with 
useCurrentFrame()
Set 
interactive: false
, 
fadeDuration: 0
; render with 
--gl=angle --concurrency=1
模式API/实现方式关键要点
基础动画
useCurrentFrame()
+ 
interpolate()
始终使用
extrapolateRight: 'clamp'
进行值限制
弹簧动画
spring({ frame, fps })
使用
{ damping: 200 }
实现流畅无弹跳的运动效果
合成组件
<Composition id, component, durationInFrames, fps, width, height>
始终设置明确的尺寸参数
动态元数据在
<Composition>
上使用
calculateMetadata
渲染前设置时长、尺寸和属性
序列编排
<Sequence from, durationInFrames>
useCurrentFrame()
返回本地帧（从0开始）
系列播放
<Series>
搭配
<Series.Sequence>
顺序播放；使用负偏移实现重叠播放
转场效果
<TransitionSeries>
搭配
fade()
、
slide()
、
wipe()
总时长 = 所有场景时长之和减去转场时长
音频/视频来自
@remotion/media
的
<Audio>
/ 
<Video>
使用
staticFile()
加载本地资源
字幕
createTikTokStyleCaptions()
通过
page.tokens
实现逐词高亮显示
图片来自
remotion
的
<Img>
切勿使用原生
<img>
或Next.js 
<Image>
GIF动图来自
remotion
的
<AnimatedImage>
与时间轴同步；通过
playbackRate
控制播放速度
字体
@remotion/google-fonts
或
@remotion/fonts
在顶层调用
loadFont()
；加载完成前会阻塞渲染
3D内容来自
@remotion/three
的
<ThreeCanvas>
必须设置
width
/
height
；禁止使用R3F的
useFrame()
文本测量来自
@remotion/layout-utils
的
measureText()
、
fitText()
先加载字体；测量与渲染时的属性需保持一致
参数配置在
<Composition schema>
上使用Zod schema		顶层必须为
z.object()
；需使用Remotion文档指定的Zod精确版本
透明视频
--pixel-format=yuva420p --codec=vp9
浏览器使用WebM格式；编辑软件使用ProRes 4444格式
地图搭配
useCurrentFrame()
使用Mapbox		设置
interactive: false
、
fadeDuration: 0
；渲染时使用
--gl=angle --concurrency=1

Common Mistakes

常见错误

MistakeCorrect Pattern
Using CSS animations or 
setTimeout
Use 
interpolate()
and 
useCurrentFrame()
for timeline-synced animations
Using native 
<img>
, 
<video>
, 
<audio>
tags		Use 
<Img>
, 
<Video>
, 
<Audio>
from Remotion for proper preloading
Hardcoding video durationUse 
calculateMetadata
to dynamically set duration from content
Not specifying width/height on compositionsAlways define explicit dimensions to avoid rendering issues
Using 
useFrame()
from React Three Fiber		Use 
useCurrentFrame()
from Remotion inside 
<ThreeCanvas>
Forgetting 
premountFor
on sequences		Always premount sequences to preload components before playback
Not clamping 
interpolate()
output		Set 
extrapolateRight: 'clamp'
to prevent values exceeding target range
Placing 
<Sequence>
in 
<ThreeCanvas>
without 
layout="none"
Set 
layout="none"
on any 
<Sequence>
inside 
<ThreeCanvas>
错误内容正确做法
使用CSS动画或
setTimeout
使用
interpolate()
和
useCurrentFrame()
实现与时间轴同步的动画
使用原生
<img>
、
<video>
、
<audio>
标签		使用Remotion提供的
<Img>
、
<Video>
、
<Audio>
确保资源预加载正确
硬编码视频时长使用
calculateMetadata
根据内容动态设置视频时长
未为合成组件指定宽高始终定义明确的尺寸参数以避免渲染问题
使用React Three Fiber的
useFrame()
在
<ThreeCanvas>
内使用Remotion的
useCurrentFrame()
序列组件未设置
premountFor
始终预挂载序列组件，确保播放前完成组件预加载
未限制
interpolate()
的输出值		设置
extrapolateRight: 'clamp'
防止值超出目标范围
在
<ThreeCanvas>
中使用
<Sequence>
未设置
layout="none"
在
<ThreeCanvas>
内的所有
<Sequence>
上设置
layout="none"

Delegation

任务分工

  • Discover available Remotion components and their props: Use 
    Explore
    agent to search the codebase for composition definitions and asset usage
  • Build a multi-scene video with transitions and audio: Use 
    Task
    agent to compose sequences, transitions, and audio tracks step by step
  • Plan a video generation pipeline with dynamic data: Use 
    Plan
    agent to design the architecture for parametrized compositions and rendering workflow
  • 查找可用的Remotion组件及其属性：使用
    Explore
    工具搜索代码库中的合成定义和资源使用情况
  • 构建包含转场和音频的多场景视频：使用
    Task
    工具逐步编排序列、转场和音轨
  • 规划基于动态数据的视频生成流程：使用
    Plan
    工具设计参数化合成和渲染工作流的架构

References

参考资料

  • Animations and Timing -- Interpolation, springs, easing, and frame-driven animation patterns
  • Compositions and Sequencing -- Defining compositions, stills, folders, sequences, series, and trimming
  • Media and Assets -- Audio, video, images, GIFs, fonts, and static file handling
  • Captions and Text -- Transcription, SRT import, TikTok-style captions, and text animations
  • Transitions -- Scene transitions with fade, slide, wipe, flip, and duration calculation
  • Advanced Features -- 3D content, charts, maps, parameters, transparent video, and DOM measurement
  • 动画与时序 —— 插值、弹簧动画、缓动效果以及基于帧的动画模式
  • 合成与序列编排 —— 合成定义、静态帧、文件夹、序列、系列播放和剪辑操作
  • 媒体与资源 —— 音频、视频、图片、GIF、字体和静态文件处理
  • 字幕与文本 —— 转录、SRT导入、TikTok风格字幕和文本动画
  • 转场效果 —— 淡入淡出、滑动、擦除、翻转等场景转场及时长计算
  • 高级功能 —— 3D内容、图表、地图、参数配置、透明视频和DOM测量