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 15, 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.
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 15 + React 19 before most agencies had even updated from Next.js 13. Hit 100/100 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 15 + 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.