{"_id":"@crazygl/hero-halftone-field","name":"@crazygl/hero-halftone-field","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-halftone-field","version":"0.1.1","description":"Halftone Field — A full-bleed AM halftone screen — thousands of ink dots on an aspect-corrected grid whose size is driven by a slow, domain-warped noise field sampled at each cell's centre. Dark zones grow fat dots,… 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"},"peerDependencies":{"react":">=18","react-dom":">=18"},"license":"Apache-2.0","author":{"name":"ybouane"},"homepage":"https://crazygl.com/hero/halftone-field","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-halftone-field.git"},"publishConfig":{"access":"public"},"keywords":["halftone","dots","editorial","print","noise","ambient","shader","premium","graphic","halftone-field","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"],"bugs":{"url":"https://github.com/crazygl-com/hero-halftone-field/issues"},"gitHead":"faa4d462787431a843f712a031ec1c9a9a922dc1","_id":"@crazygl/hero-halftone-field@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-hfcAnmDsi41e7DuiuaIKrGRakWg8gMqJLhSEQ7G6vzdMy7ojxHCtbKLtLX+2bBS9HKT6FZvBPeQc9H6Bhz2oCg==","shasum":"a3250e22f44a335cac78f1e2ddd6bfe9cae87bfd","tarball":"https://registry.npmjs.org/@crazygl/hero-halftone-field/-/hero-halftone-field-0.1.1.tgz","fileCount":9,"unpackedSize":45208,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDiMPPX35wGxpgOKOL+yRtMyV9ESK5r6WjwSei0/iWAzgIhAK2vVC9fkIjY8clco+3lTTHVc8UGI53wEUFDv1qp3/E6"}]},"_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-halftone-field_0.1.1_1782922345300_0.3309279157635945"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T16:12:25.181Z","0.1.1":"2026-07-01T16:12:25.435Z","modified":"2026-07-01T16:12:25.658Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Halftone Field — A full-bleed AM halftone screen — thousands of ink dots on an aspect-corrected grid whose size is driven by a slow, domain-warped noise field sampled at each cell's centre. Dark zones grow fat dots,… A customizable CrazyGL animated hero s","homepage":"https://crazygl.com/hero/halftone-field","keywords":["halftone","dots","editorial","print","noise","ambient","shader","premium","graphic","halftone-field","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"],"repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-halftone-field.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-halftone-field/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-halftone-field/banner-full.png\" alt=\"Halftone Field\" width=\"640\">\n</p>\n\n# @crazygl/hero-halftone-field\n\nA full-bleed AM halftone screen — thousands of ink dots on an aspect-corrected grid whose size is driven by a slow, domain-warped noise field sampled at each cell's centre. Dark zones grow fat dots, light zones shrink to pinpricks, and the field visibly evolves over time so the dot sizes breathe. Dot contrast intensifies toward the frame edges while the centre stays calm so the heading reads. Bold, graphic, editorial.\n\n## Demo\n[Halftone Field](https://crazygl.com/hero/halftone-field)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-halftone-field\n```\n\n## Usage\n\n```tsx\nimport HalftoneField from '@crazygl/hero-halftone-field';\n\nexport default function Hero() {\n  return (\n    <HalftoneField\n      heading=\"In full relief.\"\n      cellSize={12}\n      dotColor=\"#707070\"\n    />\n  );\n}\n```\n\n## Customise\n\n- **Halftone** — `cellSize` (grid pitch px), `dotGap`, `dotColor`, `backgroundColor` (paper), `maxDotScale`, `fieldScale`, `fieldSpeed` (drift), `invert`.\n- **Edges** — `edgeIntensity` (boost contrast toward edges) and `centerCalm` (flatten the centre for legibility).\n- **Backdrop** — `transparent` to composite dots over your own page background.\n\n## Best for\n\n- Editorial and magazine-style sites\n- Type-led brand and design-studio pages\n- Print-adjacent products\n- Fashion and culture launches wanting a bold graphic gesture\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-b36ad4a0e31f379ce9c42e08577e0e06"}