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.

10m read timeFrom tympanus.net
Post cover image
Table of contents
The ProjectThe StackThe FeaturesPhysics-based Interactive BlockThe Use of AI in the ProjectFinal WordsCredits
2 Comments

Sort: