Overview

Two Good Co sells premium candles with a social mission. The recreation challenge was to capture their emotional brand story through scroll-driven narrative sections and GSAP-powered kinetic type.

Challenge

GSAP's ScrollTrigger conflicts with Next.js server components because it accesses window during module evaluation. Integrating it safely required careful dynamic imports and hydration sequencing.

• GSAP + SSR — module-level window access crashes the build
• Kinetic typography — letter-spacing animations needed pixel-precise timing per section
• Parallax images — multi-layer depths without hurting CLS

Solution

• Wrapped all GSAP initialization in useEffect with dynamic(() => import('gsap/ScrollTrigger'), { ssr: false })
• Built a useSplitText hook that registers characters as individual spans after hydration
• Used transform: translateY on image wrappers (compositor-only) with negative overflow hidden on parent for the parallax illusion

Outcome

Fully accessible (WCAG AA) despite being animation-heavy. Tab navigation works through every interactive element. Lighthouse score: 94 Performance, 100 Accessibility.