remotion-markup

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

This is guidance for writing Remotion React Markup. If this is not relevant, load Remotion Best Practices instead.

这是编写Remotion React标记的指南。如果内容不相关，请加载Remotion最佳实践。

General rules

通用规则

Animate properties using

useCurrentFrame()

and

interpolate()

Use

interpolate()

over

spring()

Use

Easing.bezier()

to customize timing, including jumpy or overshooting motion. Use

Easing.spring()

if you want spring animations

HTML Elements which make sense to be made interactive in the Studio should use

Interactive

<div>

<Interactive.Div>

.
Set a descriptive

name

prop such as

name="Hero title"

for

Interactive

Solid

Sequence

tsx

import { useCurrentFrame, Easing, interpolate, Interactive } from "remotion";

export const FadeIn = () => {
  const frame = useCurrentFrame();

  return (
    <Interactive.Div
      name="Title"
      style={{
        opacity: interpolate(frame, [0, 60], [0, 1], {
          extrapolateRight: "clamp",
          extrapolateLeft: "clamp",
          easing: Easing.bezier(0.16, 1, 0.3, 1),
        }),
      }}
    >
      Hello World!
    </Interactive.Div>
  );
};

Keep the

interpolate()

call inline in the

style

prop. Prefer

scale

translate

rotate

CSS properties over

transform

tsx

// 👍 Inline editable keyframes and transform shorthands
style={{
  scale: interpolate(frame, [0, 100], [0, 1]),
  translate: interpolate(frame, [0, 100], ["0px 0px", "100px 100px"]),
  rotate: interpolate(frame, [0, 100], ["20deg", "90deg"]),
}}

// 👎 Hidden values and transform strings become harder to edit in Studio
const scale = interpolate(frame, [0, 100], [0, 1]);

style={{
  transform: `scale(${scale})`,
}}

CSS transitions or animations are FORBIDDEN - they will not render correctly.
Tailwind animation class names are FORBIDDEN - they will not render correctly.

Place assets in the

public/

folder at your project root.

Use

staticFile()

to reference files from the

public/

folder.

Add video and audio using

@remotion/media

.
Add images using the

<Img>

component. Use

staticFile()

for files in

public/

or pass a remote URL directly:

tsx

import { Audio, Video } from "@remotion/media";
import { staticFile } from "remotion";

export const MyComposition = () => {
  return (
    <>
      <Video src={staticFile("video.mp4")} style={{ opacity: 0.5 }} />
      <Audio src={staticFile("audio.mp3")} />
      <Img src={staticFile("logo.png")} style={{ width: 100, height: 100 }} />
      <Video src="https://remotion.media/video.mp4" />
    </>
  );
};

To delay content wrap it in

<Sequence>

and use

from

. To limit the duration of an element, use

durationInFrames

<Sequence>

<Sequence>

by default is an absolute fill covering the scene.
For inline content, use

layout="none"

tsx

const Main = () => {
  const {fps} = useVideoConfig();

  return (
    <AbsoluteFill>
      <Sequence name="Background">
        <Background />
      </Sequence>
      <Sequence name="Title" from={30} durationInFrames={60} layout="none">
        <Title />
      </Sequence>
      <Sequence name="Subtitle" from={60} durationInFrames={60} layout="none">
        <Subtitle />
      </Sequence>
    </AbsoluteFill>
  );
}

export const Title = () => {
  const frame = useCurrentFrame();

  return (
    <div
      style={{
        opacity: interpolate(frame, [0, 60], [0, 1], {
          extrapolateRight: "clamp",
          extrapolateLeft: "clamp",
          easing: Easing.bezier(0.16, 1, 0.3, 1),
        }),
      }}
    >
      Title
    </div>
  );
};

export const Subtitle = () => {
  return <div>Subtitle</div>;
};

使用

useCurrentFrame()

和

interpolate()

为属性添加动画。

优先使用

interpolate()

而非

spring()

。

使用

Easing.bezier()

自定义动画时序，包括跳跃式或过冲式运动。如果需要弹簧动画，请使用

Easing.spring()

在Studio中需要具备交互性的HTML元素应使用

Interactive

：将

<div>

替换为

<Interactive.Div>

。为

Interactive

、

Solid

、

Sequence

设置描述性的

name

属性，例如

name="Hero title"

。

tsx

import { useCurrentFrame, Easing, interpolate, Interactive } from "remotion";

export const FadeIn = () => {
  const frame = useCurrentFrame();

  return (
    <Interactive.Div
      name="Title"
      style={{
        opacity: interpolate(frame, [0, 60], [0, 1], {
          extrapolateRight: "clamp",
          extrapolateLeft: "clamp",
          easing: Easing.bezier(0.16, 1, 0.3, 1),
        }),
      }}
    >
      Hello World!
    </Interactive.Div>
  );
};

将

interpolate()

调用内联在

style

属性中。优先使用

scale

、

translate

、

rotate

等CSS属性，而非

transform

。

tsx

// 👍 可在线编辑的关键帧和transform简写形式
style={{
  scale: interpolate(frame, [0, 100], [0, 1]),
  translate: interpolate(frame, [0, 100], ["0px 0px", "100px 100px"]),
  rotate: interpolate(frame, [0, 100], ["20deg", "90deg"]),
}}

// 👎 隐藏值和transform字符串在Studio中更难编辑
const scale = interpolate(frame, [0, 100], [0, 1]);

style={{
  transform: `scale(${scale})`,
}}

禁止使用CSS过渡或动画——它们无法正确渲染。禁止使用Tailwind动画类名——它们无法正确渲染。

将资源放置在项目根目录的

public/

文件夹中。

使用

staticFile()

引用

public/

文件夹中的文件。

使用

@remotion/media

添加视频和音频。使用

<Img>

组件添加图片。对于

public/

中的文件使用

staticFile()

，或直接传入远程URL：

tsx

import { Audio, Video } from "@remotion/media";
import { staticFile } from "remotion";

export const MyComposition = () => {
  return (
    <>
      <Video src={staticFile("video.mp4")} style={{ opacity: 0.5 }} />
      <Audio src={staticFile("audio.mp3")} />
      <Img src={staticFile("logo.png")} style={{ width: 100, height: 100 }} />
      <Video src="https://remotion.media/video.mp4" />
    </>
  );
};

如需延迟内容显示，将其包裹在

<Sequence>

中并使用

from

属性。如需限制元素的时长，使用

<Sequence>

的

durationInFrames

属性。

<Sequence>

默认是覆盖整个场景的绝对填充元素。对于内联内容，使用

layout="none"

。

tsx

const Main = () => {
  const {fps} = useVideoConfig();

  return (
    <AbsoluteFill>
      <Sequence name="Background">
        <Background />
      </Sequence>
      <Sequence name="Title" from={30} durationInFrames={60} layout="none">
        <Title />
      </Sequence>
      <Sequence name="Subtitle" from={60} durationInFrames={60} layout="none">
        <Subtitle />
      </Sequence>
    </AbsoluteFill>
  );
}

export const Title = () => {
  const frame = useCurrentFrame();

  return (
    <div
      style={{
        opacity: interpolate(frame, [0, 60], [0, 1], {
          extrapolateRight: "clamp",
          extrapolateLeft: "clamp",
          easing: Easing.bezier(0.16, 1, 0.3, 1),
        }),
      }}
    >
      Title
    </div>
  );
};

export const Subtitle = () => {
  return <div>Subtitle</div>;
};

Maps

地图

See map.md for choosing between simple static maps, Mapbox maps, and MapLibre maps.

如需在简单静态地图、Mapbox地图和MapLibre地图之间选择，请查看map.md。

Voiceover

旁白

See voiceover.md for adding AI-generated voiceover to Remotion compositions using ElevenLabs TTS.

如需为Remotion合成内容添加AI生成的旁白，请查看voiceover.md，该文档介绍如何使用ElevenLabs TTS实现。

Trimming

剪辑

See trimming.md for trimming patterns - cutting the beginning or end of animations.

如需了解剪辑模式——裁剪动画的开头或结尾，请查看trimming.md。

Embedding Videos

嵌入视频

See embedding-videos.md for advanced knowledge about embedding videos - trimming, volume, speed, looping, pitch.

如需了解嵌入视频的高级知识——剪辑、音量、速度、循环、音调，请查看embedding-videos.md。

Embedding Audio

嵌入音频

See audio.md for advanced audio features like trimming, volume, speed, pitch.

如需了解高级音频功能，如剪辑、音量、速度、音调，请查看audio.md。

Transitions

转场

See transitions.md for scene transition patterns.

如需了解场景转场模式，请查看transitions.md。

Visual and pixel effects

视觉与像素效果

When creating a visual effect, prefer: 1. normal Remotion/HTML/CSS/SVG/filter/blend/mask animation, 2. a listed effect via effects.md, including on HTML rendered through

<HtmlInCanvas>

, 3. a custom

createEffect()

via effects.md when the user asks for a reusable/project-specific effect, 4. custom

<HtmlInCanvas onPaint>

via html-in-canvas.md only if no effect fits.

For light leak overlays, see light-leaks.md. Docs: https://www.remotion.dev/docs/effects

Available effects:

brightness()

contrast()

colorKey()

duotone()

grayscale()

hue()

invert()

saturation()

tint()

linearGradient()

linearGradientTint()

thermalVision()

blur()

linearProgressiveBlur()

radialProgressiveBlur()

zoomBlur()

dropShadow()

glow()

lightTrail()

evolve()

venetianBlinds()

mirror()

scale()

uvTranslate()

xyTranslate()

barrelDistortion()

chromaticAberration()

fisheye()

cornerPin()

wave()

burlap()

emboss()

dotGrid()

halftone()

noise()

noiseDisplacement()

paper()

roughenEdges()

pattern()

pixelate()

pixelDissolve()

scanlines()

speckle()

shine()

shrinkwrap()

vignette()

contourLines()

checkerboard()

halftoneLinearGradient()

gridlines()

whiteNoise()

tvSignalOff()

lines()

rings()

waves()

zigzag()

lightLeak()

starburst()

创建视觉效果时，优先选择以下方案：1. 常规的Remotion/HTML/CSS/SVG/滤镜/混合/遮罩动画；2. effects.md中列出的效果，包括通过

<HtmlInCanvas>

渲染的HTML元素效果；3. 当用户需要可复用或项目专属效果时，通过effects.md自定义

createEffect()

；4. 仅当没有合适效果时，通过html-in-canvas.md自定义

<HtmlInCanvas onPaint>

。

如需漏光叠加效果，请查看light-leaks.md。文档地址：https://www.remotion.dev/docs/effects

可用效果包括：

brightness()

、

contrast()

、

colorKey()

、

duotone()

、

grayscale()

、

hue()

、

invert()

、

saturation()

、

tint()

、

linearGradient()

、

linearGradientTint()

、

thermalVision()

、

blur()

、

linearProgressiveBlur()

、

radialProgressiveBlur()

、

zoomBlur()

、

dropShadow()

、

glow()

、

lightTrail()

、

evolve()

、

venetianBlinds()

、

mirror()

、

scale()

、

uvTranslate()

、

xyTranslate()

、

barrelDistortion()

、

chromaticAberration()

、

fisheye()

、

cornerPin()

、

wave()

、

burlap()

、

emboss()

、

dotGrid()

、

halftone()

、

noise()

、

noiseDisplacement()

、

paper()

、

roughenEdges()

、

pattern()

、

pixelate()

、

pixelDissolve()

、

scanlines()

、

speckle()

、

shine()

、

shrinkwrap()

、

vignette()

、

contourLines()

、

checkerboard()

、

halftoneLinearGradient()

、

gridlines()

、

whiteNoise()

、

tvSignalOff()

、

lines()

、

rings()

、

waves()

、

zigzag()

、

lightLeak()

、

starburst()

。

3D content

3D内容

See 3d.md for 3D content in Remotion using Three.js and React Three Fiber.

如需在Remotion中使用Three.js和React Three Fiber创建3D内容，请查看3d.md。

Sound effects

音效

When needing to use sound effects, load the ./sfx.md file for more information.

如需使用音效，请查看./sfx.md获取更多信息。

Audio visualization

音频可视化

When needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the ./audio-visualization.md file for more information.

如需实现音频可视化（频谱条、波形、低音响应效果），请查看./audio-visualization.md获取更多信息。

Captions

字幕

When dealing with captions or subtitles, load the Remotion Captions skill for more information.

如需处理字幕或副标题，请加载Remotion Captions技能获取更多信息。

Google Fonts

Is the recommended way to load fonts in Remotion. See google-fonts.md for how to load Google Fonts.

这是Remotion中加载字体的推荐方式。如需了解如何加载Google Fonts，请查看google-fonts.md。

Local fonts

本地字体

See local-fonts.md for how to load local fonts.

如需了解如何加载本地字体，请查看local-fonts.md。

GIFs

GIF

See gifs.md for how to display GIFs synchronized with Remotion's timeline.

如需了解如何显示与Remotion时间轴同步的GIF，请查看gifs.md。

Advanced Images

高级图片处理

See images.md for sizing and positioning images, dynamic image paths, and getting image dimensions.

如需了解图片的尺寸调整、定位、动态路径以及获取图片尺寸，请查看images.md。

Lottie animations

Lottie动画

See lottie.md for embedding Lottie animations in Remotion.

如需在Remotion中嵌入Lottie动画，请查看lottie.md。

Advanced timing

高级时序控制

See timing.md for advanced timing with

interpolate

and Bézier easing, and springs.

如需了解使用

interpolate

和贝塞尔缓动、弹簧效果的高级时序控制，请查看timing.md。

Parameterized videos

参数化视频

See parameters.md for making a composition parametrizable by adding a Zod schema.

如需通过添加Zod schema使合成内容可参数化，请查看parameters.md。

Measuring DOM nodes

DOM节点测量

See measuring-dom-nodes.md for measuring DOM element dimensions in Remotion.

如需在Remotion中测量DOM元素尺寸，请查看measuring-dom-nodes.md。

Measuring text

文本测量

See measuring-text.md for measuring text dimensions, fitting text to containers, and checking overflow.

如需测量文本尺寸、使文本适配容器以及检查溢出，请查看measuring-text.md。

Using FFmpeg

使用FFmpeg

For some video operations, such as trimming videos or detecting silence, FFmpeg should be used. Load the ./ffmpeg.md file for more information.

对于某些视频操作，如剪辑视频或检测静音，应使用FFmpeg。如需了解更多信息，请加载./ffmpeg.md。

Silence detection

静音检测

When needing to detect and trim silent segments from video or audio files, load the ./silence-detection.md file.

如需检测并裁剪视频或音频文件中的静音片段，请加载./silence-detection.md。

Dynamic duration, dimensions and data

动态时长、尺寸与数据

See calculate-metadata.md for dynamically set composition duration, dimensions, and props.

如需动态设置合成内容的时长、尺寸和属性，请查看calculate-metadata.md。

Advanced compositions

高级合成

See compositions.md for how to define stills, folders, default props and for how to nest compositions.

如需了解如何定义静态画面、文件夹、默认属性以及嵌套合成内容，请查看compositions.md。

Advanced sequencing

高级序列编排

See sequencing.md for more sequencing patterns - delay, trim, limit duration of items.

如需了解更多序列编排模式——延迟、剪辑、限制元素时长，请查看sequencing.md。

Install modules

安装模块

Use

npx remotion add

to add new packages with the right version:

npx remotion add @remotion/media

This goes for

@remotion/*

packages,

mediabunny

@mediabunny/*

, and

zod

使用

npx remotion add

添加对应版本的新包：

npx remotion add @remotion/media

此命令适用于

@remotion/*

包、

mediabunny

、

@mediabunny/*

以及

zod

。

Previewing markup

预览标记

Only do this if you think the user wants to see the preview.

bash

npx remotion studio --no-open

This will start a long-running process and print the server URL for the preview.
If already started, the URL will be printed.

仅当你认为用户需要查看预览时执行此操作。

bash

npx remotion studio --no-open

这将启动一个长期运行的进程并打印预览服务器的URL。如果已启动，将直接打印URL。

Optional: one-frame render check

可选：单帧渲染检查

You can render a single frame with the CLI to sanity-check layout, colors, or timing.
Skip it for trivial edits, pure refactors, or when you already have enough confidence from Studio or prior renders.

bash

npx remotion still [composition-id] --scale=0.25 --frame=30

At 30 fps,

--frame=30

is the one-second mark (

--frame

is zero-based).

你可以使用CLI渲染单帧，以快速检查布局、颜色或时序。对于简单编辑、纯重构操作，或已通过Studio或之前的渲染获得足够信心时，可跳过此步骤。

bash

npx remotion still [composition-id] --scale=0.25 --frame=30

在30 fps下，

--frame=30

对应第1秒的位置（

--frame

是从0开始计数的）。