Pretty motion that tanks conversion is debt
Brands want immersion; SEO wants speed—the fight is usually the hero animation. A motion performance budget gives design and engineering numbers before critique: max script, max duration, allowed layout impact. We honor reduced-motion by default and isolate heavy 3D on secondary routes. Below is a PR-ready budget table. Fold this into KSX Studio discover→design→build→launch: named owner, Definition of Done, staging proof, and rollback so verbal alignment does not drift.
Write budget dimensions
Hero LCP type, animation JS KB, max continuous seconds, concurrent layers, third-party stacking rules. No numbers, no critique. Fold this into KSX discover→design→build→launch checks on staging so verbal alignment does not drop the requirement. Fold this into KSX Studio discover→design→build→launch: named owner, Definition of Done, staging proof, and rollback so verbal alignment does not drift.
Prefer CSS/compositor props
Prefer transform/opacity; avoid layout-thrashing top/height. Sample scroll drivers carefully. Remove decorative flashes from the critical path. Fold this into KSX discover→design→build→launch checks on staging so verbal alignment does not drop the requirement. Fold this into KSX Studio discover→design→build→launch: named owner, Definition of Done, staging proof, and rollback so verbal alignment does not drift.
Decouple LCP from hero motion
Paint LCP first, enhance later. Do not wait on client mount to show the H1. Poster image and fonts precede timeline animation. Fold this into KSX discover→design→build→launch checks on staging so verbal alignment does not drop the requirement. Fold this into KSX Studio discover→design→build→launch: named owner, Definition of Done, staging proof, and rollback so verbal alignment does not drift.
reduced-motion is mandatory
When users prefer reduced motion, ship static alternatives that keep hierarchy. Accessibility and compliance—not taste. Fold this into KSX discover→design→build→launch checks on staging so verbal alignment does not drop the requirement. Fold this into KSX Studio discover→design→build→launch: named owner, Definition of Done, staging proof, and rollback so verbal alignment does not drift.
Isolate 3D/video entry points
Load heavy assets post-interaction or on secondary pages. Static posters on first paint. Gate with immersive-production rules. Fold this into KSX discover→design→build→launch checks on staging so verbal alignment does not drop the requirement. Fold this into KSX Studio discover→design→build→launch: named owner, Definition of Done, staging proof, and rollback so verbal alignment does not drift.
Measure lab + field
Record performance traces on staging; watch INP/LCP regressions after launch. Same script when motion grows. Fold this into KSX discover→design→build→launch checks on staging so verbal alignment does not drop the requirement. Fold this into KSX Studio discover→design→build→launch: named owner, Definition of Done, staging proof, and rollback so verbal alignment does not drift.
Design critique prompts
What does this motion explain? Does removing it lose comprehension? What is the fallback if over budget? Capture in notes. Fold this into KSX discover→design→build→launch checks on staging so verbal alignment does not drop the requirement. Fold this into KSX Studio discover→design→build→launch: named owner, Definition of Done, staging proof, and rollback so verbal alignment does not drift.
Checklist
- 1Written motion budget in the design system
- 2Hero LCP independent of client mount
- 3Implement reduced-motion static alternatives
- 4Heavy 3D/video not default on first paint
- 5Motion changes trigger performance regression scripts
Key takeaways
- Motion budgets rank with visual standards.
- LCP before decoration—never reverse.
- Fallbacks are part of the design.
FAQ
- Client insists on full-screen 3D home?
- Show performance/conversion risk; offer entry page + experience page split.
- GSAP/Framer OK?
- Yes within KB budget without layout thrash; prefer CSS when enough.
- Explain to non-technical stakeholders?
- Before/after field metrics and mobile network videos beat jargon.