A Perfect 100 Lighthouse Score Without Sacrificing Animation: The MorThinks Case Study
How we built an award-nominated digital agency's own website with buttery-smooth Framer Motion animation and interactive WebGL elements — while still hitting a perfect 100/100 Lighthouse performance score.
MorThinks is a creative digital agency, and their own website is the product — it has to prove their design capability on first load. Their site, live at morthinks.com, is one of ours, listed as a Case Study on our /projects page.
The problem
A creative agency's portfolio site lives or dies on visual polish: smooth scroll animation, page transitions, interactive WebGL elements. But those are exactly the things that usually wreck a Lighthouse performance score, because they typically mean large JavaScript bundles and layout-blocking animation work on the main thread. The brief was to deliver both — real design ambition and genuinely fast load times — not a compromise between them.
What we built
We used React Server Components and dynamic imports to keep the initial JavaScript bundle minimal, only loading the heavier animation and WebGL code once it's actually needed on screen. Framer Motion handled the scroll animations and page transitions, tuned to run smoothly without blocking the main thread.
- ▸React Server Components to minimize what ships in the initial bundle.
- ▸Dynamic imports so heavy animation/WebGL code loads only when needed.
- ▸Framer Motion for scroll animation and page transitions, tuned for main-thread performance.
- ▸Deployed on Vercel for edge-optimized delivery.
The result
MorThinks achieved a perfect 100/100 Lighthouse score while still rendering complex animation — and the site was nominated for an Awwwards recognition, validating that performance and design ambition aren't actually a trade-off when the architecture is right.