remotion-best-practices

适用场景

处理 Remotion 代码时，请使用此技能获取特定领域的知识。

新建项目

在没有现有 Remotion 项目的空文件夹或工作区中，使用以下命令搭建项目：

npx create-video@latest --yes --blank --no-tailwind my-video

将 my-video 替换为合适的项目名称。

设计视频

使用 useCurrentFrame() 和 interpolate() 为属性添加动画。使用 Easing 自定义动画的时间效果。

import { useCurrentFrame, Easing } from "remotion";

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

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: "clamp",
    extrapolateLeft: "clamp",
    easing: Easing.bezier(0.16, 1, 0.3, 1),
  });

  return <div style={{ opacity }}>Hello World!</div>;
};

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

将素材放在项目根目录下的 public/ 文件夹中。

使用 staticFile() 引用 public/ 文件夹中的文件。

使用 <Img> 组件添加图片：

import { Img, staticFile } from "remotion";

export const MyComposition = () => {
  return <Img src={staticFile("logo.png")} style={{ width: 100, height: 100 }} />;
};

使用 @remotion/media 中的 <Video> 组件添加视频：

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

export const MyComposition = () => {
  return <Video src={staticFile("video.mp4")} style={{ opacity: 0.5 }} />;
};

使用 @remotion/media 中的 <Audio> 组件添加音频：

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

export const MyComposition = () => {
  return <Audio src={staticFile("audio.mp3")} />;
};

也可以通过远程 URL 引用素材：

import { Video } from "@remotion/media";

export const MyComposition = () => {
  return <Video src="https://remotion.media/video.mp4" />
};

若要延迟内容的显示，请将其包在 <Sequence> 中，并使用 from。 若要限制元素的时长，请设置 <Sequence> 的 durationInFrames。 <Sequence> 默认会铺满整个画面。若要用于行内内容，请设置 layout="none"。

import { Sequence } from "remotion";

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

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: "clamp",
    extrapolateLeft: "clamp",
    easing: Easing.bezier(0.16, 1, 0.3, 1),
  });

  return <div style={{ opacity }}>Title</div>;
};

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

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

  return (
    <AbsoluteFill>
      <Sequence>
        <Background />
      </Sequence>
      <Sequence from={1 * fps} durationInFrames={2 * fps} layout="none">
        <Title />
      </Sequence>
      <Sequence from={2 * fps} durationInFrames={2 * fps} layout="none">
        <Subtitle />
      </Sequence>
    </AbsoluteFill>
  );
}

视频的宽度、高度、fps 和时长在 src/Root.tsx 中定义：

import { Composition } from "remotion";
import { MyComposition } from "./MyComposition";

export const RemotionRoot = () => {
  return (
    <Composition
      id="MyComposition"
      component={MyComposition}
      durationInFrames={100}
      fps={30}
      width={1080}
      height={1080}
    />
  );
};

也可以动态计算元数据：

import { Composition, CalculateMetadataFunction } from "remotion";
import { MyComposition, MyCompositionProps } from "./MyComposition";

const calculateMetadata: CalculateMetadataFunction<
  MyCompositionProps
> = async ({ props, abortSignal }) => {
  const data = await fetch(`https://api.example.com/video/${props.videoId}`, {
    signal: abortSignal,
  }).then((res) => res.json());

  return {
    durationInFrames: Math.ceil(data.duration * 30),
    props: {
      ...props,
      videoUrl: data.url,
    },
    width: 1080,
    height: 1080,
  };
};

export const RemotionRoot = () => {
  return (
    <Composition
      id="MyComposition"
      component={MyComposition}
      fps={30}
      width={1080}
      height={1080}
      defaultProps={{ videoId: "abc123" }}
      calculateMetadata={calculateMetadata}
    />
  );
};

启动预览

启动 Remotion Studio 以预览视频：

npx remotion studio

可选：单帧渲染检查

可以使用 CLI 渲染单帧，以检查布局、颜色或时间效果是否合理。
对于简单修改、纯重构，或已经对 Studio 或之前的渲染结果有足够把握时，可以跳过此步骤。

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

在 30 fps 下，--frame=30 对应 1 秒处（--frame 从 0 开始计数）。

字幕

处理字幕时，请加载 ./rules/subtitles.md 文件以了解更多信息。

使用 FFmpeg

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

静音检测

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

音频可视化

需要将音频可视化（频谱柱、波形、低音响应效果）时，请加载 ./rules/audio-visualization.md 文件以了解更多信息。

音效

需要使用音效时，请加载 ./rules/sfx.md 文件以了解更多信息。

3D 内容

请参阅 rules/3d.md，了解如何在 Remotion 中使用 Three.js 和 React Three Fiber 创建 3D 内容。

高级音频

请参阅 rules/audio.md，了解裁剪、音量、速度和音高等高级音频功能。

动态时长、尺寸和数据

请参阅 rules/calculate-metadata.md，了解如何动态设置合成时长、尺寸和属性。

高级合成

请参阅 rules/compositions.md，了解如何定义静帧、文件夹和默认属性，以及如何嵌套合成。

Google Fonts

在 Remotion 中，推荐使用 Google Fonts 加载字体。请参阅 rules/google-fonts.md，了解如何加载 Google Fonts。

本地字体

请参阅 rules/local-fonts.md，了解如何加载本地字体。

获取音频时长

请参阅 rules/get-audio-duration.md，了解如何使用 Mediabunny 获取以秒为单位的音频文件时长。

获取视频尺寸

请参阅 rules/get-video-dimensions.md，了解如何使用 Mediabunny 获取视频文件的宽度和高度。

获取视频时长

请参阅 rules/get-video-duration.md，了解如何使用 Mediabunny 获取以秒为单位的视频文件时长。

GIF

有关如何显示与 Remotion 时间轴同步的 GIF，请参阅 rules/gifs.md。

高级图像

有关图像的尺寸和位置设置、动态图像路径以及获取图像尺寸的信息，请参阅 rules/images.md。

漏光效果

有关使用 @remotion/light-leaks 实现漏光叠加效果的信息，请参阅 rules/light-leaks.md。

Lottie 动画

有关在 Remotion 中嵌入 Lottie 动画的信息，请参阅 rules/lottie.md。

在画布中使用 HTML

如果需要将 HTML 渲染到 <canvas> 中，以便通过 <HtmlInCanvas> 应用 2D 或 WebGL 效果，请参阅 rules/html-in-canvas.md。

测量 DOM 节点

有关在 Remotion 中测量 DOM 元素尺寸的信息，请参阅 rules/measuring-dom-nodes.md。

测量文本

有关测量文本尺寸、使文本适应容器以及检查溢出的信息，请参阅 rules/measuring-text.md。

高级序列编排

有关更多序列编排模式的信息，请参阅 rules/sequencing.md，包括延迟、修剪和限制项目时长。

TailwindCSS

有关在 Remotion 中使用 TailwindCSS 的信息，请参阅 rules/tailwind.md。

文本动画

有关排版和文本动画模式的信息，请参阅 rules/text-animations.md。

高级计时

有关使用 interpolate、贝塞尔缓动和弹簧实现高级计时的信息，请参阅 rules/timing.md。

转场

有关场景转场模式的信息，请参阅 rules/transitions.md。

透明视频

有关渲染带透明度视频的信息，请参阅 rules/transparent-videos.md。

修剪

有关修剪模式的信息，请参阅 rules/trimming.md，包括剪掉动画的开头或结尾。

高级视频

有关嵌入视频的进阶知识，请参阅 rules/videos.md，包括修剪、音量、速度、循环和音高。

参数化视频

有关通过添加 Zod schema 使合成可参数化的信息，请参阅 rules/parameters.md。

地图

对于只有少量飞越效果的简单地图，可以考虑使用静态地图图像。 对于带有动画路线或飞越效果的复杂地图，请加载地图规则：rules/maplibre.md

旁白

有关使用 ElevenLabs TTS 为 Remotion 合成添加 AI 生成旁白的信息，请参阅 rules/voiceover.md。

---

致谢与署名

此技能基于 remotion-dev 的出色成果。

原始代码库：https://github.com/remotion-dev/skills

特别感谢 remotion-dev 慷慨贡献开源成果，助力打造了这一技能集合。 由 webconsulting.at 为此技能集合改编