React Scroll-Controlled 3D Generator

About the project

I already have a flat reference image of a power generator and a basic 3D file; what I need now is an engaging, WebGL-powered experience inside my React site. As the visitor swipes horizontally, the generator should animate step-by-step, revealing its internal parts and key facts so the whole component becomes a mini storytelling sequence tied directly to scroll position. You’ll receive: • the 2D concept art that defines the look and key milestones of the story • the starter 3D model (OBJ/GLB) to build on • copy and timing notes for each scroll breakpoint Your job is to refine or rebuild the model as needed, hook it up to the horizontal scroll of the page, and return clean, modular React code (ideally using Three.js / react-three-fiber with a GSAP or Framer-Motion scrub) that I can drop straight into my existing repository. Acceptance criteria • Smooth, frame-locked animation mapped 1:1 to scroll progress (no lag or jump) • Works on current Chrome, Firefox, Safari, and Edge on desktop and modern tablets • Bundle size kept lean; only essential dependencies included • Clear inline comments plus a short README that explains setup, props, and how to adjust the scroll timeline If you have live examples of similar scroll-scrubbed 3D work, please link them—I’ll decide quickly and am ready to supply assets as soon as we agree.

Skills required