{"_id":"@crazygl/hero-volumetric-particle-fog","name":"@crazygl/hero-volumetric-particle-fog","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-volumetric-particle-fog","version":"0.1.1","description":"Soft Volumetric Particle Fog — Thousands of tiny semi-transparent dust motes drift in depth inside a soft beam of light. Curl-noise keeps them floating naturally; depth fog reads volumetric; the pointer stirs a slow… A customizable CrazyGL animated hero s","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/volumetric-particle-fog","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-volumetric-particle-fog.git"},"publishConfig":{"access":"public"},"keywords":["particles","fog","dust","volumetric","curl-noise","atmospheric","premium","pointer","three","depth","volumetric-particle-fog","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas"],"bugs":{"url":"https://github.com/crazygl-com/hero-volumetric-particle-fog/issues"},"gitHead":"078d04749c2c2f9624f6deb7dc6f7c9abbe051b0","_id":"@crazygl/hero-volumetric-particle-fog@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-CzHHgoW6/rCuZOBxxIsuiE0D2DeCdRrrrgcnNVYZr+CVIOomKDFOebOp1V5VkTBwLUvJF9oisFfpU8d22KQG0Q==","shasum":"139c6a72da800a5a1d911b93f2adb37dc28fd949","tarball":"https://registry.npmjs.org/@crazygl/hero-volumetric-particle-fog/-/hero-volumetric-particle-fog-0.1.1.tgz","fileCount":11,"unpackedSize":72281,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCFERuU219cGANLkwcjZdHkmfnbNmyMsFd2KsmWfxPQqwIgCtxJsiJmPAnRpCHcmc99WaFLXvFPTgS5/8l4b0Ovspg="}]},"_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-volumetric-particle-fog_0.1.1_1782968937693_0.8025379961749677"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-02T05:08:57.596Z","0.1.1":"2026-07-02T05:08:57.834Z","modified":"2026-07-02T05:08:58.107Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Soft Volumetric Particle Fog — Thousands of tiny semi-transparent dust motes drift in depth inside a soft beam of light. Curl-noise keeps them floating naturally; depth fog reads volumetric; the pointer stirs a slow… A customizable CrazyGL animated hero s","homepage":"https://crazygl.com/hero/volumetric-particle-fog","keywords":["particles","fog","dust","volumetric","curl-noise","atmospheric","premium","pointer","three","depth","volumetric-particle-fog","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-volumetric-particle-fog.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-volumetric-particle-fog/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-volumetric-particle-fog/banner-full.png\" alt=\"Soft Volumetric Particle Fog\" width=\"640\">\n</p>\n\n# @crazygl/hero-volumetric-particle-fog\n\nThousands of tiny semi-transparent dust motes drift in depth inside a soft beam of light. Curl-noise keeps them floating naturally; depth fog reads volumetric; the pointer stirs a slow vortex that swirls particles away and leaves a fading wake, like moving a hand through mist.\n\n## Demo\n[Soft Volumetric Particle Fog](https://crazygl.com/hero/volumetric-particle-fog)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-volumetric-particle-fog\n```\n\n## Usage\n\n```tsx\nimport VolumetricParticleFog from '@crazygl/hero-volumetric-particle-fog';\n\nexport default function Hero() {\n  return (\n    <VolumetricParticleFog\n      heading=\"Through the mist.\"\n      particleCount={6000}\n      depthFog={1.6}\n    />\n  );\n}\n```\n\n## Customise\n\n- **Content** — `contentType` (`heading` / `two-columns` / `custom`) with `heading`, `subheading`, `column1`, `column2` or `content`.\n- **Fog** — `particleCount`, `particleColor`, `backgroundColor`, `depthFog` (Beer-Lambert recession), `edgeDensity` (push dust to the edges, keep the centre calm).\n- **Drift** — `driftSpeed` (curl-noise flow), `noiseScale` (eddy size), `particleSize`, `opacity`.\n- **Pointer** — `currentStrength` and `currentRadius` (how hard / how wide the vortex wake reaches).\n- **Readability** — `centerCalm` (radial fade behind the heading). **Backdrop** — `transparent`.\n\n## Best for\n\n- Premium SaaS and AI product launches that want a calm, atmospheric backdrop.\n- Luxury, fragrance and beauty brands.\n- Film and photography portfolios where the heading should sit cleanly inside the scene.\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-da1663ab1377effb65ee2517b6d1e158"}