remotion-best-practices

使用する場面

Remotion のコードを扱う際は、ドメイン固有の知識を得るために、このスキルを使用してください。

新しいプロジェクトのセットアップ

既存の Remotion プロジェクトがない空のフォルダーまたはワークスペースでは、次のコマンドを使用してプロジェクトを作成してください。

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

my-video を適切なプロジェクト名に置き換えてください。

動画のデザイン

ビジュアルシーン、レイアウト、プロモーション動画、モーショングラフィックス、テキストが多い動画をデザインする前に、動画を優先したレイアウトとテキストサイズのガイダンスを確認するため、rules/video-layout.md を読み込んでください。

useCurrentFrame() と interpolate() を使用してプロパティをアニメーションさせてください。物理ベースの動きが明示的に必要な場合を除き、spring() よりも interpolate() を優先してください。跳ねる動きやオーバーシュートする動きなど、タイミングをカスタマイズするには Easing.bezier() を使用してください。

Remotion Studio で編集可能なアニメーションにするには、interpolate() の呼び出しを style プロパティ内に記述し、transform 文字列を組み立てる代わりに個別の CSS 変形プロパティ（scale、translate、rotate）を使用してください。

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/ フォルダーに配置してください。

public/ フォルダー内のファイルを参照するには staticFile() を使用してください。

画像は <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

任意：1 フレームのレンダリング確認

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 コンテンツ

Three.js と React Three Fiber を使って Remotion で 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

Remotion のタイムラインと同期して GIF を表示する方法については、rules/gifs.md をご覧ください。

高度な画像

画像のサイズ設定と配置、動的な画像パス、画像の寸法の取得については、rules/images.md をご覧ください。

Lottie アニメーション

Lottie アニメーションを Remotion に埋め込む方法については、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を参照してください。