背景動画クロスフェード

Implement the following web visual TECHNIQUE as a small, self-contained demo (single HTML file, inline CSS/JS; GSAP via CDN is allowed if it fits the recipe). Invent your own placeholder content (original text/shapes/colors) — do NOT copy any existing site's content or branding.

## Technique: Video Reel Hero (背景動画クロスフェード)

What happens: 2つの本物の動画が、動いたまま静かに溶け替わる。切り替える位置と時間を変え、途中で停止して続きから確認できる。

## Implementation recipe (normative)

2要素のnative videoを同じ矩形へ重ね、両方の最初のデコードが完了するまで画面へ出さない。普段は現在の1本だけを再生し、非表示の動画はpauseする。次の切替準備で先頭へ戻す。現在のvideoの実mediaTimeがdwell秒目に達したら、次の動画をseek(0)して再生を開始する。dwellは2〜3.5秒目、標準3秒目。両方が実際にplayingでseek待ちでなくなってからfade秒で切り替える。fadeは.3〜1.2秒、標準.8秒。切替の進行pはバッファー待ちを除いた実経過秒で進め、opacity=p*p*(3-2*p)とする。現在の映像は不透明な下地として残し、その上の次の映像のopacityだけを0→1へ変えて明るさの落ち込みを防ぐ。完了時に前のvideoを停止し、役割を交換する。背景画像2枚をCSSで動かして動画リールと称しない。片方がwaitingなら両方のvideoと切替RAFを停止し、canplayで再生可能になった後に続きを再開する。12秒を超えたらエラーとして再試行を提示する。再生拒否では成功表示にせず、再生ボタンから再試行する。「リールを停止」は映像と切替の両方を止める。「次のカットへ」は明示再生して切替を始める。「リールを最初に戻す」は両方を先頭へ戻して停止する。途中の停止・画面外・失敗では、現在のカット、実デコード時刻2つ、切替進行をメモリに保持して復元する。非表示から自動再開しない。動き軽減ではクロスフェードを省き、次の動画が再生可能になってから即時切替する。保存と指示書に含むのはdwellとfadeのみ。切替の進行・カット選択・再生時刻・再生意思は保存しない。同じAURALの2つのAI制作映像を共用する。両方とも1920×1088、H.264、音声トラックなし。静止画のズーム、マウス追従画像、GIF、開発画面の録画を動画の代用にしない。映像本来の色と比率を保ち、16pxの余白へobject-fit:containで全体を表示する。次の動画へ替えても画角を勝手にクロップしない。カードは実映像から取り出した高解像度の最初のフレームを示し、「開いて操作」から実演を開く。初期・画面外からの復帰は停止状態。動画のmedia clockを使い、requestVideoFrameCallbackのmediaTimeで表示時刻を保持する。非対応時のみRAFから実currentTimeの変化を読む。loadeddata/seekedの実デコードを待ち、readinessとplayingを別に扱う。NotAllowedError・古いplay Promise・メディアエラー・通信停止を扱い、再生できていない間は再生中と表示しない。読込とseekとbufferingは12秒で期限切れにし、動画を破棄して再試行を提示する。静止見本の読み込み失敗にも12秒期限と再試行を用意する。再試行完了後は再生ボタンへフォーカスを戻す。プレビュー・詳細・比較を開いたら停止状態の操作画面を準備し、外側の開始ボタンを重ねない。再生ボタンは映像のすぐ下に置く。映像部分をIntersectionObserverで監視し、説明や設定だけが見えていても映像が画面外ならpauseする。画面外で再生意思を保持せず、戻っただけでは再開しない。「映像の位置へ戻る」は表示位置だけを戻し、再生は利用者の次の操作で始める。実演全体が画面外、またはタブ非表示ならvideoのsrcを外してload、フレームコールバック・RAF・タイマー・イベント・映像のobserverを破棄する。映像時刻と切替状態はメモリだけに残す。原映像の形状差は実製品の仕様差の証拠に使わない。実案件ではオリジナルまたは許諾済みの映像へ差し替える。見本映像はコードZIPへの同梱を意味せず、公開アセットURLから取得する。 素材: https://motion-palette.pages.dev/video/studies/aural-motion-frame-5d1e36956057.mp4（全体のかたち、2243719 bytes）, https://motion-palette.pages.dev/video/studies/aural-profile-d50be873afe6.mp4（輪郭のつながり、4167205 bytes）。 再試行でも途中位置を取得できないときは「先頭から読み込み直す」で一時的な再生位置だけをリセットし、仕上げの設定は保持する。

## Crossfade between two actual moving video shots

Use two full-resolution native videos with the same contain framing. Load actual first decoded frames before revealing either layer. The native current shot’s media time triggers the transition at the selected dwell position. Reset and start the incoming shot, and begin the smoothstep opacity dissolve only when both required videos can play; do not use a photograph zoom or unrelated CSS clock. Keep the outgoing layer opaque underneath the incoming opacity to avoid a brightness dip. Use the selected fade time as wall-clock seconds of unbuffered transition. Buffering pauses both media clocks and the dissolve; resume only after canplay, with a twelve-second timeout and retry. Stop, tab hiding and viewport exit stop all media and RAF. Resume preserves both shot times, shot identity and the partially completed dissolve. No view-entry autoplay. Provide explicit play/stop, next-cut, first-frame reset and retry controls, and copy the selected dwell/fade values. Reduced motion skips the dissolve while preserving deliberate movie playback. A rejected play request remains blocked with a retryable play button, never a playing success. The two local AI films contain no audio. Persist only dwell and fade, not media time, shot choice, blending progress or playback state. Do not add generic speed, easing, intensity or duration overrides.

## Quality bar

- Runs at 60fps; animate only transform/opacity/filter where possible.
- Make the initial state legible immediately. Preserve the full timing above, including deliberately slow transitions. Repeat only when the recipe calls for a loop; give finite effects a clear ending and replay action.
- Respect prefers-reduced-motion: show a legible resting state without autoplay. Keep every operation available through keyboard and touch; allow deliberate playback of the effect for inspection.
- Difficulty reference: 中. If the recipe mentions specific libraries or shader work, follow it rather than substituting a simpler approach.

## 図鑑で選んだ実演設定（この値を優先）

レシピの標準値より、次の選択値を優先して実装してください。範囲の記述は操作の上限・下限として残します。

- 切り替えを始める位置（各映像の先頭から）: 3.0秒目
- カットが溶け替わる時間: 0.8秒

```json
{
  "dwell": 3,
  "fade": 0.8
}
```

この設定は自動再生を許可するものではありません。動き軽減時は静止から開始してください。