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 プロパティに 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 エディター、.cube 形式の 3D カラーグレーディングに使う lut() については、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 アニメーション

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 フレームまたは複数のフレームを画像として確認することもできます。