Stagger & entrance sequences

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.