Design Atlas
한국어
▶ Motion graphics

Beat-synced type

비트 싱크 타이포

Timing text entrances to the exact beat of a soundtrack or the stress of a voiceover, frame by frame — the core skill behind lyric videos and title sequences.

Also known as: Kinetic type videoText animator (AE)Lyric video type
···
html
<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>
css
.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%}}
js
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';
});

Web "kinetic typography" reacts to user input like scroll or hover. Video kinetic type is different — it has to land exactly on a fixed audio timeline.

In After Effects you add an Animator group to a text layer and use a Range Selector to pick out a word or a run of characters, then nudge that selection's start time against the audio waveform until it lands — editors call this "riding the timing." It's frame-by-frame, by eye.

Give every word the same rhythm and it goes flat. Save the scale-overshoot or color pop for the words that matter, and let the rest pass through quickly so the emphasis actually reads.

When to use

Lock the audio first, then build the type on top of it — you time the text to the track, never the other way around.