Motion without the performance tax
Subtle animation improves perceived quality — if you respect budgets, reduced motion, and ship less JavaScript.
Animation is easy to overdo. The best product sites use motion to guide attention, not decorate every element.
Use motion sparingly
I limit entrance animations to section reveals and card grids. Hover states stay CSS-first; Motion.dev handles sequences that are awkward in pure CSS.
Respect prefers-reduced-motion
Always gate non-essential animation behind a reduced-motion check. Launchfolio’s motion utilities short-circuit when users prefer less movement — this is both accessible and performance-friendly.
Lazy-load animation code
Import motion inside functions that run after paint or when elements enter the viewport. Avoid loading animation libraries on pages that don’t need them.
Measure impact
Compare Lighthouse scores before and after adding motion. If you’re dropping more than a few points, simplify or defer effects.
When done well, motion makes a static site feel alive. When done poorly, it makes a fast site feel heavy.
Related posts
Continue reading
Why Astro is my default for premium marketing sites
Astro combines static performance with flexible islands — here's how I use it for client projects that need to feel fast and polished.
A practical dark mode implementation for content sites
Theme toggles are table stakes — here's how to implement dark mode without flash, contrast issues, or maintenance pain.
Designing case studies that actually convert
Strong case studies aren't galleries — they're structured stories that help prospects imagine working with you.