{"_id":"@dangerousthings/hex-background","_rev":"2-8aa90cc8699b834e193ff6edae66e9d9","name":"@dangerousthings/hex-background","dist-tags":{"latest":"0.2.1"},"versions":{"0.2.0":{"name":"@dangerousthings/hex-background","version":"0.2.0","keywords":["dangerousthings","design-system","three.js","react-three-fiber","3d","hexagon","background"],"author":{"name":"Dangerous Things","email":"info@dangerousthings.com"},"license":"MIT","_id":"@dangerousthings/hex-background@0.2.0","maintainers":[{"name":"dangerous_tac0s","email":"ops@dangerousthings.com"}],"homepage":"https://github.com/dangerous-tac0s/dt-design-system#readme","bugs":{"url":"https://github.com/dangerous-tac0s/dt-design-system/issues"},"dist":{"shasum":"2cd69eca4b69d9e4f9d58786a3e00da7d1053458","tarball":"https://registry.npmjs.org/@dangerousthings/hex-background/-/hex-background-0.2.0.tgz","fileCount":23,"integrity":"sha512-gAhJJypIeR6mKDH4ABLBuOKFIibB54NdtKQoQOdvgnwvMv6IQDSSzd8zjVFLA5HTsm4hOXZEOydnM0iWtPMkrQ==","signatures":[{"sig":"MEYCIQDiGe39F9a90OOnMhmqeLUMCm0/ujMnuGQl7lmunAG3dgIhAO31959fTmeqW4+rP6Ow472x4+MBL2J66ck7fOtDKaR9","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29795},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./native":{"types":"./dist/native.d.ts","import":"./dist/native.js","default":"./dist/native.js"}},"gitHead":"54b58a6ac6cd1d1c99faaa94c8839638963ff6bc","scripts":{"build":"tsc","clean":"rm -rf dist","typecheck":"tsc --noEmit"},"_npmUser":{"name":"dangerous_tac0s","email":"ops@dangerousthings.com"},"repository":{"url":"git+https://github.com/dangerous-tac0s/dt-design-system.git","type":"git","directory":"packages/hex-background"},"_npmVersion":"10.8.2","description":"3D hexagon grid background for the Dangerous Things design system","directories":{},"_nodeVersion":"20.19.5","react-native":"dist/native.js","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","three":"^0.160.0","typescript":"^5.7.0","@types/react":"^18.2.0","@types/three":"^0.160.0","@react-three/fiber":"^8.18.0"},"peerDependencies":{"react":">=18","three":">=0.150","@react-three/fiber":">=8"},"peerDependenciesMeta":{"expo-gl":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/hex-background_0.2.0_1772911250834_0.7887505362312075","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@dangerousthings/hex-background","version":"0.2.1","description":"3D hexagon grid background for the Dangerous Things design system","license":"MIT","author":{"name":"Dangerous Things","email":"info@dangerousthings.com"},"repository":{"type":"git","url":"git+https://github.com/dangerous-tac0s/dt-design-system.git","directory":"packages/hex-background"},"homepage":"https://github.com/dangerous-tac0s/dt-design-system#readme","keywords":["dangerousthings","design-system","three.js","react-three-fiber","3d","hexagon","background"],"engines":{"node":">=18.0.0"},"type":"module","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./native":{"types":"./dist/native.d.ts","import":"./dist/native.js","default":"./dist/native.js"}},"main":"dist/index.js","types":"dist/index.d.ts","react-native":"dist/native.js","publishConfig":{"access":"public"},"scripts":{"build":"tsc","clean":"rm -rf dist","typecheck":"tsc --noEmit"},"peerDependencies":{"react":">=18","@react-three/fiber":">=8","three":">=0.150"},"peerDependenciesMeta":{"expo-gl":{"optional":true}},"devDependencies":{"@react-three/fiber":"^8.18.0","@types/react":"^18.2.0","@types/three":"^0.160.0","react":"^18.0.0","three":"^0.160.0","typescript":"^5.7.0"},"_id":"@dangerousthings/hex-background@0.2.1","gitHead":"0cfc9459607a33244576cd7ed2365978f9317c2a","bugs":{"url":"https://github.com/dangerous-tac0s/dt-design-system/issues"},"_nodeVersion":"22.22.2","_npmVersion":"10.9.7","dist":{"integrity":"sha512-K484fejemJ2eJOm249jbyixT1GOLM9570KSRpTMMg9MsII6YxBzwO6EzMrO8HkNoCXKoG/TrlnRLjXWBD81Atg==","shasum":"93a4356e4ff764bb983cdb70fccc122d3f321cf8","tarball":"https://registry.npmjs.org/@dangerousthings/hex-background/-/hex-background-0.2.1.tgz","fileCount":23,"unpackedSize":31744,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIC/OSCxzLn4j3vdvOt1c5PIGlS1BkJOUJL1KIxpSCVmgAiBc0TDCt2DzWjLmzUyeyBYzTsnit7g+4cisP8hNpyzOuA=="}]},"_npmUser":{"name":"dangerous_tac0s","email":"ops@dangerousthings.com"},"directories":{},"maintainers":[{"name":"dangerous_tac0s","email":"ops@dangerousthings.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/hex-background_0.2.1_1778015860650_0.5283159252505498"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-07T19:20:50.657Z","modified":"2026-05-05T21:17:40.907Z","0.2.0":"2026-03-07T19:20:50.986Z","0.2.1":"2026-05-05T21:17:40.802Z"},"bugs":{"url":"https://github.com/dangerous-tac0s/dt-design-system/issues"},"author":{"name":"Dangerous Things","email":"info@dangerousthings.com"},"license":"MIT","homepage":"https://github.com/dangerous-tac0s/dt-design-system#readme","keywords":["dangerousthings","design-system","three.js","react-three-fiber","3d","hexagon","background"],"repository":{"type":"git","url":"git+https://github.com/dangerous-tac0s/dt-design-system.git","directory":"packages/hex-background"},"description":"3D hexagon grid background for the Dangerous Things design system","maintainers":[{"name":"dangerous_tac0s","email":"ops@dangerousthings.com"}],"readme":"# @dangerousthings/hex-background\n\n3D hexagon grid background for the Dangerous Things design system. Renders an animated, instanced WebGL hex grid using Three.js and React Three Fiber. Hexagons animate to random heights on a loop, with a slowly orbiting camera.\n\n## Install\n\n```bash\nnpm install @dangerousthings/hex-background\n```\n\n### Peer Dependencies\n\n```bash\nnpm install react @react-three/fiber three\n```\n\nFor React Native, also install `expo-gl`.\n\n## Web Usage\n\nDrop-in full-viewport background that renders behind page content:\n\n```tsx\nimport { HexGridBackground } from \"@dangerousthings/hex-background\";\n\nfunction App() {\n return (\n <>\n \n
{/* your content */}
\n \n );\n}\n```\n\nThe component renders a fixed-position Canvas at `z-index: -1` with `pointer-events: none`, so it sits behind all other content. It automatically sizes the grid to the viewport and skips rendering in automated browsers (Selenium, Puppeteer).\n\n### Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `opacity` | `number` | `0.5` | Canvas opacity |\n| `hexRadius` | `number` | `0.5` | Hexagon radius |\n| `margin` | `number` | `0.05` | Spacing between hexagons |\n| `maxHeight` | `number` | `3` | Maximum animation height |\n| `animationInterval` | `number` | `1500` | Height target refresh interval in ms |\n| `cameraSpeed` | `number` | `0.02` | Camera orbital speed |\n| `cameraRadius` | `number` | `8` | Camera orbital radius |\n| `fov` | `number` | `40` | Camera field of view |\n\n## React Native Usage\n\nThe full-viewport `HexGridBackground` wrapper uses web-specific APIs. For React Native, use the lower-level `HexGrid` and `HexCamera` components directly within a native Canvas:\n\n```tsx\nimport { Canvas } from \"@react-three/fiber/native\";\nimport { HexGrid, HexCamera } from \"@dangerousthings/hex-background/native\";\n\nfunction Background() {\n return (\n \n \n \n \n \n \n );\n}\n```\n\n## Exports\n\n| Path | Description |\n|------|-------------|\n| `@dangerousthings/hex-background` | `HexGridBackground`, `HexGrid`, `HexCamera` (web) |\n| `@dangerousthings/hex-background/native` | `HexGrid`, `HexCamera` (React Native) |\n\n## Monorepo\n\nPart of the [DT Design System](https://github.com/dangerous-tac0s/dt-design-system) monorepo.\n\n## License\n\n[MIT](LICENSE)\n","readmeFilename":"README.md"}