Glitch Text

<!-- Glitch Text — RGB split glitch effect -->
<div class="nuda-glitch" data-text="GLITCH">
  <span class="nuda-glitch__text">GLITCH</span>
</div>

/* ── Glitch Text ────────────────────────────────────────────
   Uses ::before / ::after pseudo-elements for the RGB layers.
   Customize:
     --nuda-glitch-clr-r  : red channel offset color
     --nuda-glitch-clr-c  : cyan channel offset color
     --nuda-glitch-speed  : animation duration
   ──────────────────────────────────────────────────────────── */
.nuda-glitch {
  --nuda-glitch-clr-r: rgba(255, 0, 0, 0.75);
  --nuda-glitch-clr-c: rgba(0, 255, 255, 0.75);
  --nuda-glitch-speed: 0.6s;

  position: relative;
  display: inline-block;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.nuda-glitch__text {
  position: relative;
}

/* Shared pseudo-element base */
.nuda-glitch::before,
.nuda-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.nuda-glitch::before {
  color: var(--nuda-glitch-clr-c);
  animation: nuda-glitch-1 var(--nuda-glitch-speed) infinite linear alternate-reverse;
}

.nuda-glitch::after {
  color: var(--nuda-glitch-clr-r);
  animation: nuda-glitch-2 var(--nuda-glitch-speed) infinite linear alternate-reverse;
}

@keyframes nuda-glitch-1 {
  0%   { clip-path: inset(20% 0 60% 0); transform: translate(-3px, 2px); }
  20%  { clip-path: inset(60% 0 10% 0); transform: translate(3px, -1px); }
  40%  { clip-path: inset(40% 0 30% 0); transform: translate(-2px, 1px); }
  60%  { clip-path: inset(80% 0 5% 0);  transform: translate(2px, -2px); }
  80%  { clip-path: inset(10% 0 70% 0); transform: translate(-1px, 2px); }
  100% { clip-path: inset(50% 0 30% 0); transform: translate(1px, -1px); }
}

@keyframes nuda-glitch-2 {
  0%   { clip-path: inset(60% 0 10% 0); transform: translate(3px, -1px); }
  20%  { clip-path: inset(10% 0 70% 0); transform: translate(-2px, 2px); }
  40%  { clip-path: inset(80% 0 5% 0);  transform: translate(1px, -2px); }
  60%  { clip-path: inset(30% 0 50% 0); transform: translate(-3px, 1px); }
  80%  { clip-path: inset(50% 0 30% 0); transform: translate(2px, -1px); }
  100% { clip-path: inset(20% 0 60% 0); transform: translate(-1px, 2px); }
}

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-glitch::before,
  .nuda-glitch::after {
    animation: none;
    clip-path: none;
    transform: none;
    opacity: 0;
  }
}