<!-- Glitch on any element -->
<div class="fx-glitch">Any content</div>

<!-- Text slice glitch (data-text must mirror text content) -->
<h1 class="fx-glitch-text" data-text="GLITCH">GLITCH</h1>

<!-- Holographic overlay -->
<div class="fx-hologram">...</div>

<!-- Portal entrance -->
<div class="gleam fx-portal">...</div>

<!-- VHS tape distortion -->
<div class="gleam fx-vhs">...</div>

/* How fx-glitch-text works:
   Pseudo-elements are exact copies (via attr(data-text)),
   clipped to different horizontal bands, shifted on glitch frames */
.fx-glitch-text::before {
  content: attr(data-text);
  clip-path: inset(5% 0 75% 0); /* top slice */
  color: rgba(255,0,60,0.85);    /* red channel */
}
.fx-glitch-text::after {
  clip-path: inset(70% 0 5% 0);  /* bottom slice */
  color: rgba(0,255,200,0.85);   /* cyan channel */
}

/* How fx-hologram works:
   - @keyframes cycles hue-rotate(0→360deg) with saturate/brightness variation
   - ::after overlays repeating-linear-gradient scan lines
   - drop-shadow in keyframes creates the chromatic glow */
<div class="fx-hologram" style="color:rgba(0,255,200,0.9)">
  Holographic content
</div>

<!-- Works on images — apply to a wrapper div -->
<div class="fx-hologram"><img src="..."></div>

<!-- Portal: clip-path iris grows from center + brightness/blur entrance -->
<div class="gleam fx-portal">Reveals from center</div>

<!-- VHS: RGB split + contrast/brightness + scale distortion -->
<div class="gleam fx-vhs">Tape aesthetic</div>

<!-- Loop continuously -->
.my-vhs { --iteration-count: infinite; }