Per-letter stagger

When to use

Use when one word is the beat and should land letter by letter. 45 ms per letter is inside the 30 to 80 ms band, so the group never lands on one frame; every letter rides the same exact curve. Clip: letter-stagger.mp4. Demo: demo/letter-stagger.html.

The code

<h1>staggered</h1>
<style>h1 span { display: inline-block; white-space: pre; }</style>
<script type="module">
import { EASE } from '../../core/motion/presets.js';
const h1 = document.querySelector('h1');
const letters = [...h1.textContent].map((ch) => Object.assign(document.createElement('span'), { textContent: ch }));
h1.replaceChildren(...letters);
const beat = 100;   // ms, the same number the CSS --beat-1 holds
letters.forEach((s, i) => s.animate(
  [{ translate: '0 0.6em', opacity: 0 }, { translate: '0 0', opacity: 1 }],
  { duration: 550, delay: beat + i * 45, easing: EASE.land, fill: 'both' },
));
</script>

Easing and timing

The clip runs 1 s. The look is signal.

The clip uses one named ease from core/motion/presets.js. Each is a pair of After Effects handles: influence is how far along the segment the handle reaches, and speed is how fast the value moves at the key, as a multiple of the segment's average speed. Motion in the docs explains both.

Notes

white-space: pre keeps the spaces as letters. For a heavier word use EASE.pop and a 0.4em travel; for a headline of several words stagger the words, not the letters.

Looks (ground, type, radius, accent) live in demo/demo.css; this snippet keeps neutral tokens.

Sound

Sound: pluck at 0.10 s into the move, with the first letter (default gain); the stagger is the rhythm, so no tick per letter.