open-design/plugins/_official/examples/frame-glitch-title/example.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Glitch Title · SIGNAL_LOST</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet" />
<style>
  body { font-family:'Space Grotesk',sans-serif; background:#0d0e10; color:#f5f5f7; margin:0; min-height:100vh; overflow:hidden; position:relative; }
  .mono { font-family:'JetBrains Mono',monospace; }
  /* scanlines */
  body::before {
    content:''; position:absolute; inset:0; pointer-events:none; z-index:3;
    background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px, transparent 1px, transparent 3px);
    mix-blend-mode: multiply; opacity:0.6;
  }
  /* grid */
  body::after {
    content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
    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);
    background-size: 56px 56px;
  }
  /* grain */
  .grain { position:absolute; inset:0; opacity:0.1; mix-blend-mode:overlay; z-index:4; pointer-events:none;
    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"); }
  @keyframes glitch {
    0%, 92%, 100% { transform: translate(0,0); filter: none }
    93% { transform: translate(-6px, 1px); filter: url(#rgb) }
    94% { transform: translate(8px, -2px); filter: url(#rgb) }
    95% { transform: translate(-4px, 2px); }
    96% { transform: translate(4px, -1px); filter: url(#rgb) }
    97% { transform: translate(0,0) }
  }
  .glitch-host { position:relative; animation: glitch 4s infinite; }
  .layer { position:absolute; inset:0; mix-blend-mode:screen; }
  .layer-c { color:#00f0ff; transform: translate(-3px, 1px); }
  .layer-m { color:#ff2bd6; transform: translate(3px, -1px); }
  .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; }
  .ascii { font-family:'JetBrains Mono',monospace; letter-spacing:2px; line-height:1; }
  @media (prefers-reduced-motion: reduce) { .glitch-host { animation: none } }
</style>
</head>
<body class="flex flex-col items-center justify-center relative">

  <svg width="0" height="0" style="position:absolute">
    <defs>
      <filter id="rgb">
        <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
        <feOffset in="SourceGraphic" dx="3" dy="0" result="r"/>
        <feOffset in="SourceGraphic" dx="-3" dy="0" result="b"/>
        <feMerge><feMergeNode in="r"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
      </filter>
    </defs>
  </svg>

  <header class="absolute top-10 left-12 right-12 flex items-baseline justify-between mono text-[11px] opacity-70 z-10 tracking-[0.16em]">
    <span>&gt;&gt; SIGNAL_LOST · CH-04 · 14:32:08</span>
    <span>FRAME · GLITCH-TITLE</span>
    <span>REC ●</span>
  </header>

  <!-- ASCII chunks corners -->
  <pre class="ascii absolute top-24 left-12 text-[12px] opacity-30 z-10">█▓▒░ █▓▒░
▒▓█▓ ░▒▓
░▒▓█ ▓▒░░
▓▒░░ ▒▓█▓</pre>
  <pre class="ascii absolute bottom-24 right-12 text-[12px] opacity-30 z-10 text-right">█▓▒░ ▓▒░█
▒░░▓ ░▒▓█
▓▒░░ █▓▒░
░▒▓█ ▒░░▓</pre>

  <main class="relative z-10 text-center px-12">
    <div class="mono text-[14px] opacity-60 tracking-[0.22em] mb-6 uppercase">— Transmission Halted —</div>
    <div class="glitch-host relative inline-block">
      <h1 class="font-black tracking-[-0.02em] leading-[0.9]" style="font-size:clamp(80px,12vw,200px)">
        SIGNAL<br/>_LOST
      </h1>
      <h1 class="layer layer-c font-black tracking-[-0.02em] leading-[0.9]" style="font-size:clamp(80px,12vw,200px)">
        SIGNAL<br/>_LOST
      </h1>
      <h1 class="layer layer-m font-black tracking-[-0.02em] leading-[0.9]" style="font-size:clamp(80px,12vw,200px)">
        SIGNAL<br/>_LOST
      </h1>
    </div>
    <p class="mt-10 mono text-[16px] opacity-70 tracking-[0.16em]">
      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>
    </p>
  </main>

  <div class="grain"></div>
  <div class="vignette"></div>

  <footer class="absolute bottom-10 left-12 right-12 flex items-baseline justify-between mono text-[11px] opacity-50 z-10 tracking-[0.16em]">
    <span>HTML-ANYTHING / VFX</span>
    <span style="color:#ff2bd6">CHROMATIC · CYAN × MAGENTA</span>
    <span class="mono">⏵ 00:14:32:08</span>
  </footer>
</body>
</html>