Live preview — fully interactive
The prompt
Build a cyberpunk glitch hero: a huge headline whose RGB channels split and tear in short randomized-feeling bursts, over a CRT scanline backdrop. Pure CSS, no JavaScript. ## Structure - Full-viewport centered .hero: a mono eyebrow line, an h1.glitch whose data-text attribute du
Full prompt (2319 chars) unlocks after purchase
The code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #08080d; color: #f2f2f7; font-family: 'Inter', system-ui, sans-serif; overflow: hidden; }
.grid-bg { position: fixed; inset: 0; background-image: linear-gradient(rgba(124, 108,Complete self-contained HTML unlocks after purchase
About this effect
A cyberpunk hero that feels like a signal fighting for stability. The headline is stacked with magenta and cyan clones that stay hidden most of the cycle, then tear through in 3-4 horizontal clip-path slices with opposite pixel offsets — the classic RGB-channel split. A soft scanbar sweeps the viewport, CRT scanlines sit on top, and the whole hero flickers once per loop. Pure CSS, zero JavaScript.