openvidstudio: コンテンツ、アニメーション、エフェクトのベストプラクティス

openvidstudio: コンテンツ、アニメーション、エフェクトのベストプラクティス は何をしますか？

これはRemotionのReactマークアップを作成するためのガイダンスです。 これに関係ない場合は、代わりに「Remotionのベストプラクティス」を読み込んでください。

ユーザーの変更を保持する

ユーザーは会話の外でコードに編集を加える場合があります。

その間に驚くような変更を検出した場合は、上書きせず、意図的なものとみなすか、確認を求めてください。

一般的なルール

アニメーションはuseCurrentFrame()とinterpolate()を使用して駆動してください。
CSSのtransitionやanimationは正しくレンダリングされないため、リファクタリングする必要があります。
Tailwindのアニメーションクラスも正しくレンダリングされないため、リファクタリングする必要があります。

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

マークアップは「Remotionのインタラクティブベストプラクティス」に従って構造化してください。

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

export const FadeIn = () => {
  const frame = useCurrentFrame();

  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プロパティ内にインラインで記述してください。 transformの代わりにscale、translate、rotateのCSSプロパティを使用してください。

// 👍 インライン編集可能なキーフレームとtransformのショートハンド
style={{
  scale: interpolate(frame, [0, 100], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Easing.spring({damping: 200}),
    output: 'perceptual-scale' // `scale`アニメーションでは"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}),
  }),
}}

// 👎 インラインでない値やtransform文字列は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')} />
    </>
  );
};

シーンの例

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

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

  return (
    <AbsoluteFill
      name="Scene"
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white'
      }}
    >
      <Interactive.Div
        name="Title"
        style={{
          opacity: interpolate(frame, [1 * fps, 2 * fps], [0, 1], {
            extrapolateRight: "clamp",
            extrapolateLeft: "clamp",
            easing: Easing.bezier(0.16, 1, 0.3, 1),
          }),
          fontSize: 88
        }}
      >
        Title
      </Interactive.Div>
      <Interactive.Div
        name="Subtitle"
        style={{
          opacity: interpolate(frame, [2 * fps, 3 * fps, 8 * fps, 10 * fps], [0, 1, 1, 0], {
            extrapolateRight: "clamp",
            extrapolateLeft: "clamp",
            easing: [Easing.bezier(0.16, 1, 0.3, 1), Easing.linear, Easing.bezier(0.16, 1, 0.3, 1)],
          }),
          fontSize: 32
        }}
      >
        Subtitle
      </Interactive.Div>
    </AbsoluteFill>
  );
}

遅延、トリミング

ほとんどのコンポーネント（<AbsoluteFill>、<Interactive.*>、<Img>、<AnimatedImage>、<CanvasImage>、<HtmlInCanvas>、<Solid>、<Sequence> from remotion、<Video>、<Audio> from @remotion/media、<Gif>など）は以下のプロパティをサポートしています:

from

<Img from={1 * fps} {/* ... */}/>
<Video from={1 * fps} {/* ... */}/>
<Interactive.Div from={1 * fps} {/* ... */}/>

要素がタイムライン上で表示され始めるフレームです。

durationInFrames

<Img durationInFrames={20 * fps} {/* ... */}/>
<Interactive.Div durationInFrames={20 * fps} {/* ... */}/>

レイヤーがタイムライン上で再生されるフレーム数です。
メディアの場合は、メディアの自然な長さを渡してください: <Video durationInFrames={29.322 * fps}/>

trimBefore

内部クロックを後から開始したいコンポーネントに便利です:

// 最初の2秒の映像をトリミング
<Video trimBefore={2 * fps} {/* ... */} />

// 子要素の`useCurrenFrame()`は`10 * fps`から始まります
<Sequence trimBefore={10 * fps} {/* ... */} />

フォールバック

コンポーネントがこれらのプロパティをサポートしていない場合は、remotionの<Sequence>でラップしてください。<Sequence>はこれらのプロパティを持っています。

• layout="absolute-fill" はSequenceをAbsoluteFillのように動作させます
• layout="none" は「ヘッドレス」モードで、ラッパー要素は使用されません。

地図

動画に地図を含めたい場合は、Remotion Mapsを参照してください。

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

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

マルチシーン動画

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

ナレーション

ElevenLabs TTSを使用してAI生成ナレーションをRemotionコンポジションに追加する方法については、voiceover.mdを参照してください。

動画の埋め込み

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

オーディオの埋め込み

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

動画編集

Remotion Studioで編集可能な動画タイムラインを構造化する方法については、video-editing.mdを参照してください。

クロッピング

コンポーネントの可視矩形をクロップする必要がある場合は、cropping.mdを参照してください。

トランジション

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

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

視覚効果を作成する際は、CSSとHTMLで実現可能か、それともシェーダーが必要かを検討してください。
優先順位:

1. 通常のHTML + CSSまたはその他のウェブ技術
2. エフェクトを要素に直接適用する（<Video>、<Img>）、またはコンテンツを<HtmlInCanvas>でラップする。これもeffectsを受け入れます:

• effects.mdにリストされているエフェクト
• プリセットがない場合、effects.mdのcreateEffect()によるカスタムエフェクト

3Dコンテンツ

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

効果音

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

オーディオ可視化

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

地図

静的マップ、アニメーションルートとマーカー、地理説明、Mapbox、MapLibre、MapTiler、GeoJSON、3D地理フライオーバーについては、Remotion Mapsを読み込んでください。

キャプション

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

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ファイルを読み込んでください。

動的な時間、寸法、データ

コンポジションの時間、寸法、プロパティを動的に設定する方法については、calculate-metadata.mdを参照してください。

高度なコンポジション

スチル、フォルダ、デフォルトプロパティの定義、およびコンポジションのネスト方法については、compositions.mdを参照してください。

高度なシーケンス

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

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

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

npx remotion add @remotion/media

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

マークアップのプレビュー

npx remotion studio --no-open

これにより長時間実行されるプロセスが開始され、プレビュー用のサーバーURLが表示されます。
サーバーが既に起動している場合は、そのURLが表示されます。 特定のコンポジションにアクセスするには、/[composition-id]に移動します。例: http://localhost:3000/MapAnimation

オプション: 1フレームレンダリングチェック

CLIで1フレームをレンダリングして、レイアウト、色、タイミングを簡易チェックできます。
些細な編集、純粋なリファクタリング、またはStudioや以前のレンダリングから既に十分な確信がある場合はスキップしてください。

npx remotion still [composition-id] --scale=0.25 --frame=30

30fpsの場合、--frame=30は1秒の位置です（--frameは0ベース）。