{"_id":"@crazygl/hero-depth-wave-field","_rev":"2-82945ce4af7ceec57ac68d90f633fcfc","name":"@crazygl/hero-depth-wave-field","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@crazygl/hero-depth-wave-field","version":"0.1.0","author":{"name":"ybouane"},"license":"Apache-2.0","_id":"@crazygl/hero-depth-wave-field@0.1.0","maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"homepage":"https://crazygl.com/hero/depth-wave-field","bugs":{"url":"https://github.com/crazygl-com/hero-depth-wave-field/issues"},"dist":{"shasum":"8372e8b6e075e47f6615fcfeb10349168ffd48fc","tarball":"https://registry.npmjs.org/@crazygl/hero-depth-wave-field/-/hero-depth-wave-field-0.1.0.tgz","fileCount":11,"integrity":"sha512-Ey3J2vDLMS/j5lEOVaurBIsX001wngnMfXF7ikVNd2NNJ/+QsoUts8ZG8xSm9Dn3+VZQHal+AJlvF9RutvWBlg==","signatures":[{"sig":"MEUCIQCgWuSksb0DbRcE4GKVebxtNhzC3sji7Q72g3rvuT6sSAIgC2oddZXvgiI1hCndvuDkFcq1e+lY4ZCGdJC4bVNPQHc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":55947},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./style.css":"./style.css","./metadata.json":"./metadata.json"},"gitHead":"b7c2111b8ca34eb73bb5ae9411e467022f40ad39","_npmUser":{"name":"ybouane","email":"ybouane@ybouane.com"},"repository":{"url":"git+https://github.com/crazygl-com/hero-depth-wave-field.git","type":"git"},"_npmVersion":"11.12.0","description":"A topographic depth-sensing point cloud — a perspective grid of glowing purple dots rippling through traveling waves and dissolving into black.","directories":{},"_nodeVersion":"24.14.0","dependencies":{"three":"^0.160.0","@crazygl/core":"^0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/hero-depth-wave-field_0.1.0_1782870905634_0.7677919586596078","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@crazygl/hero-depth-wave-field","version":"0.1.1","description":"Depth Wave Field — A perspective grid of small glowing dots forms an undulating 3D wave terrain that recedes into the distance and fades to black — the look of a topographic depth-sensing point cloud. Smooth traveling… A customizable CrazyGL animated hero","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/depth-wave-field","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-depth-wave-field.git"},"publishConfig":{"access":"public"},"keywords":["3d","point-cloud","depth","waves","terrain","purple","particles","technical","three","premium","depth-wave-field","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas"],"bugs":{"url":"https://github.com/crazygl-com/hero-depth-wave-field/issues"},"gitHead":"8ee2c912e81052547b6223e2e1aebbec616d2288","_id":"@crazygl/hero-depth-wave-field@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-5BtX5p/8KDEKZWIcPA3+0jUdm7ipK2vyfbJ2/OBnkbiwvjg+vmQBZoHaSHnIflXcyuBxYrsO9skDbPnlTeWUlg==","shasum":"f9ae3c93e50fbd34212fbfd52fbe21ae82b9bc29","tarball":"https://registry.npmjs.org/@crazygl/hero-depth-wave-field/-/hero-depth-wave-field-0.1.1.tgz","fileCount":11,"unpackedSize":56512,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCXXRX3PhVM8hx7FQvQTLjRr006x8S4bLKPjAsy4srtwgIhANdD/WofyaLfoVyGFXPnGg/nbNXO3igrYGZ2mS0LWC+H"}]},"_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-depth-wave-field_0.1.1_1782922304358_0.18084045941150895"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T01:55:05.373Z","modified":"2026-07-01T16:11:44.622Z","0.1.0":"2026-07-01T01:55:05.785Z","0.1.1":"2026-07-01T16:11:44.492Z"},"bugs":{"url":"https://github.com/crazygl-com/hero-depth-wave-field/issues"},"author":{"name":"ybouane"},"license":"Apache-2.0","homepage":"https://crazygl.com/hero/depth-wave-field","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-depth-wave-field.git"},"description":"Depth Wave Field — A perspective grid of small glowing dots forms an undulating 3D wave terrain that recedes into the distance and fades to black — the look of a topographic depth-sensing point cloud. Smooth traveling… A customizable CrazyGL animated hero","maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"readme":"<sub>*Hero made by [@ybouane](https://x.com/ybouane).*</sub>\n<p align=\"center\">\n  <img src=\"https://crazygl.com/heroes/hero-depth-wave-field/banner-full.png\" alt=\"Depth Wave Field\" width=\"640\">\n</p>\n\n# @crazygl/hero-depth-wave-field\n\nA perspective grid of small glowing dots forms an undulating 3D wave terrain that recedes into the distance and fades to black — the look of a topographic depth-sensing point cloud. Smooth traveling waves ripple through the field; crests glow electric violet, troughs and far rows sink into deep indigo. The pointer pushes a ripple toward the cursor.\n\n## Demo\n[Depth Wave Field](https://crazygl.com/hero/depth-wave-field)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-depth-wave-field\n```\n\n## Usage\n\n```tsx\nimport DepthWaveField from '@crazygl/hero-depth-wave-field';\n\nexport default function Landing() {\n  return (\n    <DepthWaveField\n      heading=\"Powerful 3D depth sensing.\"\n      cameraTilt={38}\n      pointerRipple={0.6}\n    />\n  );\n}\n```\n\n## Customise\n\n- **Grid** — `gridResolution` (points per side), `gridSize` (world extent), `pointSize`.\n- **Waves** — `waveHeight`, `waveSpeed`, `waveScale` (wavelength).\n- **Color** — `crestColor`, `troughColor`, `backgroundColor`.\n- **Camera** — `cameraTilt` (framing), `fogDensity` (depth fade).\n- **Interaction** — `pointerRipple` (cursor bulge strength).\n- **Backdrop** — `transparent` to composite over your own page.\n\n## Best for\n\n- 3D-sensing / LiDAR / spatial-computing products\n- AI and data-infrastructure landing pages\n- Hardware launches and instrument-like technical brands\n- Any premium hero that wants a precise depth-scan backdrop\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","keywords":["3d","point-cloud","depth","waves","terrain","purple","particles","technical","three","premium","depth-wave-field","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas"]}