remotion

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Remotion - Video Creation in React

Remotion - 基于React的视频创作

Comprehensive skill set for creating programmatic videos using Remotion, a framework for creating videos programmatically using React.

本指南提供使用Remotion创建程序化视频的完整技能体系，Remotion是一个基于React的程序化视频创作框架。

When to use

适用场景

Use this skill whenever you are dealing with Remotion code to obtain domain-specific knowledge about:

Creating video compositions with React components
Animating elements using frame-based animations
Working with audio, video, and image assets
Building charts and data visualizations
Implementing text animations and captions
Using 3D content with Three.js
Applying transitions and sequencing
Integrating Tailwind CSS and Lottie animations

当你处理Remotion代码时，可借助本技能获取以下领域的专业知识：

使用React组件创建视频合成
基于帧的动画实现元素动效
音频、视频与图像资源的处理
图表与数据可视化的构建
文本动画与字幕的实现
结合Three.js使用3D内容
转场效果与场景编排
集成Tailwind CSS与Lottie动画

Core Concepts

核心概念

Remotion allows you to create videos using:

React Components: Build video content with familiar React syntax
Frame-based Animations: All animations driven by
```
useCurrentFrame()
```
hook
Compositions: Define video compositions with duration, dimensions, and props
Assets: Import and manipulate images, videos, audio, and fonts
Rendering: Export videos programmatically with customizable settings

Remotion允许你通过以下方式创建视频：

React组件：使用熟悉的React语法构建视频内容
基于帧的动画：所有动画由
```
useCurrentFrame()
```
钩子驱动
合成（Compositions）：定义视频的时长、尺寸与属性
资源（Assets）：导入并处理图片、视频、音频与字体
渲染（Rendering）：通过可自定义的设置程序化导出视频

Key Features

关键特性

Frame-by-frame control over animations
Dynamic metadata calculation
Media processing (trimming, volume, speed, pitch)
Caption generation and display
Data visualization with charts
3D content integration
Professional text animations
Scene transitions and sequencing

动画的逐帧控制
动态元数据计算
媒体处理（裁剪、音量、速度、音调调整）
字幕生成与展示
基于图表的数据可视化
3D内容集成
专业文本动画
场景转场与编排

How to use

使用方法

Read individual rule files for detailed explanations and code examples:

阅读单个规则文件获取详细说明与代码示例：

Core Animation & Timing

核心动画与时序

references/animations.md - Fundamental animation techniques for Remotion
references/timing.md - Interpolation curves: linear, easing, spring animations
references/sequencing.md - Delay, trim, and limit duration of items
references/trimming.md - Cut the beginning or end of animations

references/animations.md - Remotion基础动画技巧
references/timing.md - 插值曲线：线性、缓动、弹簧动画
references/sequencing.md - 元素的延迟、裁剪与时长限制
references/trimming.md - 裁剪动画的开头或结尾

Compositions & Metadata

合成与元数据

references/compositions.md - Defining compositions, stills, folders, default props
references/calculate-metadata.md - Dynamically set composition duration, dimensions, and props

references/compositions.md - 定义合成、静帧、文件夹与默认属性
references/calculate-metadata.md - 动态设置合成的时长、尺寸与属性

Assets & Media

资源与媒体

references/assets.md - Importing images, videos, audio, and fonts
references/images.md - Embedding images using the Img component
references/videos.md - Embedding videos with trimming, volume, speed, looping, pitch
references/audio.md - Using audio and sound with trimming, volume, speed, pitch
references/gifs.md - Displaying GIFs synchronized with timeline

references/assets.md - 导入图片、视频、音频与字体
references/images.md - 使用Img组件嵌入图片
references/videos.md - 嵌入视频并支持裁剪、音量、速度、循环、音调调整
references/audio.md - 音频与音效的使用，支持裁剪、音量、速度、音调调整
references/gifs.md - 展示与时间轴同步的GIF

Text & Typography

文本与排版

references/text-animations.md - Typography and text animation patterns
references/measuring-text.md - Measuring text dimensions, fitting text, checking overflow
references/fonts.md - Loading Google Fonts and local fonts

references/text-animations.md - 排版与文本动画模式
references/measuring-text.md - 文本尺寸测量、文本适配与溢出检查
references/fonts.md - 加载Google Fonts与本地字体

Captions & Transcription

字幕与转录

references/display-captions.md - Displaying captions with TikTok-style pages and word highlighting
references/import-srt-captions.md - Importing .srt subtitle files using @remotion/captions
references/transcribe-captions.md - Transcribing audio to generate captions

references/display-captions.md - 展示TikTok风格分页与单词高亮的字幕
references/import-srt-captions.md - 使用@remotion/captions导入.srt字幕文件
references/transcribe-captions.md - 转录音频生成字幕

Data Visualization

数据可视化

references/charts.md - Chart and data visualization patterns

references/charts.md - 图表与数据可视化模式

Advanced Features

高级特性

references/3d.md - 3D content using Three.js and React Three Fiber
references/lottie.md - Embedding Lottie animations
references/transitions.md - Scene transition patterns

references/3d.md - 使用Three.js与React Three Fiber实现3D内容
references/lottie.md - 嵌入Lottie动画
references/transitions.md - 场景转场模式

Styling & Layout

样式与布局

references/tailwind.md - Using TailwindCSS in Remotion
references/measuring-dom-nodes.md - Measuring DOM element dimensions

references/tailwind.md - 在Remotion中使用TailwindCSS
references/measuring-dom-nodes.md - DOM元素尺寸测量

Media Processing (Mediabunny)

媒体处理（Mediabunny）

references/can-decode.md - Check if a video can be decoded by the browser
references/extract-frames.md - Extract frames from videos at specific timestamps
references/get-audio-duration.md - Getting the duration of an audio file
references/get-video-dimensions.md - Getting the width and height of a video file
references/get-video-duration.md - Getting the duration of a video file

references/can-decode.md - 检查浏览器是否可解码某视频
references/extract-frames.md - 在特定时间戳从视频中提取帧
references/get-audio-duration.md - 获取音频文件的时长
references/get-video-dimensions.md - 获取视频文件的宽高
references/get-video-duration.md - 获取视频文件的时长

Quick Start Example

快速入门示例

tsx

import { useCurrentFrame, useVideoConfig, interpolate } from "remotion";

export const MyComposition = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <div style={{ opacity }}>
      <h1>Hello Remotion!</h1>
    </div>
  );
};

tsx

import { useCurrentFrame, useVideoConfig, interpolate } from "remotion";

export const MyComposition = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <div style={{ opacity }}>
      <h1>Hello Remotion!</h1>
    </div>
  );
};

Best Practices

最佳实践

Always use
useCurrentFrame()
- Drive all animations from the current frame
Avoid CSS animations - They won't render correctly in videos
Think in seconds - Multiply time in seconds by
```
fps
```
for frame calculations
Use interpolate for smooth animations - Built-in interpolation with easing functions
Clamp extrapolation - Prevent values from exceeding intended ranges
Test frequently - Preview in Remotion Studio before rendering

始终使用
useCurrentFrame()
- 所有动画均由当前帧驱动
避免使用CSS动画 - 这类动画无法在视频中正确渲染
以秒为单位思考 - 将时间（秒）乘以
```
fps
```
进行帧计算
使用interpolate实现平滑动画 - 内置带缓动函数的插值功能
限制外插范围 - 防止数值超出预期范围
频繁测试 - 渲染前在Remotion Studio中预览