frame-liquid-bg-hero

【テンプレート：流体背景 Hero】 【意図】動画のオープニングフレーム、SaaS ランディングページのトップにある Hero、ポスターの背景として使用できます。WebGL のような流体感を CSS／canvas で代替描画し、単一ファイルをダブルクリックするだけで開けるようにします。hyperframes vfx-liquid-background に着想を得ています。

【キャンバス】1920×1080（横）または 1080×1920（縦）のどちらかを選びます。背景を画面いっぱいに表示します。

【流体背景 — 3 種類の実装から、ユーザーの好みに応じて選択】

1. CSS の複数レイヤーの radial-gradient をずらして呼吸させる（最も安定。デフォルトで推奨）：
   • パレットの色を使い、radial-gradient(...) で大きな楕円を 3～5 個作成します。
   • 各楕円に @keyframes で移動＋scale＋hue-rotate を設定し、周期は 8～14 秒、タイミングをずらします。画面全体に mix-blend-mode: screen または overlay を重ねます。
   • 最上層に backdrop-filter: blur(80px) を 1 層追加し、境界をさらにぼかします。
2. Canvas＋シンプルな perlin noise（中級）：
   • 80 行のインライン JS で requestAnimationFrame を使い、metaballs または simplex noise field を描画します。
   • パフォーマンスに余裕がある場合に有効にし、prefers-reduced-motion の場合は静止画に切り替えます。
3. WebGL fragment shader（上級。慎重に使用）：
   • jsdelivr CDN から regl を読み込むか、プレーンな WebGL をインラインで記述します。
   • shader で domain-warp noise を記述します。quad は 1 つ、uniform は u_time のみです。

【最上層のテキストレイヤー】

• 中央または左下に、印象的な一文を大きく配置します（5～7vw、セリフ体または太い sans）。フォントは Source Serif Pro／Inter Tight／Manrope Black。
• 文字色は paper white #fafaf8 または ink とし、背景の明るさに合わせて選びます。mix-blend-mode: difference を追加して、どの流体色の上でも読みやすくします。
• サブタイトルを 1 行配置します（小さな sans、opacity 0.7）。
• 必要に応じて、下部に CTA チップ、またはヘアライン＋メタデータの行を配置します。

【配色 — 4 種類から 1 つ選択。虹色は禁止】

• 🌅 Solar Peach — #ffb18a＋#f78b4c＋#d97757、暖かみのあるオレンジピーチ。
• 🌊 Ocean Aqua — #5ac8fa＋#0a84ff＋#1e3a8a、海のような青。
• 🌌 Aurora Violet — #a78bfa＋#7c5cff＋#1e1b4b、オーロラの紫。
• 🌿 Forest Mint — #86efac＋#34d399＋#065f46、苔むした森。

【デザインの詳細】

• 厳禁：多色の虹色（色相が 4 つを超えるもの）、PowerPoint のグラデーション、ネオンの蛍光色を重ねること。
• フォント：中国語には Noto Serif SC（見出し）／Noto Sans SC（サブタイトル）を使用します。
• 外部画像へのリンクは禁止。すべて CSS＋SVG＋必要に応じて canvas で作成します。
• ユーザーが提供した印象的な一文／タイトルを必ず使用します。ユーザーの入力がデータの場合は、18 字以内の印象的な一文にまとめます。
• prefers-reduced-motion で動きを無効にできる単一ファイルの HTML にします。