{"_id":"@crazygl/hero-floating-product","name":"@crazygl/hero-floating-product","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-floating-product","version":"0.1.1","description":"Floating Product — A 3D product model drifts and slowly turns in a quiet studio atmosphere. The model wears its own PBR textures; soft dust particles drift through the air around it. A customizable CrazyGL animated hero section — WebGL, React, drop-in.","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.184.0"},"peerDependencies":{"react":">=18","react-dom":">=18"},"license":"Apache-2.0","author":{"name":"ybouane"},"homepage":"https://crazygl.com/hero/floating-product","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-floating-product.git"},"publishConfig":{"access":"public"},"keywords":["3d","product","pbr","studio","dust","atmosphere","premium","three","floating-product","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas"],"bugs":{"url":"https://github.com/crazygl-com/hero-floating-product/issues"},"gitHead":"bf7a467da926e95794850e20d7c6a74688032116","_id":"@crazygl/hero-floating-product@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-S6j7WS5dI/6U4pTuTxTgxHZqT0GfsTaqa6gsEorqS4G94VVPGeunJn2FYLK54sjLemmWqmLqwtfa/2VU4GQ5TQ==","shasum":"257a51fff7a98217a95a36fc8486bc68b8c142fd","tarball":"https://registry.npmjs.org/@crazygl/hero-floating-product/-/hero-floating-product-0.1.1.tgz","fileCount":9,"unpackedSize":67306,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCicP1m+qI6uFzAkda+eCiS6W1JOsbbF2eb/NNgMsHsOwIgdIO7MSneNo17K/8ekHj1m77/ciaEtzl7lHvYN9orlzc="}]},"_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-floating-product_0.1.1_1782922326592_0.5082606601949473"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T16:12:06.345Z","0.1.1":"2026-07-01T16:12:06.749Z","modified":"2026-07-01T16:12:06.958Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Floating Product — A 3D product model drifts and slowly turns in a quiet studio atmosphere. The model wears its own PBR textures; soft dust particles drift through the air around it. A customizable CrazyGL animated hero section — WebGL, React, drop-in.","homepage":"https://crazygl.com/hero/floating-product","keywords":["3d","product","pbr","studio","dust","atmosphere","premium","three","floating-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-floating-product.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-floating-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-floating-product/banner-full.png\" alt=\"Floating Product\" width=\"640\">\n</p>\n\n# @crazygl/hero-floating-product\n\nA 3D product model drifts and slowly turns in a quiet studio atmosphere. The model wears its own PBR textures; soft dust particles drift through the air around it.\n\n## Demo\n[Floating Product](https://crazygl.com/hero/floating-product)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-floating-product\n```\n\n## Usage\n\n```tsx\nimport FloatingProduct from '@crazygl/hero-floating-product';\n\nexport default function Hero() {\n  return (\n    <FloatingProduct\n      heading=\"Made to be admired.\"\n      productModel=\"/models/camera.glb\"\n      environmentImage=\"/hdri/studio.avif\"\n      layout=\"content-left\"\n    />\n  );\n}\n```\n\n## Customise\n\n- **Layout** — `layout` (centered / content-left / content-right), `positionX`, `positionY`, `dragInertia`.\n- **Product** — `productModel` (GLB/GLTF), `productScale`, `spinSpeed`, `hoverAmp`, `parallaxAzimuth`, `parallaxElevation`.\n- **Dust** — `dustCount`, `dustSize`, `dustSpeed`, `dustSway`, `dustOpacity`, `dustColor`, `windStrength`.\n- **Lighting** — `environmentImage` (HDRI), `envIntensity`, `exposure`, key/fill light colours and intensities.\n- **Background** — `transparent`, `bgTopColor`, `bgBottomColor`.\n\n## Best for\n\n- Premium hardware launches and e-commerce hero pages.\n- Jewellery, watch and audio-gear brands where the product is the story.\n- Studio / showroom product showcases.\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-7667c5c74a035e636b0e18911e1d5916"}