arctic-footwear

byNikunj Thakur

Act as a senior creative technologist who builds award-winning DTC footwear sites. Build a single-page, responsive New Balance landing page (tone: newbalance.com). Hero product: the 9060. Goal: pick a colorway and size, then add to bag. Stack: Next.js 14, TypeScript, Tailwind on design tokens, GSAP + ScrollTrigger, Lenis smooth scroll, Framer Motion, React Three Fiber (lazy, desktop only). Brand: understated confidence, short declarative copy. Bone #F4F2ED ground, heritage grey #8A8A8D, black #050505, red #CF0A2C as a rare accent. Tight display grotesk, hero H1 clamped 64px to 168px, mono for specs. Sections: preloader with load-tied counter; scroll-reactive nav; layered hero with clip-path headline reveal and a floating shoe; a pinned scroll-driven 360 rotation (72-frame WebP canvas, scrub 0.6) with spec callouts on drawn leader lines; exploded midsole view; colorway configurator that morphs every CSS custom property on swatch click; grey heritage story with a drawing timeline rail; velocity-reactive marquee; collection grid with GSAP Flip into detail; athlete block; sticky add-to-bag bar. Motion tokens: entrances power4.out 0.9s, micro 0.25s, stagger 0.07s capped at 0.6s, scrub never true. Animate only transform, opacity, clip-path. Budgets: LCP under 2.0s, CLS under 0.05, 60fps through pins, full prefers-reduced-motion fallback. No templates, no gradients, no lorem ipsum, no competitor assets. Present tokens, hero composition and a motion inventory before writing code.