vfx-text-cursor

【テンプレート：VFX テキストカーソル（Text Cursor）】 【意図】動画のオープニング／Hero フレーム——カーソルがキャンバス上で「タイピング」し、文字が1文字ずつ浮かび上がります。後ろにはカラフルな色収差の軌跡と指向性の光斑が続きます。Inspired by hyperframes vfx-text-cursor。

【キャンバス】1920×1080、背景は暗くマットな黒 #06070a、または暖色寄りの青みを帯びた #0a0d12。控えめなビネットを加えます。

【コンテンツ】

• 格言を1つ（中国語・英語は問いません）、中央揃え、フォントサイズ 6-8vw、weight 700、フォントは Inter Tight / Source Sans 3 / Noto Sans SC。
• 文字を1文字ずつ表示し、各文字の間隔は 80ms にします。現在の文字の後ろにはカーソル ▍（または細い縦棒）を表示します。
• 表示済みの文字はデフォルトで白 #f5f5f7、opacity 1 にします。次に表示される位置には chromatic ghost を加えます。表示の瞬間に text-shadow: 2px 0 #ff3b6f, -2px 0 #00d4ff を適用し、200ms 以内に通常の状態へ収束させます。
• カーソル本体：幅 16px の長方形で、色は accent（次から1色を選択：hot pink #ff3b6f / cyan #00d4ff / amber #ffb547）。@keyframes で周期 1.0s の点滅にします。後ろには 60-120px のモーションブラーの軌跡（透明へ変化する放射状グラデーション）を引きます。

【光斑／光線】

• タイピング位置の近くに、指向性の光斑（light leak）をランダムに 3～5 本生成します。linear-gradient(45deg, transparent, accent20, transparent) の細長い長方形に mix-blend-mode: screen を適用し、角度を不規則にします。
• 文字をすべて入力し終えたら、テキスト全体に 0.5s の shimmer sweep（光帯の横切り）を加えます。

【フィールド】

• 上部のキャプション（uppercase letterspace 0.18em、11px、opacity 0.5）：「FRAME 01 · OPENING」。
• テキストの下にサブタイトル（24-28px、opacity 0.6）：出典／章。
• 右下にタイムコード（00:03:21 mono）。

【デザインの詳細】

• 絶対に禁止：多色の虹色 chromatic（hot pink + cyan のような二色の色収差のみを使用し、R/G/B の全色は使わないでください）。
• フォント：英字は Inter Tight Bold、中国語は Noto Sans SC Bold。セリフ体は厳禁です。
• アニメーションには @keyframes と JS タイマー（setTimeout で1文字ずつ表示）を使用し、prefers-reduced-motion で無効化できるようにします（すべての文字をそのまま表示）。
• 必ずユーザーが提供した格言を使用してください。捏造しないでください。
• HTML は単一ファイルとし、外部フォント以外のリソースはリンクしないでください。