Bright ≠ Tacky: 3D & Motion Without Tanking Core Web Vitals
“Bold” doesn’t have to be “heavy”
Saturated colors, 3D assets, and video heroes can become molasses if overused. Motion’s job is to explain and confirm, not distract. Well‑tuned motion/3D is interface language - not confetti.
Where motion is mandatory
Transaction confirmation, state changes, errors.
Transitions between critical states (wallet connect, validator choice, swap).
Explainers for complex ideas - short motion beats paragraphs.
Performance discipline (non‑negotiable)
LCP < 2.5 s: move heavy video out of hero; use poster frames + lazy load.
CLS < 0.1: lock container sizes to prevent jumps.
60 fps for meaningful transitions: less blur/shadow, measured parallax.
Use SVG/Canvas/WebGL intentionally - and sparingly.
Micro‑interactions save support
Skeletons, progress bars, and humane toasts answer “what’s happening?” They cut panic and support load - a direct cost saving.
Anti‑patterns that scream “tacky”
Heavy 3D scenes instead of meaning.
Animations with no job to do.
Neon gradients that kill contrast/readability.
Autoplay without user control.
