vfx-text-cursor

[Template: VFX Text Cursor] [Intent] Video opening/Hero frame — the cursor "types" on the canvas, text appears character by character, trailing a colorful astigmatic trail + directional light spots. Inspired by hyperframes vfx-text-cursor.

[Canvas] 1920×1080, background #06070a dull black or #0a0d12 (with a warm blue tint); add a subtle vignette.

[Content]

• A punchline (Chinese or English), centered, font size 6-8vw, weight 700, font Inter Tight / Source Sans 3 / Noto Sans SC。
• revealed character by character, 80ms interval per character; the current character is followed by a cursor ▍ (or a thin vertical bar).
• Revealed text is white by default #f5f5f7, opacity 1; the position about to be revealed gets a chromatic ghost: one copy of text-shadow: 2px 0 #ff3b6f, -2px 0 #00d4ff at the moment of reveal, converging back to normal within 200ms.
• The cursor itself: 16px wide rectangle, color = accent (take 1: hot pink #ff3b6f / cyan #00d4ff / amber #ffb547), blinking @keyframes 1.0s period; trailing a 60-120px motion blur trail behind it (radial gradient to transparent).

[Light Spots / Rays]

• Randomly generate 3-5directional light spots (light leak) near the typing position: use linear-gradient(45deg, transparent, accent20, transparent) thin elongated rectangles + mix-blend-mode: screen, irregular angles.
• When the text is finished, add a 0.5s shimmer sweep to the whole text (a band of light sweeping across).

[Fields]

• Top caption (uppercase letterspace 0.18em, 11px, opacity 0.5): "FRAME 01 · OPENING".
• Subtitle below the text (24-28px, opacity 0.6): source / chapter.
• Bottom-right timecode (00:03:21 mono)。

[Design Details]

• Never: multi-color rainbow chromatic (only use a binary astigmatism like 1 hot pink + cyan, not full R/G/B).
• Font: Western Inter Tight Bold; Chinese Noto Sans SC Bold; serif strictly forbidden.
• Animation uses @keyframes + JS timer (setTimeout character by character), can be turned off by prefers-reduced-motion (directly show all characters).
• Must use the user-provided punchline; do not fabricate.
• Single-file HTML, no external resources other than fonts.