Lens Distortion

<!-- Lens Distortion — a circular "lens" (blur + saturate + contrast
     backdrop-filter, scaled up mid-sweep to fake a barrel bulge) sweeps
     across the text in discrete mechanical steps, then loops. -->
<div class="nuda-gd2-lens-distort">
  <span class="nuda-gd2-lens-distort__text">DISTORT</span>
  <span class="nuda-gd2-lens-distort__lens" aria-hidden="true"></span>
</div>

.nuda-gd2-lens-distort {
  position: relative;
  display: grid;
  place-items: center;
  width: 160px;
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  background: #09090b;
}

.nuda-gd2-lens-distort__text {
  font: 900 1.5rem/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing: .06em;
  color: #e4ff54;
}

.nuda-gd2-lens-distort__lens {
  position: absolute;
  top: 15%;
  bottom: 15%;
  left: 0;
  width: 34%;
  border-radius: 50%;
  background: rgba(228,255,84,.08);
  backdrop-filter: blur(2px) saturate(1.6) contrast(1.15);
  -webkit-backdrop-filter: blur(2px) saturate(1.6) contrast(1.15);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
  animation: _nuda-gd2lens-distort 6s steps(10) infinite;
}

@keyframes _nuda-gd2lens-distort {
  0% {
    transform: translateX(-160%) scale(.9);
  }
  45% {
    transform: translateX(160%) scale(1.12);
  }
  55% {
    transform: translateX(160%) scale(1.12);
  }
  100% {
    transform: translateX(-160%) scale(.9);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-gd2-lens-distort__lens {
    animation: none;
    opacity: 0;
  }
}