mcpField
R
remotion-best-practices

remotion-best-practices

github.com/guanyang创意与媒体984309 次安装1 天前更新
代码仓库

关于 remotion-best-practices

remotion-best-practices 是为 Remotion 视频项目提供制作指导的 Agent 技能，涵盖动画、媒体资源、合成与渲染检查，并包含针对特定任务的规则。

主要功能

  1. 01提供基于帧的动画指导
  2. 02说明 Remotion 媒体与资源用法
  3. 03提供合成与序列编排指导
  4. 04涵盖音频、字幕和视觉效果规则
  5. 05使用 Studio 预览并渲染静帧

适用场景

  1. 01制作 Remotion 动画场景
  2. 02添加字幕、音频或视觉效果
  3. 03预览布局并检查渲染帧

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/guanyang/open-agent-hub --skill remotion-best-practices

安装后在 Claude Code 中输入/remotion-best-practices确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

rules/
3d.md
animations.md
assets.md
audio-visualization.md
audio.md
calculate-metadata.md
can-decode.md
charts.md
compositions.md
display-captions.md
effects.md
extract-frames.md
ffmpeg.md
fonts.md
get-audio-duration.md
get-video-dimensions.md
get-video-duration.md
gifs.md
google-fonts.md
html-in-canvas.md
images.md
import-srt-captions.md
light-leaks.md
local-fonts.md
lottie.md
mapbox.md
maplibre.md
rules/assets/
charts-bar-chart.tsx
text-animations-typewriter.tsx
text-animations-word-highlight.tsx

详细介绍

适用场景

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

新项目设置

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

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

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

设计视频

在设计视觉场景、布局、宣传视频、动态图形或文字较多的视频之前，请加载 rules/video-layout.md，了解以视频为先的布局和文字尺寸指南。

使用 useCurrentFrame() 和 interpolate() 为属性添加动画。除非明确需要基于物理效果的运动，否则优先使用 interpolate() 而非 spring()。使用 Easing.bezier() 自定义时序，包括跳跃或过冲效果。

对于需要在 Remotion Studio 中编辑的动画，请将 interpolate() 调用放在 style 属性中，并使用单独的 CSS 变换属性（scale、translate、rotate），而不是拼接 transform 字符串。

import { useCurrentFrame, Easing, interpolate, useVideoConfig } 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>;
};

优先使用：

style={{
  scale: interpolate(frame, [0, 100], [0, 1]),
  translate: interpolate(frame, [0, 100], ["0px 0px", "100px 100px"]),
  rotate: interpolate(frame, [0, 100], ["20deg", "90deg"]),
}}

而非：

const scale = interpolate(frame, [0, 100], [0, 1]);

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

禁止使用 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 文件了解更多信息。

视觉和像素效果

创建视觉效果时，优先选择：1. 常规 Remotion/HTML/CSS/SVG/滤镜/混合/蒙版动画，2. 使用 rules/effects.md 中列出的效果，包括通过 <HtmlInCanvas> 渲染的 HTML，3. 当用户需要可复用或特定于项目的效果时，通过 rules/effects.md 使用自定义 createEffect()，4. 仅在没有合适效果时，使用 rules/html-in-canvas.md 中的自定义 <HtmlInCanvas onPaint>。

有关漏光叠加层，请参阅 rules/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()、pattern()、pixelate()、pixelDissolve()、scanlines()、speckle()、shine()、shrinkwrap()、vignette()、contourLines()、checkerboard()、halftoneLinearGradient()、gridlines()、whiteNoise()、tvSignalOff()、lines()、rings()、waves()、zigzag()、lightLeak()、starburst()。

3D 内容

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

高级音频

有关剪辑、音量、速度和音高等高级音频功能，请参阅 rules/audio.md。

动态时长、尺寸和数据

有关动态设置合成时长、尺寸和 props，请参阅 rules/calculate-metadata.md。

高级合成

有关如何定义静帧、文件夹、默认 props 以及嵌套合成，请参阅 rules/compositions.md。

Google Fonts

这是在 Remotion 中加载字体的推荐方式。有关如何加载 Google Fonts，请参阅 rules/google-fonts.md。

本地字体

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

获取音频时长

有关如何使用 Mediabunny 获取音频文件的时长（秒），请参阅 rules/get-audio-duration.md。

获取视频尺寸

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

获取视频时长

有关如何使用 Mediabunny 获取视频文件的时长（秒），请参阅 rules/get-video-duration.md。

GIF

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

高级图像

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

Lottie 动画

有关如何在 Remotion 中嵌入 Lottie 动画，请参阅 rules/lottie.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 架构使合成可参数化，请参阅 rules/parameters.md。

地图

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

旁白

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

评论

支持 Markdown