All posts
Design · March 20, 2026 · 5 min read
Motion has to earn its render budget
Animation guides attention or confirms an action — anything else gets cut. Our working rules for motion that ships at 98 Lighthouse.
Our sites animate constantly and still hit a 98 median Lighthouse score. The trick isn't clever engineering — it's an editorial rule: every animation must guide attention or confirm an action. Decoration doesn't survive review.
The rules we actually use
- Transforms and opacity only on the hot path — nothing that triggers layout
- Scroll-driven reveals run once; users re-reading a page shouldn't re-earn it
- Respect prefers-reduced-motion completely, not partially — it's an accessibility contract
- Duration under 600ms for interface motion; longer belongs to storytelling moments only
- If a stakeholder asks 'what does this animation do?', the honest answer can't be 'it's cool'
Why restraint reads as quality
Users can't articulate why restrained motion feels premium, but they feel the difference between choreography and noise. One well-timed reveal on a stat that matters outperforms a page where everything floats.
Motion is typography's louder sibling: powerful in proportion to how rarely you raise your voice.