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> の effects prop に 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 prop を指定してください。

その他の要素には、適切であれば通常の HTML と CSS を優先してください。グループ全体へのポストプロセスが適切で、環境が対応している場合は、グループを <HtmlInCanvas> で囲むことを検討してください。

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

使用可能なエフェクト

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

• 色とトーン：brightness()、colorCorrection()、colorKey()、contrast()、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() エフェクトまたは 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 でシーン独自のタイムラインに移動するには、connected compositions を使用してください。

高度なシーケンス設定

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

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

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

npx remotion add @remotion/media

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

視覚的な確認

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

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