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 56px grid (5% opacity) + scanlines horizontal lines (8% opacity, 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 add 2 layers of artifacts:
  • cyan #00f0ff translate(-3px, 1px)。
  • magenta #ff2bd6 translate(3px, -1px)。
• Apply clip-path slicing to the entire layer, 5-8 segments, each segment @keyframes random translateX -10px → 10px, duration 80-160ms, staggered playback, creating "data corruption" astigmatism.
• Trigger a "major glitch" every 1.5s — the entire title gets horizontal smear 1 frame, using filter: url(#displacementFilter) or simple CSS translation.

[Additional Layers]

• A caption line at the top (uppercase mono, 11px, opacity 0.6): >> SIGNAL_LOST · CH-04 · 14:32:08。
• Below the title, 1 subtitle line (24-28px, mono, opacity 0.7), occasionally replaced by ̶▒̶ characters (fake garbled text).
• Randomly embellish corners with █▓▒░ 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 to the entire layer filter: url(#rgbShift) at the moment of glitch.

[Design Details]

• Colors only use: 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。
• Lorem ipsum is strictly prohibited; must use the user's title + subtitle.
• Use for animation @keyframes, can be disabled by prefers-reduced-motion (fall back to static chromatic split).
• Single-file HTML.