Melting Text

<!-- Melting Text — three thin drip streaks slowly stretch downward
     and fade on staggered loops, while the caption itself carries a
     soft breathing blur, like slowly dripping paint. -->
<div class="nuda-gd2-melt-drip">
  <span class="nuda-gd2-melt-drip__text">MELT</span>
  <span class="nuda-gd2-melt-drip__drop" aria-hidden="true"></span>
  <span class="nuda-gd2-melt-drip__drop" aria-hidden="true"></span>
  <span class="nuda-gd2-melt-drip__drop" aria-hidden="true"></span>
</div>

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

.nuda-gd2-melt-drip__text {
  font: 900 1.8rem/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing: .05em;
  color: #e4ff54;
  filter: blur(0px);
  animation: _nuda-gd2melt-drip-blur 4.5s ease-in-out infinite;
}

.nuda-gd2-melt-drip__drop {
  position: absolute;
  top: 58%;
  width: 3px;
  height: 14px;
  border-radius: 0 0 3px 3px;
  background: #e4ff54;
  opacity: 0;
  transform-origin: top center;
  animation: _nuda-gd2melt-drip 4.5s ease-in infinite;
}

.nuda-gd2-melt-drip__drop:nth-of-type(1) {
  left: 38%;
  animation-delay: .3s;
}

.nuda-gd2-melt-drip__drop:nth-of-type(2) {
  left: 50%;
  animation-delay: 1.1s;
}

.nuda-gd2-melt-drip__drop:nth-of-type(3) {
  left: 63%;
  animation-delay: .7s;
}

@keyframes _nuda-gd2melt-drip {
  0%,20% {
    transform: translateY(0) scaleY(.2);
    opacity: 0;
  }
  30% {
    opacity: .9;
  }
  70% {
    transform: translateY(18px) scaleY(1.6);
    opacity: .7;
  }
  100% {
    transform: translateY(30px) scaleY(2);
    opacity: 0;
  }
}

@keyframes _nuda-gd2melt-drip-blur {
  0%,100% {
    filter: blur(0px);
  }
  50% {
    filter: blur(.6px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-gd2-melt-drip__drop {
    animation: none;
    opacity: 0;
  }
  .nuda-gd2-melt-drip__text {
    animation: none;
    filter: none;
  }
}