Hero made by @ybouane.

@crazygl/hero-scroll-assemble-product

A 3D product begins disassembled and clicks together as you scroll the page. Once whole, the camera eases in and benefit labels fade in around it. Cinematic three-point studio lighting with HDRI reflections.

Demo

Scroll-to-Assemble Product

Install

npm install @crazygl/hero-scroll-assemble-product

Usage

import ScrollAssembleProduct from '@crazygl/hero-scroll-assemble-product';

<ScrollAssembleProduct
  productModel="https://crazygl.com/samples/camera.glb"
  assembleEnd={0.63}
  explodeDistance={1.05}
  cameraPathAmount={0.3}
/>;

Customise

• Model — productModel (GLB/GLTF), modelScale, restSpin (the angle the finished product faces). Multi-mesh files assemble per part; single-mesh models slice into fallbackBands clean bands along their longest axis.
• Assembly — scrollLength (sticky scroll height, vh), explodeDistance / explodeFromAxis (spread along vs. away from the cut axis), assembleEnd (scroll % at which it's whole), swirlAmount, restBreath.
• Benefits — showLabels, benefitLabels (one per line, up to six), accentColor for the connector dot / leader line.
• Camera — cameraDistance, cameraPathAmount (reveal dolly; 0 locks the camera).
• Lighting — environmentImage (studio HDRI), envIntensity, exposure, plus key / fill / rim colour + intensity.
• Background — transparent, bgTopColor, bgBottomColor.

Best for

• Hardware and gadget launches that want a "here's how it comes together" story.
• Furniture, home goods, and tech accessories with a hero product shot.
• Product pages and SaaS device mockups where scroll-driven assembly adds narrative.

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.