frame-light-leak-cinema

【テンプレート：フィルムの光漏れを使った映画フレーム】 【用途】ドキュメンタリー／個人制作の短編／動画のチャプターカードのオープニング用静止画 —— 暖かなオレンジの光漏れ ＋ 35mm フィルム粒子 ＋ 大きなセリフ体文字で、クラシックなフィルムの質感を表現します。hyperframes light-leak に着想を得ています。

【キャンバス】

• 2.39:1 letterbox（推奨）：1920×800、上下に各 140px の黒帯（#000）。
• または 16:9：1920×1080、letterbox なし。

【背景】

• ベースレイヤー：深みのある暖色（暗い赤褐色 #1a0d08／墨緑 #0a1410／青紫 #0d0e1a）、またはシーン描写（CSS gradient で空／屋内／屋外を再現）。
• フィルムの光漏れ（Light Leak）：大きな radial-gradient(ellipse at top right, #ffb547 0%, transparent 50%) を 2～3 個 ＋ 下部に linear-gradient(to top, #d97757 0%, transparent 30%) を 1 個。暖色のオレンジ／ピーチ／ローズピンク／暗い黄色を使い、寒色の青は使わないでください。
• 35mm 粒子：画面全体を覆う SVG turbulence noise レイヤーを重ね、opacity 14%、mix-blend-mode: overlay に設定します。background-image: url("data:image/svg+xml,...feTurbulence...") を使う方法もあります。
• 任意：feDisplacementMap を 1 つ使ってフィルムの揺れを再現します（使用には注意してください）。

【文字】

• 中央または左下に、大きなセリフ体文字（Source Serif Pro／Playfair Display／EB Garamond）を 5～8vw、weight 500 italic で配置します。色は暖かな白 #f5e9d6 またはクリーム色にします。
• サブタイトルは 1 行（24～28px）、opacity 0.7、同じくセリフ体にします。
• 角のキャプション（uppercase letterspace 0.18em、10～11px、mono、opacity 0.5）：「REEL 03 · CH I · 1985」。
• 下部にタイムコード ＋ 撮影地 ＋ 日付（mono、opacity 0.4）。

【任意の追加要素】

• 「フィルムの傷」：不規則な間隔で、縦方向の白い線を数本配置します（1～2px、opacity 0.2）。box-shadow の複数の inset または複数の <div> を使います。
• 「フィルムのパーフォレーション」：letterbox の黒帯内に、等間隔で小さな白い四角形を配置します（CSS repeating-linear-gradient）。
• 入場アニメーション：画面全体の明るさを underexposed（brightness 0.3）から通常に戻します（800ms 以内）。光漏れの位置は 12s 周期でゆっくり移動させます。

【デザインの詳細】

• 色相は 4 色を超えないようにします（暗い背景 ＋ 暖色の光漏れ 2 色 ＋ クリーム色の文字）。
• 厳禁：青紫の光漏れ（フィルムの質感に反するため）、絵文字、ネオンカラー、幾何学的なダッシュボード装飾。
• 中国語：Noto Serif SC italic は存在しないため、Noto Serif SC regular を使い、字間を広げます。
• ユーザーが提供したタイトルを必ず使用します。「年／チャプター／場所」のメタデータは妥当なものを自動で推定します（ただし、情報源はユーザーのコンテンツに限ります）。
• 単一ファイルの HTML とし、prefers-reduced-motion でアニメーションを無効にします。