timeline-layout-reveal

タイムラインレイアウトのリビール

packages/brand/src/TimelineLayoutReveal.tsx と、その packages/brand/src/Root.tsx への登録を使用します。スクリーンショットは packages/brand/public/timeline-reveal/before.png と after.png に保存します。

キャプチャの一致

packages/jonnys-videos から、指定された構図をキャプチャします。bunx remotion studio --no-open --port=<free-port> で Studio を起動し、表示された URL を開きます。既存のリビールには、RollerSkiCommute-new のフレーム 2025（牛のクローズアップ）を使用します。コンポジションが変更されている場合は、そのフレームに引き続き牛が表示されることを確認します。

承認済みのフレーミングは、デバイススケールファクター 2 の 1280 × 800 CSS ビューポートと、336 ピクセルのタイムラインパネルです。これにより、MacBook のような 16:10 のスクリーンショットになり、タイムラインは元の 480 ピクセルのパネルより 30％短くなります。ユーザーから別のフレーミングを指定された場合は、これらの値を調整します。2 倍のキャプチャには 2560 × 1600 ピクセルが必要です。CSS ビューポートのサイズだけを変更しても不十分です。

キャプチャ間でビューポート、パネルの分割、タイムラインのズーム、スクロール位置、再生ヘッド、選択範囲を同一に保ちます。横方向の全尺が表示されるようズームアウトします。コンポジションのプレビューを表示したままにする場合は Studio のビューポート全体をキャプチャし、指定された場合はタイムラインのみをキャプチャします。ホバーによるフィードバックやツールチップが表示されないよう、ポインターをタイムラインから離します。

コンポジション、タイムラインのアクティビティスキャン、サムネイル、波形の読み込みが完了するまで待ちます。レンダリング遅延ハンドルが空であることだけでは、タイムラインメディアの読み込み完了を確認できません。最終キャプチャを保存する前に、スクリーンショットを確認します。

過去の before 表示

両方のリビジョンでフラグとソースを確認します。現在の main ではトラックがデフォルトで有効になっているため、現在の main でシーケンスアクティビティを無効にしても、元の階段状レイアウトは再現されません。既存の before キャプチャでは、リビジョン 836e5f3597f90cb7b24a5de89b501e89942b0f41 の実験的トラックとシーケンスアクティビティを両方とも無効にしていました。指定された比較に応じて、別のベースラインを選択します。

ベースラインのリビジョンを使用できる既存のチェックアウト、または一時的な管理対象ワークツリーを使用します。新規にチェックアウトする場合は、Studio の起動前に bun install と bunx turbo run make --filter='@remotion/jonnys-videos...' を実行します。CLI の依存関係だけをビルドすると、フォント、ノイズ、レイアウトユーティリティが不足します。

ポートが異なると、ブラウザーのストレージも別になります。両方の Studio でフレーミングと再生ヘッドを明示的に一致させます。ベースラインサーバーを終了して一時的な管理対象ワークツリーをアーカイブする前に、保存済みのスクリーンショットを作業中の brand プロジェクトにコピーします。一時的に変更した設定は元に戻します。依頼があった場合にのみ main から更新します。

リビールと納品

ユーザーから追加コンテンツを求められない限り、2 枚のスクリーンショットレイヤーのみを使用します。before 画像を after 画像の下に配置します。useCurrentFrame() を使って取得した値を基に、インラインの interpolate() で after 画像の cropRight を 1 から 0 までアニメーションさせ、両端でクランプします。ワイプを決定論的にレンダリングし、Studio で編集できるように、CSS アニメーションではなく crop props を使用します。

コンポジションの寸法をスクリーンショットのピクセル寸法に合わせます。既存のリビールは 60 fps で 6 秒です。最初の 1.2 秒は before を表示し、3.8 秒までワイプし、その後は after を表示します。依頼に応じてタイミングを維持または調整します。

remotion-render に従い、packages/brand からレンダリングします。

bunx remotion render src/index.ts TimelineLayoutReveal ../../out/timeline-layout-reveal.mp4 --codec=h264 --crf=16 --image-format=png --pixel-format=yuv420p --concurrency=4

書き出した動画の冒頭、中間、末尾を確認し、プレビューと再生ヘッドの位置が一致したままで、タイムラインだけが変化していることを確認します。変更したソースファイルに対して、対象を絞ったフォーマットチェックと lint チェックを実行します。

スマートフォンで視聴できるようにする場合は、upload-r2 に従い、レンダリングした MP4 を一意なコンテンツハッシュ付きキーでアップロードし、公開 URL を確認して、直接視聴できるリンクを返します。ユーザーが brand 内での保持を求めた場合は、ローカルのスクリーンショットも保持します。このワークフロー自体は、コミット、プッシュ、PR を依頼するものではありません。