← Back to jaysta

Product site

Jacket

A real-time 3D product hero for a technical outerwear brand, built on Next.js 16 and Three.js.

View Live →
  • ( Next.js )
  • ( Three.js )
  • ( GLB )

A product landing page centered on a live, lit, Draco-compressed GLB model rendered directly in the browser rather than a pre-rendered video or image — the hero jacket is an actual 3D asset the scene lights and frames, not a flat render standing in for one.

Built on the Next.js 16 (Turbopack) / React 19 stack with react-spring driving the UI motion and Lenis handling smooth scroll, on top of Tailwind CSS v4 for layout and styling.

Notable

  • Hero subject is a real glTF/GLB mesh loaded and lit at runtime, not a baked image standing in for 3D.
  • Draco geometry compression keeps the model lightweight enough for a fast first paint.
  • Smooth-scroll (Lenis) and spring-driven UI motion (react-spring) instead of scroll-jank or instant-snap transitions.

Stack

  • Next.js 16
  • React 19
  • Three.js
  • react-spring
  • Lenis
  • Tailwind CSS v4

Want something like this?

Start a Project