{"_id":"@crazygl/hero-scroll-assemble-product","name":"@crazygl/hero-scroll-assemble-product","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-scroll-assemble-product","version":"0.1.1","description":"Scroll-to-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… A customizable CrazyGL animated her","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./metadata.json":"./metadata.json","./style.css":"./style.css"},"dependencies":{"@crazygl/core":"^0.1.1","three":"^0.160.0"},"peerDependencies":{"react":">=18","react-dom":">=18"},"license":"Apache-2.0","author":{"name":"ybouane"},"homepage":"https://crazygl.com/hero/scroll-assemble-product","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-scroll-assemble-product.git"},"publishConfig":{"access":"public"},"keywords":["3d","product","scroll","assembly","storytelling","narrative","studio","three","scroll-assemble-product","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas"],"bugs":{"url":"https://github.com/crazygl-com/hero-scroll-assemble-product/issues"},"gitHead":"0c3ace1bb80a7a66c5a24eba6f4f03cc7f9faaff","_id":"@crazygl/hero-scroll-assemble-product@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-9CSGa4ixz//yVIFvL+2mwYaVhqiA+11hdudh7Hs/3l24Z6SVxx1sNYi4Gt6UVr8+HRaaAGavN6yjR8UH10MWkA==","shasum":"1b2d2d65fb8875a06e346e136ed9a032f4622092","tarball":"https://registry.npmjs.org/@crazygl/hero-scroll-assemble-product/-/hero-scroll-assemble-product-0.1.1.tgz","fileCount":11,"unpackedSize":101174,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDdFcQxbIYpCnGqxYWwBD2WWyMJf1sd9uXoqFDEKlHv7AIhAKzVnLHF5lObR6gLWkoy26bAcN3nO37tpc3oxWGWX3UW"}]},"_npmUser":{"name":"ybouane","email":"ybouane@ybouane.com"},"directories":{},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/hero-scroll-assemble-product_0.1.1_1782922518057_0.1446109132520308"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T16:15:17.820Z","0.1.1":"2026-07-01T16:15:18.260Z","modified":"2026-07-01T16:15:18.558Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Scroll-to-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… A customizable CrazyGL animated her","homepage":"https://crazygl.com/hero/scroll-assemble-product","keywords":["3d","product","scroll","assembly","storytelling","narrative","studio","three","scroll-assemble-product","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas"],"repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-scroll-assemble-product.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-scroll-assemble-product/issues"},"license":"Apache-2.0","readme":"<sub>*Hero made by [@ybouane](https://x.com/ybouane).*</sub>\n<p align=\"center\">\n  <img src=\"https://crazygl.com/heroes/hero-scroll-assemble-product/banner-full.png\" alt=\"Scroll-to-Assemble Product\" width=\"640\">\n</p>\n\n# @crazygl/hero-scroll-assemble-product\n\nA 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.\n\n## Demo\n[Scroll-to-Assemble Product](https://crazygl.com/hero/scroll-assemble-product)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-scroll-assemble-product\n```\n\n## Usage\n\n```tsx\nimport ScrollAssembleProduct from '@crazygl/hero-scroll-assemble-product';\n\n<ScrollAssembleProduct\n  productModel=\"https://crazygl.com/samples/camera.glb\"\n  assembleEnd={0.63}\n  explodeDistance={1.05}\n  cameraPathAmount={0.3}\n/>;\n```\n\n## Customise\n\n- **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.\n- **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`.\n- **Benefits** — `showLabels`, `benefitLabels` (one per line, up to six), `accentColor` for the connector dot / leader line.\n- **Camera** — `cameraDistance`, `cameraPathAmount` (reveal dolly; 0 locks the camera).\n- **Lighting** — `environmentImage` (studio HDRI), `envIntensity`, `exposure`, plus key / fill / rim colour + intensity.\n- **Background** — `transparent`, `bgTopColor`, `bgBottomColor`.\n\n## Best for\n\n- Hardware and gadget launches that want a \"here's how it comes together\" story.\n- Furniture, home goods, and tech accessories with a hero product shot.\n- Product pages and SaaS device mockups where scroll-driven assembly adds narrative.\n\n\n\nThis hero is part of [CrazyGL](https://crazygl.com), 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.\n","readmeFilename":"README.md","_rev":"1-66734ec1c5ab5118a13d393510b2483b"}