スクロールで、動画を撫でるように再生する。

この演出について

説明

セクションを ScrollTrigger で pin し、そのセクション内のスクロール進捗（0〜1）に video.duration を掛けた値を目標時刻とする。毎フレーム current += (target - current) * 0.15 のlerpで video.currentTime を滑らかに追従させることで、コマ送りではなく「撫でるような」スクラブ感を出す。 video.seeking 中は新たなseekを積まないようガードしている。

動画素材の出典

flower.mp4 はMDN Web Docsが配布するCC0（パブリックドメイン相当）のサンプル動画。 interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4 から取得（約1.1MB）。案件投入時は同じ手法でクライアント提供動画や他のCC0/自社撮影素材に差し替える。

元ref

ref-002 viktoroddy モーションチュートリアル（LP/references/ref-002-viktoroddy-motion-tutorial.md）

案件への移植メモ

demos/scroll-video-scrub/main.ts の [data-video-scrub] ブロックを、案件の src/animations/<パターン名>.ts に init 関数として切り出し、 src/animations/index.ts に登録する。動画ファイルは軽量な mp4（h264, 5〜10MB程度まで）を推奨。 モバイルでの自動再生制限を避けるため muted / playsinline は必須。