Stagger & entrance sequences
The difference between elements appearing and elements arriving
Total duration is what the user perceives, not per-item delay. 5 cards at 50ms each = 250ms: orchestrated. At 160ms each = 800ms: a broken loader.
Section-level stagger
Per-section delay: 80-120ms. Three sections = 160-240ms total.
Don't stagger more than 4-5 sections.
Word-level stagger
Right for hero headlines. Wrong for body text or repeated UI.
Per-word delay: 40-80ms. A five-word headline at 60ms = 240ms. A twelve-word sentence at 60ms = 660ms. Too slow.
Keep blur subtle (4-6px). Note inline-block: transform doesn't work on inline elements.
Character-level stagger
Almost always wrong. A 20-character string at 30ms per character is 600ms.
Exception: very short strings (3-5 characters) in decorative contexts.
List item stagger
Stagger only the first 5-8 items. The rest appear simultaneously.
Contextual icon swaps
Bookmark outline to filled. Play to pause. Cross-fade with subtle scale and blur. 150ms total.
mode="wait" ensures the outgoing icon exits before the incoming enters.