Wordmark cascade
When to use
Use when the name is the last beat. Each letter falls onto a rail, one after the other, each gap shorter than the last, so the word speeds up as it lands; the full stop is the accent and lands last. After the landing a short accent bar runs along the rail, so the tail is never still.
Use once per film: the accent bar is a stock device (rule no-tells), never the idea.
The code
<div class="stage">
<h1><span>v</span><span>a</span><span>w</span><span>e</span><span class="dot">.</span><i class="base" style="display:inline-block;width:0;height:0"></i></h1>
<div class="rail"><div class="run"></div></div>
</div>
<style>h1 span { display: inline-block; } .rail { position: absolute; left: 0; right: 0; height: 1.3vh; overflow: hidden; background: rgba(255,255,255,0.2); }
.run { position: absolute; inset: 0 auto 0 0; width: 22%; background: var(--accent); translate: -100% 0; }</style>
<script type="module">
import { EASE } from '../../core/motion/presets.js';
rail.style.top = `${base.getBoundingClientRect().top - stage.getBoundingClientRect().top}px`; // the rail sits on the baseline
const at = [100, 190, 260, 315, 360]; // ms: gaps of 90, 70, 55, 45
letters.forEach((s, i) => {
s.animate([{ translate: '0 -0.85em', filter: 'blur(10px)' }, { translate: '0 0', filter: 'blur(0px)' }],
{ duration: 620, delay: at[i], easing: EASE.pop, fill: 'both' });
s.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 90, delay: at[i], easing: 'linear', fill: 'both' });
});
run.animate([{ translate: '-100% 0' }, { translate: '450% 0' }], { duration: 800, delay: 1050, easing: EASE.settle, fill: 'both' });
</script>Easing
Each ease is a pair of After Effects handles from core/motion/presets.js. Every curve as CSS.
| Ease | Leaving a key | Arriving at a key |
|---|---|---|
land | 12% influence, speed 4.8 | 75% influence, speed 0 |
pop | 12% influence, speed 4.8 | 35% influence, speed -1.5 |
settle | 60% influence, speed 0 | 60% influence, speed 0 |
Notes
The gaps run 90, 70, 55, 45 ms: inside the 30 to 80 ms band except the first, which is the hook. The letters blur only while they fall and are sharp on landing. The rail is on screen from frame 0 so the first frame has a subject. The bar on the rail is the last-frame motion; a landed wordmark held still is what the rule moving-tail bans. Use EASE.pop (a small overshoot).
Looks (ground, type, radius, accent) live in demo/demo.css; this snippet keeps neutral tokens.
Sound
Sound: droplet at 0.55 s into the move, when the accent full stop lands on the rail (default gain); no tick per letter.
