Wave Ripple Warp

<!-- Wave Ripple Warp — an inline SVG filter (feTurbulence +
     feDisplacementMap) ripples the text via a slowly evolving noise
     field; a gentle CSS breathing scale adds extra life. Under
     reduced motion the filter is removed entirely (the SMIL animation
     keeps running invisibly in <defs>, producing no visible output). -->
<div class="nuda-gd2-wave-warp">
  <svg class="nuda-gd2-wave-warp__defs" aria-hidden="true" focusable="false">
    <defs>
      <filter id="gd2-wave-warp-filter" x="-20%" y="-20%" width="140%" height="140%">
        <feTurbulence type="fractalNoise" baseFrequency="0.012 0.05" numOctaves="2" seed="7" result="gd2-wave-noise">
          <animate attributeName="baseFrequency" values="0.012 0.05;0.016 0.04;0.012 0.05" dur="9s" repeatCount="indefinite"></animate>
        </feTurbulence>
        <feDisplacementMap in="SourceGraphic" in2="gd2-wave-noise" scale="7" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
      </filter>
    </defs>
  </svg>
  <span class="nuda-gd2-wave-warp__text">RIPPLE</span>
</div>

.nuda-gd2-wave-warp {
  position: relative;
  display: grid;
  place-items: center;
  width: 160px;
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg,#101014,#09090b);
}

.nuda-gd2-wave-warp__defs {
  position: absolute;
  width: 0;
  height: 0;
}

.nuda-gd2-wave-warp__text {
  font: 900 1.6rem/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing: .08em;
  color: #e4ff54;
  text-shadow: 0 0 10px rgba(228,255,84,.3);
  filter: url(#gd2-wave-warp-filter);
  animation: _nuda-gd2wave-warp 6s ease-in-out infinite;
  will-change: transform;
}

@keyframes _nuda-gd2wave-warp {
  0%,100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-gd2-wave-warp__text {
    filter: none;
    animation: none;
    transform: none;
  }
}