muhammedadnank/Antigravity-Skills

使用时机

当您处理 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 从零开始）。

字幕

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

使用 FFmpeg

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

静音检测

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

音频可视化

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

音效

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

3D 内容

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

高级音频

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

动态时长、尺寸和数据

关于动态设置组合时长、尺寸和属性，请参阅 rules/calculate-metadata.md。

高级组合

关于如何定义静态画面、文件夹、默认属性以及如何嵌套组合，请参阅 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

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

高级图片

关于图片的尺寸和位置控制、动态图片路径以及获取图片尺寸，请参阅 rules/images.md。

光泄漏

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

Lottie 动画

关于在 Remotion 中嵌入 Lottie 动画，请参阅 rules/lottie.md。

Canvas 中的 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 架构使组合可参数化，请参阅 rules/parameters.md。

地图

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

语音旁白

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