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. Clip: wordmark-cascade.mp4. Demo: demo/wordmark-cascade.html.

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 and timing

The clip runs 1.9 s. The look is brutal.

The clip uses 3 named eases 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

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.