| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <title>Glitch Title · SIGNAL_LOST</title> |
| 6 | <script src="https://cdn.tailwindcss.com"></script> |
| 7 | <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet" /> |
| 8 | <style> |
| 9 | body { font-family:'Space Grotesk',sans-serif; background:#0d0e10; color:#f5f5f7; margin:0; min-height:100vh; overflow:hidden; position:relative; } |
| 10 | .mono { font-family:'JetBrains Mono',monospace; } |
| 11 | /* scanlines */ |
| 12 | body::before { |
| 13 | content:''; position:absolute; inset:0; pointer-events:none; z-index:3; |
| 14 | background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px, transparent 1px, transparent 3px); |
| 15 | mix-blend-mode: multiply; opacity:0.6; |
| 16 | } |
| 17 | /* grid */ |
| 18 | body::after { |
| 19 | content:''; position:absolute; inset:0; pointer-events:none; z-index:2; |
| 20 | background-image: linear-gradient(rgba(0,255,180,0.04) 1px, transparent 1px), linear-gradient(90deg,rgba(0,255,180,0.04) 1px, transparent 1px); |
| 21 | background-size: 56px 56px; |
| 22 | } |
| 23 | /* grain */ |
| 24 | .grain { position:absolute; inset:0; opacity:0.1; mix-blend-mode:overlay; z-index:4; pointer-events:none; |
| 25 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); } |
| 26 | @keyframes glitch { |
| 27 | 0%, 92%, 100% { transform: translate(0,0); filter: none } |
| 28 | 93% { transform: translate(-6px, 1px); filter: url(#rgb) } |
| 29 | 94% { transform: translate(8px, -2px); filter: url(#rgb) } |
| 30 | 95% { transform: translate(-4px, 2px); } |
| 31 | 96% { transform: translate(4px, -1px); filter: url(#rgb) } |
| 32 | 97% { transform: translate(0,0) } |
| 33 | } |
| 34 | .glitch-host { position:relative; animation: glitch 4s infinite; } |
| 35 | .layer { position:absolute; inset:0; mix-blend-mode:screen; } |
| 36 | .layer-c { color:#00f0ff; transform: translate(-3px, 1px); } |
| 37 | .layer-m { color:#ff2bd6; transform: translate(3px, -1px); } |
| 38 | .vignette { position:absolute; inset:0; background: radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.7) 100%); z-index:5; pointer-events:none; } |
| 39 | .ascii { font-family:'JetBrains Mono',monospace; letter-spacing:2px; line-height:1; } |
| 40 | @media (prefers-reduced-motion: reduce) { .glitch-host { animation: none } } |
| 41 | </style> |
| 42 | </head> |
| 43 | <body class="flex flex-col items-center justify-center relative"> |
| 44 | |
| 45 | <svg width="0" height="0" style="position:absolute"> |
| 46 | <defs> |
| 47 | <filter id="rgb"> |
| 48 | <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/> |
| 49 | <feOffset in="SourceGraphic" dx="3" dy="0" result="r"/> |
| 50 | <feOffset in="SourceGraphic" dx="-3" dy="0" result="b"/> |
| 51 | <feMerge><feMergeNode in="r"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge> |
| 52 | </filter> |
| 53 | </defs> |
| 54 | </svg> |
| 55 | |
| 56 | <header class="absolute top-10 left-12 right-12 flex items-baseline justify-between mono text-[11px] opacity-70 z-10 tracking-[0.16em]"> |
| 57 | <span>>> SIGNAL_LOST · CH-04 · 14:32:08</span> |
| 58 | <span>FRAME · GLITCH-TITLE</span> |
| 59 | <span>REC ●</span> |
| 60 | </header> |
| 61 | |
| 62 | <!-- ASCII chunks corners --> |
| 63 | <pre class="ascii absolute top-24 left-12 text-[12px] opacity-30 z-10">█▓▒░ █▓▒░ |
| 64 | ▒▓█▓ ░▒▓ |
| 65 | ░▒▓█ ▓▒░░ |
| 66 | ▓▒░░ ▒▓█▓</pre> |
| 67 | <pre class="ascii absolute bottom-24 right-12 text-[12px] opacity-30 z-10 text-right">█▓▒░ ▓▒░█ |
| 68 | ▒░░▓ ░▒▓█ |
| 69 | ▓▒░░ █▓▒░ |
| 70 | ░▒▓█ ▒░░▓</pre> |
| 71 | |
| 72 | <main class="relative z-10 text-center px-12"> |
| 73 | <div class="mono text-[14px] opacity-60 tracking-[0.22em] mb-6 uppercase">— Transmission Halted —</div> |
| 74 | <div class="glitch-host relative inline-block"> |
| 75 | <h1 class="font-black tracking-[-0.02em] leading-[0.9]" style="font-size:clamp(80px,12vw,200px)"> |
| 76 | SIGNAL<br/>_LOST |
| 77 | </h1> |
| 78 | <h1 class="layer layer-c font-black tracking-[-0.02em] leading-[0.9]" style="font-size:clamp(80px,12vw,200px)"> |
| 79 | SIGNAL<br/>_LOST |
| 80 | </h1> |
| 81 | <h1 class="layer layer-m font-black tracking-[-0.02em] leading-[0.9]" style="font-size:clamp(80px,12vw,200px)"> |
| 82 | SIGNAL<br/>_LOST |
| 83 | </h1> |
| 84 | </div> |
| 85 | <p class="mt-10 mono text-[16px] opacity-70 tracking-[0.16em]"> |
| 86 | 04 · DATA_CORRUPTION · <span style="color:#ffb547">w̶̶a̷i̶t̶i̶n̶g̶ ̷f̷o̶r̶ ̶r̷e̶c̶o̶v̷e̶r̶y̶</span> |
| 87 | </p> |
| 88 | </main> |
| 89 | |
| 90 | <div class="grain"></div> |
| 91 | <div class="vignette"></div> |
| 92 | |
| 93 | <footer class="absolute bottom-10 left-12 right-12 flex items-baseline justify-between mono text-[11px] opacity-50 z-10 tracking-[0.16em]"> |
| 94 | <span>HTML-ANYTHING / VFX</span> |
| 95 | <span style="color:#ff2bd6">CHROMATIC · CYAN × MAGENTA</span> |
| 96 | <span class="mono">⏵ 00:14:32:08</span> |
| 97 | </footer> |
| 98 | </body> |
| 99 | </html> |
| 100 |