Overview
Studio site built with Next.js 14, GSAP scroll animations, Higgsfield video pipeline, and a custom design system.
The TOAKS site needed to do something most studio sites don't: demonstrate the work rather than just describe it. The stack — Next.js 14 App Router, GSAP with ScrollTrigger, Framer Motion, Tailwind — was chosen specifically to let the site be the case study.
The design system was built ground-up: a custom color scale derived from the brand palette, two font pairings (Cormorant Garamond display + Inter body), a component library that covers every UI pattern the site uses, and a strict token architecture that makes the whole thing maintainable.
The Higgsfield pipeline was integrated directly into the build process — generated images and videos are compressed, optimized, and served through Next.js Image for core web vitals compliance. GSAP handles all scroll-driven animation; Framer handles component-level transitions. The split keeps each library doing what it's best at.
Gallery
Studio Environment