비트 싱크 타이포

<div class="frame">
  <div class="stage">
    <div class="word w1">FEEL</div>
    <div class="word w2">THE</div>
    <div class="word w3">BEAT</div>
  </div>
  <div class="wave">
    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
  </div>
</div>

.frame{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column}
.stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:.35em;padding:0 4%}
.word{font:800 clamp(18px,8.5vmin,50px)/1 sans-serif;color:#fff;opacity:0;transform:scale(.4);letter-spacing:.01em;white-space:nowrap}
.w1{animation:pop 2.4s cubic-bezier(.2,1.6,.4,1) infinite}
.w2{color:#9a9aa6;animation:pop 2.4s cubic-bezier(.2,1.6,.4,1) infinite .3s}
.w3{color:#f25c8a;animation:pop 2.4s cubic-bezier(.2,1.6,.4,1) infinite .6s}
@keyframes pop{0%{opacity:0;transform:scale(.4)}8%{opacity:1;transform:scale(1.18)}16%{transform:scale(1)}82%{opacity:1;transform:scale(1)}92%{opacity:0;transform:scale(.85)}100%{opacity:0;transform:scale(.85)}}
.wave{height:20%;min-height:22px;display:flex;align-items:center;justify-content:center;gap:3px;margin-bottom:5vmin}
.wave i{width:4px;border-radius:2px;height:20%;animation:bump ease-in-out infinite}
@keyframes bump{0%,100%{height:20%}50%{height:85%}}

const bars = document.querySelectorAll('.wave i');
bars.forEach((el, i) => {
  el.style.background = i % 3 === 0 ? 'var(--accent)' : '#3a3a46';
  el.style.animationDuration = (0.8 + (i % 4) * 0.16) + 's';
  el.style.animationDelay = (i * 0.06) + 's';
});