A behind-the-scenes look at how we built Maxima Therapy with playful interactions, creative code, and a little AI help along the way.

Codrops stands at the forefront of innovation in web design, serving as a boundless source of inspiration and knowledge for designers and developers alike. Through a captivating array of tutorials, demos, and showcases, Codrops invites creatives to embark on a journey of exploration, pushing the boundaries of what's possible in web development. From  CSS techniques and JavaScript animations to immersive user interfaces and experiential storytelling, Codrops empowers designers and developers to unleash their creativity and craft unparalleled digital experiences that captivate and engage audiences.

Codrops

A behind-the-scenes case study of building the Maxima Therapy website, a highly interactive and illustrated site for a neurodivergent support organization. The stack includes React Router, Sanity CMS, Cloudflare Pages, GSAP with ScrollTrigger, Lenis smooth scroll, Lottie animations, Matter.js physics, and Tailwind CSS. Key technical highlights include a draggable SVG carousel with Lottie animations, canvas-based composite layering for scroll-reactive backgrounds, physics-based rope interactions using Matter.js, SVG morphing with GSAP's MorphSVG plugin, and a mouse-driven water ripple effect generated with Claude Code. The post also reflects honestly on AI-assisted development: Claude Code accelerated tedious tasks like SVG optimization, TypeScript typing, and CMS block generation, but occasionally produced inconsistent results and created a sense of losing control over the codebase when used for larger features.

Building the Maxima Therapy Website: React, GSAP, and Dabbling with AI