베이퍼웨이브

<div class="scene">
  <div class="floor"></div>
  <div class="bust"></div>
  <h1 id="glitch" data-text="AESTHETIC">AESTHETIC</h1>
</div>

.scene{position:relative;width:100%;height:100%;overflow:hidden;
  background:linear-gradient(180deg,#ffb6e6 0%,#8fd8f0 60%,#8fd8f0 100%)}
.floor{position:absolute;left:0;right:0;bottom:0;height:38%;
  background-image:linear-gradient(#ff5ce0 1px,transparent 1px),linear-gradient(90deg,#ff5ce0 1px,transparent 1px);
  background-size:9% 20px;transform:perspective(200px) rotateX(60deg);transform-origin:bottom;opacity:.7}
.bust{position:absolute;left:50%;bottom:26%;width:24%;aspect-ratio:.68;transform:translateX(-50%);
  background:linear-gradient(180deg,#f3efe8,#c9c2b4);
  clip-path:polygon(50% 2%,64% 8%,68% 22%,58% 32%,80% 42%,94% 58%,90% 100%,10% 100%,6% 58%,20% 42%,42% 32%,32% 22%,36% 8%);
  filter:drop-shadow(4px 6px 0 rgba(90,60,120,.35));animation:float 4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4%)}}
h1{position:absolute;left:50%;top:16%;transform:translateX(-50%);margin:0;
  font-family:Georgia,"Times New Roman",serif;font-size:clamp(20px,5.4vmin,32px);letter-spacing:.3em;
  color:#3a2a5c;text-indent:.3em}
h1.jitter{animation:jit .18s steps(2) 2}
@keyframes jit{
  0%{transform:translateX(-50%) translate(0,0)}
  25%{transform:translateX(-50%) translate(-3px,1px);text-shadow:2px 0 #ff2fd0,-2px 0 #2fe0ff}
  50%{transform:translateX(-50%) translate(3px,-1px);text-shadow:-2px 0 #ff2fd0,2px 0 #2fe0ff}
  100%{transform:translateX(-50%) translate(0,0);text-shadow:none}
}

const h1 = document.getElementById('glitch');
setInterval(() => {
  h1.classList.remove('jitter');
  void h1.offsetWidth;
  h1.classList.add('jitter');
}, 2200);