remotion-markup

これは Remotion React Markup の作成に関するガイドです。 該当しない場合は、代わりに Remotion Best Practices を読み込んでください。

ユーザーによる変更の保持

ユーザーは会話外でコードを編集することがあります。

その間に予期しない変更が行われていることに気づいた場合は、上書きせず、意図的な変更だと判断するか、確認してください。

一般的なルール

useCurrentFrame() は、必要とする最小のコンポーネント内で使用してください。フレームに依存する音量、タイトル、オーバーレイは、それぞれ独自のコンポーネントに切り出してください。コンポジションやシーン全体を購読させると、関係のない子孫コンポーネントまで毎フレーム再レンダリングされます。タイミング境界をまたいで切り出す場合は既存のフレーム座標を維持し、編集可能な補間はアイテムの props にインラインで記述してください。

コンポジションまたはシーンのコンポーネント内では、from、trimBefore、durationInFrames などのタイミング props を含む、秒からフレームへのすべての計算に useVideoConfig() から取得した fps を使用してください。trimBefore={4 * fps} のように JSX ノード上に式を記述すると、Studio でタイミングを編集でき、コンポジションのフレームレートが変わっても正しく動作します。

useCurrentFrame() と interpolate() を使ってアニメーションを制御してください。
CSS の transition や animation は正しくレンダリングされないため、書き換える必要があります。
Tailwind のアニメーションクラスは正しくレンダリングされないため、書き換える必要があります。

タイミングをカスタマイズするには、Easing.bezier() と Easing.spring() を使用してください。

マークアップの階層を決める前に、 編集可能なタイムライン構造を読んでください。 まず編集単位を選び、次に必要となるトラックや共通のタイミング境界を決めてください。インタラクティブなコンポーネントとその登録方法を含む、完全な例が掲載されています。ソースから編集可能なスタイル、スキーマ、キーフレームについては、Remotion Interactivity を参照してください。

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

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

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

interpolate() の呼び出しは style prop 内にインラインで記述してください。 transform よりも CSS の scale、translate、rotate プロパティを使用してください。

// 👍 Inline editable keyframes and transform shorthands
style={{
  scale: interpolate(frame, [0, 100], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Easing.spring({damping: 200}),
    output: 'perceptual-scale' // For `scale` animations, use "output: 'perceptual-scale'"
  }),
  translate: interpolate(frame, [0, 100], ["0px 0px", "100px 100px"], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Easing.spring({damping: 200}),
  }),
  rotate: interpolate(frame, [0, 100], ["20deg", "90deg"], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Easing.spring({damping: 200}),
  }),
}}

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

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

アセット

アセットはプロジェクトルートの public/ フォルダーに配置してください。 public/ フォルダー内のファイルを参照するには staticFile() を使用してください。

メディアコンポーネント

動画と音声を追加するには、@remotion/media の <Video> と <Audio> を使用してください。
画像を追加するには、<CanvasImage> コンポーネントを使用してください。 アニメーション GIF、APNG、WebP、AVIF 画像を追加するには <AnimatedImage> を使用してください。Chrome を使用しない場合は @remotion/gif を使用してください。 public/ 内のファイルには staticFile() を使用し、リモート URL は直接渡してください。

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

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

コンポジションが主に動画または音声クリップのタイムラインで構成されている場合は、ソース構造を決める前に video-editing.md を読んでください。

遅延、トリミング

タイミング境界を選ぶにはシーケンスを、対応している props と操作の順序については タイミング propsを参照してください。

マップ

動画にマップを含める場合は、Remotion Maps を参照してください。

テキストのハイライトと注釈

テキストのハイライト（ハイライトマーカー）、円、下線、取り消し線、打ち消し線、ボックスについては、text-highlights.md を参照してください。

複数シーンの動画

複数のシーンが続く動画を作成する場合は、multi-scene-video.md を参照してください。

接続されたコンポジション

シーンやグループに独自の編集可能なタイムラインが必要な場合、または Studio のプリコンポーズリクエストに対応する場合は、接続されたコンポジションを読んでください。 切り出し、登録、継承されるスタイル、および親ビューと単独ビューの両方での検証について説明しています。

ボイスオーバー

ElevenLabs TTS を使って Remotion のコンポジションに AI 生成のボイスオーバーを追加する方法については、voiceover.md を参照してください。

動画の埋め込み

トリミング、音量、速度、ループ、ピッチなど、動画の埋め込みに関する高度な知識については、embedding-videos.md を参照してください。

音声の埋め込み

トリミング、音量、速度、ピッチなどの高度な音声機能については、audio.md を参照してください。

クロッピング

コンポーネントの表示領域をクロップする場合は、cropping.md を参照してください。

トランジション

シーンのトランジションパターンについては、transitions.md を参照してください。

モーションブラー

モーションブラーや移動の残像を追加するときは、推奨される HTML-in-canvas の手法、プレビュー要件、代替方法について、motion-blur.md をお読みください。

ビジュアルエフェクトとピクセルエフェクト

ビジュアルエフェクトを追加するときは、まずエフェクトを適用する要素またはグループを特定してください。 対象のコンポーネントが effects に対応しており、以下の組み込みエフェクトが要件に合う場合は、CSS で近似するよりも、そのエフェクトを優先してください。たとえば、ビネットを特定の <Video> に適用する場合は、その <Video> の effects プロパティに vignette() を直接指定してください。

以下のコンポーネントは effects を直接受け付けます。

インポート元	コンポーネント
remotion	<Img>、<CanvasImage>、<AnimatedImage>、<Solid>、<HtmlInCanvas>
@remotion/media	<Video>
@remotion/gif	<Gif>
@remotion/rive	<RemotionRiveCanvas>
@remotion/shapes	<Arrow>、<Callout>、<Circle>、<Ellipse>、<Heart>、<Pie>、<Polygon>、<Rect>、<Spark>、<Star>、<Triangle>

通常の HTML 要素、<Interactive.*> DOM ラッパー、<AbsoluteFill>、<Sequence> は effects を直接受け付けません。これらのコンテンツにエフェクトを適用するには、<HtmlInCanvas> で囲み、そのラッパーに effects プロパティを指定してください。

それ以外の要素では、適切な場合は通常の HTML と CSS を優先してください。グループ全体への後処理が適切で、環境が対応している場合は、グループを <HtmlInCanvas> で囲むことを検討してください。

エフェクトを適用する前に、インポート方法、パラメーター、セットアップについて effects.md をお読みください。組み込みエフェクトが要件に合わない場合に createEffect() で再利用可能なカスタムエフェクトを作成する方法も説明しています。

使用可能なエフェクト

@remotion/effects の組み込みエフェクト：

• 色とトーン：brightness()、colorCorrection()、colorKey()、contrast()、curves()、duotone()、exposure()、grayscale()、hue()、invert()、levels()、linearGradient()、linearGradientTint()、lut()、saturation()、shadowsHighlights()、thermalVision()、tint()、vibrance()、whiteBalance()。
• ぼかしと残像：blur()、lightTrail()、linearProgressiveBlur()、radialProgressiveBlur()、regionBlur()、zoomBlur()。
• ライティング：dropShadow()、longShadows()、glow()、lightLeak()、shine()、starburst()、vignette()。
• ゆがみと変形：barrelDistortion()、chromaticAberration()、cornerPin()、fisheye()、mirror()、noiseDisplacement()、scale()、skew()、tile()、uvTranslate()、wave()、xyTranslate()。
• テクスチャとパターン：burlap()、checkerboard()、contourLines()、dotGrid()、emboss()、flannel()、gridlines()、halftone()、halftoneLinearGradient()、lines()、liquidContours()、noise()、paper()、pattern()、rings()、scanlines()、speckle()、tvSignalOff()、waves()、whiteNoise()、zigzag()。
• エッジ：outline()、roughenEdges()、shrinkwrap()、tear()。
• ピクセル化とトランジション：evolve()、linearProgressivePixelate()、pixelate()、pixelDissolve()、radialProgressivePixelate()、venetianBlinds()。

色補正

colorCorrection() による基本的な調整、levels() または curves() によるトーンマッピング、それぞれの Studio エディター、lut() を使った 3D .cube カラーグレーディングについては、color-correction.md をお読みください。

3Dコンテンツ

Three.js と React Three Fiber を使用した Remotion の 3Dコンテンツについては、./3d.md を参照してください。

効果音

効果音を使用する場合は、詳しくは ./sfx.md ファイルを読み込んでください。

オーディオの可視化

オーディオを可視化する場合（スペクトラムバー、波形、低音に反応するエフェクトなど）は、詳しくは ./audio-visualization.md ファイルを読み込んでください。

マップ

静的なマップ、アニメーション付きのルートやマーカー、地理情報の解説、Mapbox、MapLibre、MapTiler、GeoJSON、または 3D 地理情報のフライオーバーについては、Remotion Maps を読み込んでください。

キャプション

キャプションや字幕を扱う場合は、詳しくは Remotion Captions スキルを読み込んでください。

アラビア語と右から左に書くテキスト

アラビア語、ペルシア語、ウルドゥー語、またはヘブライ語のテキストについては、arabic-text.md をお読みください。基本の方向を設定し、単語単位でアニメーションさせ、文字を分割する場合は文字同士がつながった状態を保つようにしてください。

Google Fonts

Remotion でフォントを読み込む際に推奨される方法です。Google Fonts の読み込み方法については、google-fonts.md を参照してください。

ローカルフォント

ローカルフォントの読み込み方法については、local-fonts.md を参照してください。

GIF

Remotion のタイムラインと同期した GIF の表示方法については、gifs.md を参照してください。

高度な画像処理

画像のサイズ設定や配置、動的な画像パス、画像サイズの取得については、images.md を参照してください。

Lottie アニメーション

Remotion に Lottie アニメーションを埋め込む方法については、lottie.md を参照してください。

タイミング

interpolate() のタイミングに関するその他の手法については、timing.md を参照してください。

パラメーター化された動画

Zod スキーマを追加してコンポジションをパラメーター化する方法については、parameters.md を参照してください。

DOM ノードの計測

Remotion で DOM 要素の寸法を計測する方法については、measuring-dom-nodes.md を参照してください。

テキストの計測

テキストの寸法の計測、コンテナーに合わせたテキストの調整、オーバーフローの確認については、measuring-text.md を参照してください。

FFmpeg の使用

動画のトリミングや無音の検出など、一部の動画処理には FFmpeg を使用してください。詳しくは ./ffmpeg.md ファイルを読み込んでください。

無音の検出

動画または音声ファイルから無音区間を検出してトリミングする場合は、./silence-detection.md ファイルを読み込んでください。

動的なデュレーション、サイズ、データ

コンポジションのデュレーション、サイズ、props を動的に設定する方法については、calculate-metadata.md を参照してください。

コンポジションと静止画

<Composition> または <Still> 要素を登録する前に、ソースから編集できる登録、フォルダー、デフォルトの props、ネストについて compositions.md をお読みください。Studio でシーン独自のタイムラインに移動するには、接続されたコンポジション を使用してください。

高度なシーケンス設定

シーケンス設定のパターン（遅延、トリミング、アイテムのデュレーション制限）については、sequencing.md を参照してください。

モジュールのインストール

適切なバージョンの新しいパッケージを追加するには、npx remotion add を使用してください。

npx remotion add @remotion/media

これは @remotion/* パッケージ、mediabunny、@mediabunny/*、zod、@huggingface/transformers に適用されます。

ビジュアルチェック

Remotion Studio を開いて、視覚的な変更を確認してください。 タイムラインの構造を変更した場合は、コンポジション全体と接続されたコンポーネントを確認し、表示されるレイヤー、カットのタイミング、同期されたコンテンツを検証してください。

レンダリングを使用して、1 フレームまたは複数フレームを画像として確認することもできます。