frame-logo-outro

【テンプレート：ロゴの締めくくりフレーム（Logo Outro）】 【目的】動画の最後に表示するブランドのリビールフレームです。ロゴを分割して組み立て、グロウブルームを加え、タグラインを上昇させて CTA を表示します。hyperframes のロゴアウトロから着想を得ています。

【キャンバス】1920×1080。黒の #08090c またはブランドカラーのダークな背景を使用します。微妙なビネット radial-gradient(...) を加え、中央を明るくします。

【レイアウト】

• 中央のロゴ：CSS／インライン SVG で描画します。4～8 個の幾何学形状（円／四角形／三角形／ヘアライン）で構成します。
  • 入場アニメーション：各パーツが画面外から（方向を変えて ±100px）スライドインし、scale 1.4→1.0、opacity 0→1 で表示されます。80ms ずつずらして開始し、全体の長さは 1.2s にします。
  • 入場完了後、ロゴ全体にグロウブルームを加えます：filter: drop-shadow(0 0 24px <accent>40)。同時に、シマーの mask-image をロゴ上で横方向に走らせます（500ms）。
• ブランド名：ロゴの下、6～8％の位置に大きく配置します（Inter Tight／SF Pro Display、48～72px、weight 700、letter-spacing -0.02em）。ロゴのブルーム後（1.4s）に、タイプライター表示またはフェードアップで入場させます。
• タグライン：ブランド名の下に 1 行で配置します（24～28px、weight 400、opacity 0.7）。フェードインさせます（1.8s）。
• 下部の CTA ＋ メタデータ：下部に 2 行の行を配置します。例：htmlanything.dev · @htmlanything · 2026。11px の大文字、letter-spacing 0.16em、カラーの opacity 0.4 とし、ヘアラインで区切ります。

【配色 — 4 種から 1 つ選択し、混在させない】

• 🌌 ミッドナイトインディゴ — bg #08090c、accent #7c5cff（ネオンの紫青グロウ）。
• 🌅 ソーラーアンバー — bg #0e0a08、accent #ffb547（温かみのあるアンバー）。
• 🌿 フォレストミント — bg #0a1410、accent #5fb38a（ミントグリーン）。
• ⚪ ボーン＆インク — bg #f1efea、accent #0a0a0b（ネオンなし。エディトリアルなスタイルにし、グロウの代わりにシャドウを使用）。

【デザインの詳細】

• 禁止事項：外部リンクのロゴ画像を使用しないでください。ロゴは CSS のみ、またはインライン SVG の幾何学形状で描画する必要があります。
• 入場アニメーションには @keyframes と animation-delay を使用します。prefers-reduced-motion で無効化できます。
• フォント：欧文は Inter Tight／SF Pro Display／Manrope、中国語は Noto Sans SC の weight 700 を使用します。
• ユーザーが指定したブランド名とタグラインを必ず使用してください。指定がない場合は、フォールバックとして "HTML Anything" / "Anything → beautiful HTML" を使用します。
• 単一ファイルの HTML にします。アニメーション全体の完了後は停止させます（ループさせないでください。動画の最後に表示するフレームです）。
• 任意で、ブランドの認識度を高めるため、上部に 5px のリボン（accent カラー）を追加できます。