frame-glitch-title

[Template: Glitch Art Title Frame (Glitch Title)] [Intent] Single-frame hero / video transition / cyberpunk-style title. Inspired by hyperframes glitch.

[Canvas] 1920×1080, background #070708 near-black or CRT dark gray #0d0e10; add a 56px grid (5% transparent) + scanlines horizontal lines (8% transparent, 2px spacing).

[Main Title]

• Centered, 6-9vw, weight 800/900, font Space Grotesk Bold / Inter Tight Black / JetBrains Mono Bold。
• Color: main layer #f5f5f7; behind it layer 2 artifact layers:
  • cyan #00f0ff translate(-3px, 1px)。
  • magenta #ff2bd6 translate(3px, -1px)。
• Add clip-path slices to the whole layer, 5-8 segments, each segment @keyframes random translateX -10px → 10px, duration 80-160ms, staggered playback, creating a "data corruption" astigmatic look.
• Trigger a "major glitch" every 1.5s — the entire title gets horizontal smear for 1 frame, using filter: url(#displacementFilter) or simple CSS translation.

[Additional Layers]

• A row of caption at the top (uppercase mono, 11px, opacity 0.6): >> SIGNAL_LOST · CH-04 · 14:32:08。
• 1 row of subtitle below the title (24-28px, mono, opacity 0.7), occasionally replaced by ̶▒̶ characters (fake garbled text).
• Randomly sprinkle in the corners █▓▒░ ASCII noise chunks.
• Timecode at the bottom (mono, opacity 0.4).
• Overlay the entire frame with a noise grain layer background-image: url("data:image/svg+xml,...turbulence..."), opacity 6%, mix-blend-mode overlay。

[SVG Filter (Optional)]

• Define <filter id="rgbShift"> using feColorMatrix + feOffset + feMerge to offset the R/G/B channels; apply the whole layer filter: url(#rgbShift) at the moment of the glitch.

[Design Details]

• Use only these colors: black / white / cyan / magenta / a bit of amber warning color; absolutely no full rainbow.
• Fonts: Western Space Grotesk or JetBrains Mono Bold; Chinese Noto Sans Mono CJK SC or Noto Sans SC Bold。
• Absolutely no lorem ipsum; must use the user's title + subtitle.
• For animation use @keyframes, can be disabled by prefers-reduced-motion (falls back to static chromatic split).
• Single-file HTML.