We built this
on the tech we sell.
You can't sell custom-code performance to clients while running your own site on a page builder. We built the Panda CodeLab agency site on Next.js 16, React 19, and Framer Motion 12, spring physics, magnetic interactions, Spline 3D, and full WCAG 2.1 AA compliance. Zero TypeScript errors. Zero ESLint errors. This is the live proof.
View the live site at pandacodelab.com →Proof before pitch.
✕The credibility problem
We were selling clients on the idea that custom coded sites are faster, more secure, and more scalable than templates. But every sale required explaining why, because our own presence didn't prove it visually or technically. We needed the agency site itself to be the argument.
The constraint
Ship on Next.js 16 + React 19 before most agencies had even updated from Next.js 13. Hit 90+ PageSpeed with full motion animations running. Pass WCAG 2.1 AA. Zero compromises on design quality.
Solar gradient. Hybrid depth.
A custom design system built around a solar gradient palette, deep red through magenta to amber, layered over a hybrid depth approach: 80% shadows, 20% glassmorphism. Premium feel without the performance cost of heavy blur effects.
Six motion primitives. One coherent feel.
All animations are GPU-composited using only transform and opacity, never layout-triggering properties. Spring physics on every interaction. Lighthouse score unaffected.
TextReveal
Character-by-character reveal on scroll. Each letter enters with a spring easing, no linear timings.
SpotlightCard
Mouse-tracking radial glow follows cursor across every card surface. GPU-composited, zero repaints.
MagneticButton
CTA buttons physically follow cursor within a 60px radius using spring physics. Snaps back on exit.
Hero3D (Spline)
Full 3D scene loads lazily after LCP. Placeholder shown while 3D initialises, no CLS.
Lenis Scroll
Momentum-based smooth scrolling with configurable lerp factor. Disabled on mobile for native feel.
Motion Preferences
prefers-reduced-motion detected on mount. All animations replaced with instant transitions for accessibility.
prefers-reduced-motion is not optional
A dedicated usePrefersReducedMotion() hook reads the system preference on mount. Every animated component checks this flag and substitutes instant transitions. Not just a Framer Motion prop, a first-class architectural decision.
WCAG 2.1 Level AA. Not a checkbox.
Accessibility is also an SEO signal. Google's Page Experience algorithm rewards sites that work for all users. Every interactive element passes keyboard navigation, every image has descriptive alt text, and every color pair meets contrast ratio requirements.
9 pages. Every one hand-coded.
Cutting edge. Every layer.
Next.js 16 + React 19, shipped before most agencies updated from Next.js 13. Tailwind CSS 4 (the new oxide engine). Framer Motion 12 with the latest spring physics API.
Production-ready. Every metric.
What this actually meant for the business.
We don't just build fast websites for clients. We built one for ourselves — with every technique we recommend, applied to our own brand.
Full 3D scenes, scroll animations, spring physics on buttons — and still 90+ on PageSpeed. This is proof it's possible, not a trade-off.
Zero accessibility violations. Every interactive element has a focus state, every image has alt text, every animation respects prefers-reduced-motion.
Every technique we sell — custom animations, zero plugins, sub-1s load — runs on our own site. If it wasn't good enough for us, we wouldn't sell it to you.
Everything that was built.
Frequently Asked Questions
Why build an agency website in Next.js 16 instead of a website builder?
We couldn't sell custom-code performance to clients while running our own site on Webflow or WordPress. Next.js 16 gave us App Router, React 19, server components, and full control over every render. The result: sub-700ms load times, 90+ PageSpeed, and zero platform fees. It's our live proof of concept.
Do Framer Motion animations hurt performance?
Not when implemented correctly. We use hardware-accelerated CSS properties only (transform, opacity), never layout-triggering properties. Spring physics are calculated in the browser compositor thread. We also detect prefers-reduced-motion and disable all animations for users who request it. The animated site scores the same as a static site on Lighthouse.
What is WCAG 2.1 AA compliance and why does it matter for a business website?
WCAG 2.1 Level AA is the international accessibility standard that covers keyboard navigation, screen reader compatibility, focus indicators, color contrast ratios, and motion preferences. In the US, ADA compliance lawsuits against websites are increasing. Every interactive element on this site has focus rings, ARIA labels, and keyboard navigation. Accessibility is also a direct ranking signal in Google's Page Experience algorithm.
How does the Spline 3D integration affect page load time?
The 3D scene is lazy-loaded, it only initializes after the critical above-the-fold content has rendered. We use Next.js dynamic imports with a lightweight placeholder, so the initial page load is unaffected. The 3D scene loads progressively in the background while the user reads the page.
Can you build a site like this for my agency or business?
Yes. We build premium agency and business websites on this exact stack: Next.js 14+, TypeScript, Tailwind CSS, Framer Motion, and Lenis smooth scroll. Pricing starts from $5,900 for a full custom coded agency site. Timeline is typically 4-6 weeks. Every site includes schema markup, Core Web Vitals optimization, and WCAG 2.1 AA compliance.