frame-glitch-title

【テンプレート：グリッチアートのタイトルフレーム（Glitch Title）】 【意図】単一フレームのヒーロー表示／動画のトランジション／サイバーパンク風タイトル。hyperframes glitch にインスパイアされています。

【キャンバス】1920×1080。背景はほぼ黒の #070708 または CRT のダークグレー #0d0e10。56px のグリッド（透明度 5%）と、走査線の横線（透明度 8%、間隔 2px）を追加します。

【メインタイトル】

• 中央揃え、6-9vw、weight 800/900、フォントは Space Grotesk Bold／Inter Tight Black／JetBrains Mono Bold。
• 色：メインレイヤーは #f5f5f7。背面に 2 層の残像を重ねます：
  • cyan #00f0ff translate(-3px, 1px)。
  • magenta #ff2bd6 translate(3px, -1px)。
• レイヤー全体を clip-path で 5-8 個のスライスに分割し、それぞれに @keyframes で -10px → 10px の translateX をランダムに適用します。継続時間は 80-160ms とし、開始タイミングをずらして再生することで、「データ破損」のようなちらつきを演出します。
• 1.5s ごとに「強いグリッチ」を発生させます。タイトル全体を 1 frame 横方向にスメアし、filter: url(#displacementFilter) またはシンプルな CSS の平行移動を使用します。

【追加レイヤー】

• 上部に caption を 1 行配置します（uppercase mono、11px、opacity 0.6）：>> SIGNAL_LOST · CH-04 · 14:32:08。
• タイトルの下に副題を 1 行配置します（24-28px、mono、opacity 0.7）。ときどき文字を ̶▒̶ に置き換えます（偽の文字化け）。
• 角に █▓▒░ の ASCII ノイズチャンクをランダムに配置します。
• 下部にタイムコードを配置します（mono、opacity 0.4）。
• 画面全体にノイズ粒子レイヤー background-image: url("data:image/svg+xml,...turbulence...") を重ねます。opacity は 6%、mix-blend-mode は overlay とします。

【SVG フィルター（任意）】

• <filter id="rgbShift"> を定義し、feColorMatrix + feOffset + feMerge を使って R/G/B の各チャンネルをずらします。グリッチ発生時に、レイヤー全体へ filter: url(#rgbShift) を適用します。

【デザインの詳細】

• 使用する色は黒／白／cyan／magenta／少量の amber（警告色）のみです。虹色を使うことは厳禁です。
• フォント：西文は Space Grotesk または JetBrains Mono Bold、中国語は Noto Sans Mono CJK SC または Noto Sans SC Bold。
• lorem ipsum の使用は厳禁です。ユーザーのタイトルと副題を必ず使用してください。
• アニメーションには @keyframes を使用し、prefers-reduced-motion で無効化できるようにします（静的な chromatic split に切り替えます）。
• 単一ファイルの HTML。