コードを書かずに、スクロールで3D動画が動く“高級LP”を作る完全ガイド【完成見本あり】

winget install OpenJS.NodeJS.LTS
winget install Git.Git
winget install Python.Python.3.12

brew install node git python

npm install -g @anthropic-ai/claude-code

Windows :  C:\Users\あなた\Desktop\3d-website
Mac     :  ~/Desktop/3d-website

3d-website/            ← このフォルダを作る
├─ index.html          ← サイト本体（AIが作成）
└─ assets/             ← 画像・動画などの素材
   ├─ hero.mp4         ← ヒーロー動画
   ├─ p1.png / p2.png  ← 商品画像
   └─ ...              ← 各章の動画・画像

cd 3d-website
claude

この 3d-website フォルダに、1枚もののランディングページ（index.html）を新しく作って。まずヒーローセクションだけ。高さは 500vh にして、スクロール中に背景動画をコマ送り（スクラブ）再生できる余白を確保したい。今は背景は真っ白でOK、動画は後で足す。中央に大きな見出しと短いサブコピー、上部にナビゲーションバー。スマホ幅ではナビをハンバーガーメニューに畳んで。

白背景のスタジオで、こちらへ片手をまっすぐ差し出している日本人女性のハイエンドな写真集風ビューティー写真。16:9の横長（ワイド）構図で、人物は画面のやや右寄り、左側に余白。25歳前後・はっきり成人と分かる大人っぽく華のある超美人、左右対称の整った小顔、澄んだ大きな瞳、透明感のある白い肌、艶やかなミディアム〜ロングの黒髪、上品なメイク、こちらを見つめる魅力的な微笑み。白い長袖のハイネック（タートルネック）のニットトップス（袖は手首までしっかりある長袖）。差し出した手は指を軽く広げ、シルバーのリングを数本。【顔にしっかりピントを合わせ、瞳・まつげ・肌の質感までくっきり鮮明に描写する。顔は絶対にぼかさない】。手は自然に写す程度でよい。継ぎ目のない純白背景、ソフトボックスでハイキーに明るく、写真集の表紙のようなクオリティ、顔が主役なので被写界深度は深めにして画面全体をシャープに（特に顔はパキッとくっきりピントを合わせる）、余白多め、超高精細フォトリアル。

【添付画像とまったく同じ人物・同じ顔・同じ髪型・同じ白い長袖のハイネックのトップス（袖の長さも手首までの長袖のまま）・同じ純白背景・同じライティング・同じ16:9横長のレイアウトで】手だけを自然に下ろした状態にしてください。差し出していた手を体の横に下ろし、リラックスして正面を見て微笑む立ち姿。顔にしっかりピントを合わせてくっきり鮮明に（顔はぼかさない）。人物・服・背景・画角・写真の質感は添付画像と完全に一致させ、変えるのは「手の位置（伸ばす→下ろす）」だけ。超高精細フォトリアル、写真集風、16:9横長。

白背景のスタジオで、女性が下ろしていた手を、こちらへゆっくり優雅に差し出していく。上質なブランドPVのような、なめらかでシネマティックなスローモーション。柔らかな微笑みを保ったまま、瞳はまっすぐこちらを見つめ、髪と体はごく自然に微かに揺れる程度。服は白い長袖のハイネックのままで、袖の長さ・形・デザインは開始フレームから一切変えない。顔立ち・髪型・アクセサリー・純白の背景・ライティングも“同一人物”として完全に一貫させ、別人化や破綻を起こさない。カメラは固定でズームやパンはせず、動くのは腕と手だけ。全体を高精細でクリーンに。

assets/hero.mp4 を、スクロール・スクラブ用にキーフレームを詰めて再エンコードして。5フレームごとにキーフレーム、音声は削除、web最適化（faststart）で。元の hero.mp4 は残して、出力は assets/hero_scrub.mp4 に。ffmpeg で実行して。

ヒーローに背景動画（assets/hero_scrub.mp4）を敷いて、スクロールでスクラブ再生して。仕様は次の通り：
(1) セクションは高さ500vh、内側の動画ステージは position:sticky; top:0; height:100vh; で画面に貼り付ける。動画は object-fit:cover。
(2) スクロール進捗（0〜1）を計算して video.currentTime にマップする。
(3) 「シーク・ガード」を入れる：seeked イベントで前の頭出し完了を検知し、完了するまで次の currentTime 代入をしない。現在位置との差が0.033秒以下なら代入しない。requestAnimationFrame で回す。
(4) 動画は muted playsinline preload="auto"。スマホでも動くように。
実装したらプレビューして、スクロールでヌルヌル動くか確認して。

ヒーローのテキストをセクション下部に寄せて、動画の被写体（手や顔）と重ならないようにして。下に8vhくらいの余白。スマホでも読めるサイズに。

ECサイト用の商品写真を3種類作って。白背景の正方形構図、柔らかいスタジオ照明、中央に商品、余白多め、高解像度、3枚とも同じトーンで統一。商品はミニマルでモダンなシルバーのアクセサリー（1枚目：リング、2枚目：ピアス、3枚目：ネックレス）。

index.html のヒーローの下に、商品を魅せる「COLLECTION」セクションを追加して。イメージは“ターンテーブル型のデプス・カルーセル”——円卓の縁に商品カードが並び、スクロールで卓が回って、商品が1枚ずつ中央の主役に入れ替わる高級な演出。マウスホバーでは動かさない（ホバー追従はカクつくので使わない）。スクロールで動かすのが肝。次の仕様でなめらかに実装して：

・ピン留め：セクションは高さ約400vh。内側のステージを position:sticky; top:0; height:100vh に固定し、この区間の縦スクロール量（0〜1）でカルーセルを送る。ステージは perspective 1200px 前後・perspective-origin 50% 45%・preserve-3d。
・【いちばん重要：なめらかさ】requestAnimationFrame で“毎フレーム”回す常時ループにして、生のスクロール値をそのまま使わず、慣性（p += (raw − p) * 0.1 のような線形補間）で追従させる。こうすると指を止めても“ヌルッ”と減速して止まり、絶対にカクつかない。
・ターンテーブル配置：カード i の卓上角度 θ＝（i − 進捗×(枚数−1)）×約55°。位置は x＝sin(θ)×半径、奥行き z＝(cos(θ)−1)×半径（正面ほど手前、脇へ行くほど奥へ引っ込む）。中央（θ≈0）のカードが最大・最も明るく・くっきり・手前。両脇は小さく暗く（brightnessを下げ）、わずかにぼかす（被写界深度風）。卓の外（±2枚ぶんより外）は非表示。
・スクロールで卓が回り、商品が順に中央の主役へ。各カードに商品名と価格を重ねる。
・転換の瞬間だけ、カード背後を巨大なアウトライン文字（次の商品名）が左右に横切る（中間でふわっと最大、両端でフェード）。
・スクロール速度に連動した軽い残像ブラー（速く送るほど少しブレる／段階が変わった時だけ filter を書いて軽く）。
・商品画像は白背景なので、カード自体に白いパネル背景は敷かず、画像を角丸＋影だけで見せる。床の映り込み（リフレクション）を入れる場合は“下方向にごく短く・強めにフェード・低い不透明度”にして、暗い背景の上で「白い箱」に見えないようにする（うまく馴染まなければ映り込みは無しでOK）。商品名・価格は、映り込みや白い箱の上ではなく必ずセクションの背景（暗い面）の上に置く。
・章内に縦の進捗ドットを置いて、いま中央の商品をハイライト。
・スマホでも指スクロールで同じように滑らかに送れるように（横幅で崩れない）。マウスホバー依存の演出は入れない。

商品は以下の3つ、画像は assets フォルダにある：
1. Silver Ring "LUNA" / ¥18,000 / assets/p1.png
2. Silver Pierce "STELLA" / ¥14,000 / assets/p2.png
3. Silver Necklace "AURORA" / ¥24,000 / assets/p3.png
既存のヒーロー動画スクラブとは干渉しない独立処理にして。できたらプレビューして。

assets/sakura.mp4 を、Web用に軽く整えて。12秒前後にトリム、長辺1920pxにリサイズ、音声は削除、faststartで。出力は assets/sakura_web.mp4 に。ffmpegで実行して。

商品カルーセルの下に「文字マスク」の章を追加して。ポイントは、どのスクロール位置でも動画が画面いっぱいに見えること。仕様は次の通り：
・章はピン留め区間（高さ450vh程度）。内側のステージは position:sticky; top:0; width:100vw; height:100vh で、常に画面ぴったりに固定する。
・動画（assets/sakura.mp4。Web用に軽量化したなら sakura_web.mp4）は、このステージ全体を“ずっと”覆う固定の背景にする：position:absolute; inset:0; width:100%; height:100%; object-fit:cover、muted playsinline loop preload="metadata" poster付き。動画そのものは動かさない・拡大しない（常に全画面を覆ったまま）。
・その動画の上に SVG の <mask> を重ねる：黒い背景に、白い巨大な「JAPAN」文字。白＝動画が見える／黒＝白い下地で隠れる。これで文字の内側だけ動画が透ける。
・スクロール進捗0→1に応じて、マスクの文字グループ“だけ”を transform: scale(1→40) で拡大する。拡大の中心（transform-origin）は「A」の穴（カウンター）の中心に固定して、“Aの中へダイブ”していくようにする。
・拡大が進むと「A」の内側が画面いっぱいに広がり、終盤（進捗0.8以降）はマスクの白がフレーム全体を覆って、動画が全画面でクリアに見える状態にする。文字が中途半端に切れて白い余白ばかり残る状態が続かないよう、ダイブは終盤にかけて加速（イージング）させて一気に抜ける。
・全画面になったら少しホールドしてから、次の章へクロスフェード。
・動きは requestAnimationFrame＋慣性でなめらかに。既存のヒーロー動画スクラブや商品カルーセルとは干渉しない独立処理にして。スマホ幅では文字を短く（例：JPN）してマスク面積を確保。
できたらプレビューして、白い余白だらけの中途半端な状態にならないか、動画が常に画面いっぱいに見えるかを確認して。

3d-website/
├─ index.html
└─ assets/
   ├─ cinematic.mp4          ★完成した本編（サイトで使う・ステップ④）
   ├─ cinematic_poster.jpg   ★本編の表紙画像（ステップ④）
   └─ cinema/                シネマの素材置き場（作業用フォルダ・新規作成）
      ├─ master.png          基準顔 1枚（ステップ①）
      ├─ s01.png 〜 s12.png   季節の12シーン “画像”（ステップ②／.png）
      └─ m01.mp4 〜 m11.mp4   モーフ “動画” 11本（ステップ③／.mp4）

日本人女性のポートレート写真。20代半ば、清楚で華のある美人、色白でなめらかな肌、切れ長で澄んだ瞳、通った鼻筋、艶やかな黒髪をゆるくまとめ髪にして和の髪飾り（かんざし）。上品でナチュラルなメイク、やわらかな微笑み。顔立ちがはっきり分かる正面〜やや斜め、胸から上。背景は柔らかい無地、シネマティックで柔らかい光、超高精細のリアルな写真、16:9 横。

【この添付画像の女性と同一人物・まったく同じ顔・同じ髪型で】＋（着物の色）＋（情景の描写）＋シネマティックで夢幻的、浅い被写界深度、フィルム調、超高精細のリアルな写真、16:9 横。

■ s01（人物なし）
巨大なたんぽぽの綿毛のクローズアップ。夢のような野原に、ほどけた綿毛が朝の風に舞う。背景に赤い花の柔らかいボケ、霧のかかった逆光。シネマティックで夢幻的、浅い被写界深度、フィルム調の落ち着いた色、超高精細のリアルな写真、16:9 横。人物は写さない。

■ s02（master画像を添付）
【この添付画像の女性と同一人物・まったく同じ顔・同じ髪型で】赤い着物を着た日本人女性が、たんぽぽの綿毛が一面に広がる野原に立っている。髪と袖が風になびき、綿毛が周囲に舞う。遠くを柔らかく見つめる。暖かいヘイズのかかった逆光、シネマティックで夢幻的な雰囲気、浅い被写界深度、フィルム調の落ち着いた色、超高精細のリアルな写真、16:9 横。

■ s03（master画像を添付）
【この添付画像の女性と同一人物・まったく同じ顔・同じ髪型で】白と金の華やかな着物を着た日本人女性が、夜祭りの中で踊り出す直前のポーズをとっている。背後にお面や提灯の暖かいボケ、長い袖が揺れる。暖かい祭りの灯り、シネマティックで夢幻的な雰囲気、浅い被写界深度、フィルム調、超高精細のリアルな写真、16:9 横。

■ s04（master画像を添付）
【この添付画像の女性と同一人物・まったく同じ顔・同じ髪型で】藍色の着物を着た日本人女性が、霧の立ちこめる竹林に立ち、目を閉じて顔を上に向けている。青い花びらが静かに舞い落ちる。静謐で涼やかな光、シネマティックで夢幻的な雰囲気、浅い被写界深度、フィルム調、超高精細のリアルな写真、16:9 横。

■ s05（master画像を添付）
【この添付画像の女性と同一人物・まったく同じ顔・同じ髪型で】華やかな花柄の着物を着た日本人女性が、浅く張った水面の上に裸足で立っている。桜の花びらが渦を巻き、足元に波紋と反射が広がる。夢のようなパステルの光、シネマティックで夢幻的な雰囲気、浅い被写界深度、フィルム調、超高精細のリアルな写真、16:9 横。

■ s06（master画像を添付）
【この添付画像の女性と同一人物・まったく同じ顔・同じ髪型で】着物を着た日本人女性が、青空の下の草の丘に立っている。上空に赤い鯉のぼりと和凧が舞い、風が草と袖を揺らす。鮮やかな昼光、ややローアングル、シネマティックで夢幻的な雰囲気、浅い被写界深度、超高精細のリアルな写真、16:9 横。

■ s07（master画像を添付）
【この添付画像の女性と同一人物・まったく同じ顔・同じ髪型で】茶と赤の着物を着た日本人女性が回転し、袖が大きく広がる瞬間。破れた和紙と花びらが渦状に飛び散る。霧越しの劇的な逆光、絵画的でシネマティックな雰囲気、浅い被写界深度、フィルム調、超高精細のリアルな写真、16:9 横。

■ s08（master画像を添付）
【この添付画像の女性と同一人物・まったく同じ顔・同じ髪型で】淡い色の着物を着た日本人女性が、開いた扇子を顔の前に構えている。霧のかかった森に花びらと光の粒が漂う。金色のリムライト、シネマティックで夢幻的な雰囲気、浅い被写界深度、フィルム調、超高精細のリアルな写真、16:9 横。

■ s09（master画像を添付）
【この添付画像の女性と同一人物・まったく同じ顔・同じ髪型で】髪を結い上げ花柄の着物を着た日本人女性の横顔。背後に赤い和傘の柔らかいボケ、花びらが舞う。夕陽の暖かい逆光、シネマティックで夢幻的な雰囲気、浅い被写界深度、フィルム調、超高精細のリアルな写真、16:9 横。

■ s10（master画像を添付）
【この添付画像の女性と同一人物・まったく同じ顔・同じ髪型で】着物を着た日本人女性が夕暮れの空を見上げている。光る天灯（スカイランタン）が昇り、暖かい火の粉と赤い提灯が周囲に舞い、瞳に映り込む。幻想的な暖色の輝き、シネマティックで夢幻的な雰囲気、浅い被写界深度、超高精細のリアルな写真、16:9 横。

■ s11（master画像を添付）
【この添付画像の女性と同一人物・まったく同じ顔・同じ髪型で】着物を着た日本人女性の横顔が、花火と提灯のボケが咲く夜空を背にシルエット気味に浮かぶ。火の粉が舞い、髪が風にそよぐ。シネマティックな夜の雰囲気、浅い被写界深度、フィルム調、超高精細のリアルな写真、16:9 横。

■ s12（人物なし）
夕暮れのたんぽぽ野原。手前に大きなたんぽぽ（ソフトフォーカス）が立ち、綿毛が風に流れていく。背後に赤い花と暖かいボケ。穏やかで余韻のある締めの雰囲気、シネマティックで夢幻的、浅い被写界深度、フィルム調、超高精細のリアルな写真、16:9 横。人物は写さない。

A single continuous cinematic shot. The camera slowly pushes in as the scene naturally transitions; gentle, realistic motion — a soft breeze, drifting petals, subtle light bloom. Keep the same woman, same face throughout. No morphing or "transforming" look — a natural, filmic scene change.

■ m01｜s01→s02（たんぽぽ → 赤い着物）／綿毛を抜けるプッシュイン
[A] The camera slowly pushes in past the dandelion as a gust carries a veil of white seeds drifting across the lens; as the seeds clear, a woman in a red kimono is standing in the same field, softly lit. natural gust of seeds across the lens, gentle grounded dolly-in, cinematic Japanese art film, elegant traditional kimono, ethereal atmosphere, soft volumetric backlight and haze, muted filmic color grade, delicate film grain, 16:9 horizontal, ultra detailed, 4k
[B] Shallow focus rests on the dandelion in the foreground; the focus gently shifts past it into the field behind, where a woman in a red kimono comes into clarity as seeds drift by. natural rack focus through drifting seeds, believable, cinematic Japanese art film, elegant traditional kimono, ethereal atmosphere, soft volumetric backlight and haze, muted filmic color grade, delicate film grain, 16:9 horizontal, ultra detailed, 4k

■ m02｜s02→s03（赤い着物 → 夜祭り）／動きに合わせたウィップパン
[A] The woman turns and the camera follows her motion with a soft whip pan that blurs into streaks of warm light, then settles on a dancer in a white-and-gold kimono at a night festival, lanterns glowing behind. motivated whip-pan following her motion, natural motion blur, cinematic Japanese art film, elegant traditional kimono, ethereal atmosphere, soft volumetric backlight and haze, muted filmic color grade, delicate film grain, 16:9 horizontal, ultra detailed, 4k
[B] Warm festival lantern light blooms softly and washes across the frame; as the glow settles, the field has given way to a dancer in a white-and-gold kimono among lanterns and masks. natural light-bloom wash, grounded, cinematic Japanese art film, elegant traditional kimono, ethereal atmosphere, soft volumetric backlight and haze, muted filmic color grade, delicate film grain, 16:9 horizontal, ultra detailed, 4k

■ m03｜s03→s04（夜祭り → 竹林）／連続したクレーン移動
[A] The camera tilts up past the floating festival lanterns into the night sky, then gently cranes down into a misty bamboo forest where a woman in an indigo kimono looks up at soft light. one continuous crane move up and over, natural, cinematic Japanese art film, elegant traditional kimono, ethereal atmosphere, soft volumetric backlight and haze, muted filmic color grade, delicate film grain, 16:9 horizontal, ultra detailed, 4k
[B] A drift of festival haze and mist rolls across the foreground; as it thins, the warm festival has quietly given way to a cool misty bamboo forest with a woman in an indigo kimono. natural mist-roll transition, believable, cinematic Japanese art film, elegant traditional kimono, ethereal atmosphere, soft volumetric backlight and haze, muted filmic color grade, delicate film grain, 16:9 horizontal, ultra detailed, 4k

■ m04｜s04→s05（竹林 → 水面）／下へのクレーン
[A] The camera cranes downward past drifting blue petals toward the forest floor, which opens onto a still sheet of water where a woman in a floral kimono walks barefoot, petals settling on the surface. continuous downward crane, natural, cinematic Japanese art film, elegant traditional kimono, ethereal atmosphere, soft volumetric backlight and haze, muted filmic color grade, delicate film grain, 16:9 horizontal, ultra detailed, 4k
[B] The camera tilts down to the forest mirrored in still water; holding on the reflection, it settles as a woman in a floral kimono steps across the water's surface, cherry petals swirling. natural tilt into the reflection, grounded, cinematic Japanese art film, elegant traditional kimono, ethereal atmosphere, soft volumetric backlight and haze, muted filmic color grade, delicate film grain, 16:9 horizontal, ultra detailed, 4k

■ m05｜s05→s06（水面 → 丘の上・鯉のぼり）／水から空へ上昇
[A] The camera lifts from the water's surface, tilting up to the open blue sky, then settling on a woman in kimono on a sunny grassy hilltop, a red koi-fish streamer rippling in the wind above. continuous upward camera move from water to hilltop, natural, cinematic Japanese art film, elegant traditional kimono, ethereal atmosphere, soft volumetric backlight and haze, muted filmic color grade, delicate film grain, 16:9 horizontal, ultra detailed, 4k
[B] A gust sweeps cherry petals upward across the lens; as they pass, the frame has opened onto a bright grassy hilltop where a woman in kimono stands, a red koi streamer fluttering overhead. natural wind-and-petals wipe across the lens, matched motion, cinematic Japanese art film, elegant traditional kimono, ethereal atmosphere, soft volumetric backlight and haze, muted filmic color grade, delicate film grain, 16:9 horizontal, ultra detailed, 4k

■ m06｜s06→s07（丘の上 → 回転）／動作の連続（振り向いて回り始める）
[A] On the hilltop the woman slowly turns and gently begins to spin, her sleeves lifting in the breeze; the camera drifts around her in an unhurried arc, and the same graceful turn continues seamlessly as she becomes a woman in a brown-red kimono mid-spin, petals and soft paper drifting around her. continuous matched motion, gentle orbiting camera, unhurried and natural, no sudden whip, cinematic Japanese art film, elegant traditional kimono, ethereal atmosphere, soft volumetric backlight and haze, muted filmic color grade, delicate film grain, 16:9 horizontal, ultra detailed, 4k
[B] A drifting cloud sweeps a soft shadow slowly across the hilltop; as the warm light returns and petals lift on the breeze, the frame has eased into a woman in a brown-red kimono turning gracefully, sleeves and soft paper drifting. natural passing-cloud light change, slow and gentle transition, cinematic Japanese art film, elegant traditional kimono, ethereal atmosphere, soft volumetric backlight and haze, muted filmic color grade, delicate film grain, 16:9 horizontal, ultra detailed, 4k

■ m07｜s07→s08（回転 → 森で扇子）／動きが静けさに収束
[A] The spin slows and the swirling papers drift down and settle like falling leaves; the camera eases to stillness on a woman in a soft kimono in a hazy forest, lowering an open fan from her face. natural deceleration into stillness, cinematic Japanese art film, elegant traditional kimono, ethereal atmosphere, soft volumetric backlight and haze, muted filmic color grade, delicate film grain, 16:9 horizontal, ultra detailed, 4k
[B] Falling papers and petals drift down across the foreground; as they clear, the motion has calmed into a quiet hazy forest where a woman holds an open folding fan. natural falling-elements wipe, believable, cinematic Japanese art film, elegant traditional kimono, ethereal atmosphere, soft volumetric backlight and haze, muted filmic color grade, delicate film grain, 16:9 horizontal, ultra detailed, 4k

■ m08｜s08→s09（森で扇子 → 和傘の横顔）／横移動＋浅いピント
[A] The camera drifts sideways past the fan and floating light, gently coming to rest on the side profile of a woman in a floral kimono, soft red umbrellas blurred behind her in warm light. natural lateral drift, shallow focus, cinematic Japanese art film, elegant traditional kimono, ethereal atmosphere, soft volumetric backlight and haze, muted filmic color grade, delicate film grain, 16:9 horizontal, ultra detailed, 4k
[B] A warm shaft of light blooms through the forest and softens the frame; as it recedes, we are beside a woman in profile, red umbrellas glowing softly behind her at sunset. natural light-bloom transition, grounded, cinematic Japanese art film, elegant traditional kimono, ethereal atmosphere, soft volumetric backlight and haze, muted filmic color grade, delicate film grain, 16:9 horizontal, ultra detailed, 4k

■ m09｜s09→s10（和傘 → 天灯を見上げる）／光を追って上昇＋時間経過
[A] The camera tilts upward from the umbrellas into the deepening twilight, following soft floating lights, and settles on a woman gazing at paper sky-lanterns drifting up. continuous upward tilt into twilight, natural, cinematic Japanese art film, elegant traditional kimono, ethereal atmosphere, soft volumetric backlight and haze, muted filmic color grade, delicate film grain, 16:9 horizontal, ultra detailed, 4k
[B] The warm sunset light slowly deepens into twilight and soft lanterns begin to rise in the distance; the camera cranes up to a woman watching the sky-lanterns float upward. natural dusk-to-twilight shift, grounded, cinematic Japanese art film, elegant traditional kimono, ethereal atmosphere, soft volumetric backlight and haze, muted filmic color grade, delicate film grain, 16:9 horizontal, ultra detailed, 4k

■ m10｜s10→s11（天灯 → 花火の横顔）／昇る灯りを追って花火へ
[A] The camera follows a rising lantern upward with a soft motion blur; as it reaches the sky, distant fireworks bloom across the night, silhouetting a woman's profile. motivated upward follow into fireworks, natural, cinematic Japanese art film, elegant traditional kimono, ethereal atmosphere, soft volumetric backlight and haze, muted filmic color grade, delicate film grain, 16:9 horizontal, ultra detailed, 4k
[B] The glow of the sky-lanterns deepens as the first fireworks bloom far off and embers drift across the frame; the camera settles on a woman's silhouette against the night sky. natural glow-into-fireworks, drifting embers across the lens, cinematic Japanese art film, elegant traditional kimono, ethereal atmosphere, soft volumetric backlight and haze, muted filmic color grade, delicate film grain, 16:9 horizontal, ultra detailed, 4k

■ m11｜s11→s12（花火 → たんぽぽ野原・締め）／火の粉が降りて引く
[A] The falling embers of the fireworks drift softly downward across the frame; as they fade, the camera pulls back to a peaceful dandelion field at dusk, a single dandelion in soft focus, seeds on the wind. natural embers-to-dusk pull-back, cinematic Japanese art film, ethereal atmosphere, soft volumetric backlight and haze, muted filmic color grade, delicate film grain, 16:9 horizontal, ultra detailed, 4k
[B] The fireworks fade and drifting smoke softens the frame; as it clears, a serene dandelion field at dusk settles into view, a single giant dandelion in soft focus with seeds drifting on the wind. natural smoke-clear reveal, grounded, cinematic Japanese art film, ethereal atmosphere, soft volumetric backlight and haze, muted filmic color grade, delicate film grain, 16:9 horizontal, ultra detailed, 4k

assets/cinema/ にある m01.mp4〜m11.mp4 を、番号順に1本へ結合して assets/cinematic.mp4 を作って。解像度とフレームレートは揃えて、音は無し、Web再生用に faststart 済みにして。あわせて1秒地点から表紙用の assets/cinematic_poster.jpg も書き出して。

assets/cinematic.mp4 を、スクロール・スクラブ用にキーフレームを詰めて再エンコードして。5フレームごとにキーフレーム、音声は削除、web最適化（faststart）で。元の cinematic.mp4 は残して、出力は assets/cinematic_scrub.mp4 に。ffmpeg で実行して。

index.html の商品セクションの直後に、新しく「シネマ上映」セクションを1つ追加して。冒頭ヒーローと同じ“スクロール・スクラブ”方式で、自作の和風シネマ（assets/cinematic_scrub.mp4）をスクロールで再生・逆再生できるようにしたい。仕様は次の通り：
(1) セクションは高さ1000vh（ゆっくり味わえる長め）、内側の上映ステージは position:sticky; top:0; height:100vh; で画面に貼り付ける。動画は object-fit:cover、背景は黒、上下に細いシネマの黒帯（レターボックス）で“劇場”らしく。
(2) このセクションのスクロール進捗（0〜1）を計算して、cinematic_scrub.mp4 の video.currentTime にマップする（スクロールを下げると順再生、上げると逆再生）。
(3) 「シーク・ガード」を入れる：seeked イベントで前の頭出し完了を検知し、完了するまで次の currentTime 代入をしない。現在位置との差が0.033秒以下なら代入しない。requestAnimationFrame で回す。
(4) 動画は muted playsinline preload="auto" poster="assets/cinematic_poster.jpg"。画面に入るまでは何もしない（IntersectionObserver）。既存のヒーロー動画スクラブとは干渉しない独立した処理にする。スマホでも崩れず黒帯が汚く出ない。
(5) 短いタイトルコピー「A Japanese Reverie ― 四季を、ひと息で。」を、上映の入りだけ静かにフェードイン→数秒で消す（任意）。
実装したらプレビューして、商品章 → シネマ上映（スクロールで再生・逆再生）→ 次の章、の流れが自然か、スマホでも崩れないか確認して。

動画が多くて読み込みが重いので、本番用のローディングと先読みを実装して。
(1) ページ先頭に全画面のローディングゲートを出し、全動画ファイルのダウンロード進捗を合算した％を数字とバーで表示。完了するまでスクロールをロックする。
(2) 各動画を fetch で先読み（blob化）して、重要度順（ヒーロー→シネマ→登場順）に同時2本ずつ取得。以降のスクラブやシークがサーバ往復せず即応するようにして。fetchに失敗したら2回までリトライ。
(3) 保険として、25秒間まったく進捗が増えないか、絶対上限180秒を超えたら、強制的にゲートを解除して先へ進めるようにして（永久に開かない事故を防ぐ）。
(4) file:// でダブルクリックして開いたときは、ゲート無しで全機能が動くフォールバックにして。
実装したらプレビューして、読み込み中にバーが最後まで伸びて解除されるか、スクロールがヌルヌル動くか確認して。

公開前に自己検証して。ヘッドレスブラウザで各章のピン留め区間を進捗0%/50%/100%でスクリーンショットを撮り、次を全部チェックして、問題があれば直してから報告して：
・各動画のスクラブ／マスク拡大がカクついていないか
・テキストと被写体（顔・手）が重なっていないか
・章の切り替わりで白や黒がちらつかないか
・画面内に入った動画だけが再生され、同時再生が増えすぎていないか
・ローディングゲートの進捗が最後まで伸びて解除されるか
・スマホ幅で崩れないか／最初はポスター画像が出て固まらないか
検証結果を箇条書きで、直した点も添えて教えて。

公開用に deploy/ フォルダを作って、そこに「実際にサイトが使うファイルだけ」をまとめて。index.html と、参照している動画・画像・ポスター（hero_scrub.mp4／cinematic_scrub.mp4／cinematic_poster.jpg／商品画像／sakura.mp4 など、実際に使っている分）だけをコピーして、未使用の重い元素材や制作途中ファイル（assets/cinema/ の s01〜s12・m01〜m11 など）は入れないで。相対パスがそのまま動くように配置して、deploy/index.html を file:// でダブルクリックしても全機能が動くことを確認して。最後に deploy/ の合計サイズを教えて。

deploy/
├─ index.html                （サイト本体）
└─ assets/
   ├─ hero_scrub.mp4          … ヒーローのスクラブ動画（約1.0MB）
   ├─ cinematic_scrub.mp4     … シネマ本編のスクラブ動画（約38MB）
   ├─ cinematic_poster.jpg    … シネマの表紙
   ├─ sakura.mp4              … 文字マスクの桜並木（約13MB）
   ├─ sakura_poster.jpg       … 桜の表紙
   └─ p1.png / p2.png / p3.png … 商品画像
── 合計 約54MB（9ファイル）