{"_id":"@crazygl/hero-touch-sparkle-grid","name":"@crazygl/hero-touch-sparkle-grid","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-touch-sparkle-grid","version":"0.1.1","description":"Touch Sparkle Grid — A dark perspective grid floor receding into the distance. Pointer movement emits glowing magenta-pink and cyan sparkle particles that drift, fade, and die — a soft halo glows where the cursor rests. A customizable CrazyGL animated her","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/touch-sparkle-grid","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-touch-sparkle-grid.git"},"publishConfig":{"access":"public"},"keywords":["interactive","particles","grid","perspective","sparkles","pointer","additive","premium","touch-sparkle-grid","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","frontend","component","canvas","three"],"bugs":{"url":"https://github.com/crazygl-com/hero-touch-sparkle-grid/issues"},"gitHead":"bbc8552766e82bbb12539ff29ab306266abc1bd5","_id":"@crazygl/hero-touch-sparkle-grid@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-Msau6N6DukSChV4R8py0FVEiht+Q8uTYClpG+DYYZaELSRboc7233/NKJUH4xpDBu84URYYUILOhbB2FvODPDA==","shasum":"01eaade0e35383d8755d0aa5395bfad2b06f041a","tarball":"https://registry.npmjs.org/@crazygl/hero-touch-sparkle-grid/-/hero-touch-sparkle-grid-0.1.1.tgz","fileCount":11,"unpackedSize":57805,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAyLDKuhkT0AoQ9fUN3GJIkbBCIwfa8aaTiZnNR03b/YAiEAw5NY71wZNLEuOCwxHj8lnp0ENPLIiCGnwic0fyw6ksA="}]},"_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-touch-sparkle-grid_0.1.1_1782922733090_0.5794514719396806"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T16:18:52.880Z","0.1.1":"2026-07-01T16:18:53.224Z","modified":"2026-07-01T16:18:53.519Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Touch Sparkle Grid — A dark perspective grid floor receding into the distance. Pointer movement emits glowing magenta-pink and cyan sparkle particles that drift, fade, and die — a soft halo glows where the cursor rests. A customizable CrazyGL animated her","homepage":"https://crazygl.com/hero/touch-sparkle-grid","keywords":["interactive","particles","grid","perspective","sparkles","pointer","additive","premium","touch-sparkle-grid","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","frontend","component","canvas","three"],"repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-touch-sparkle-grid.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-touch-sparkle-grid/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-touch-sparkle-grid/banner-full.png\" alt=\"Touch Sparkle Grid\" width=\"640\">\n</p>\n\n# @crazygl/hero-touch-sparkle-grid\n\nA dark perspective grid floor receding into the distance. Pointer movement emits glowing magenta-pink and cyan sparkle particles that drift, fade, and die — a soft halo glows where the cursor rests.\n\n## Demo\n[Touch Sparkle Grid](https://crazygl.com/hero/touch-sparkle-grid)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-touch-sparkle-grid\n```\n\n## Usage\n\n```tsx\nimport TouchSparkleGrid from '@crazygl/hero-touch-sparkle-grid';\n\nexport default function Hero() {\n  return (\n    <TouchSparkleGrid\n      heading=\"Touch the grid.\"\n      sparkleRate={2}\n      colorA=\"#ff3eb5\"\n      colorB=\"#3effff\"\n    />\n  );\n}\n```\n\n## Notable controls\n\n- **Sparkle rate** (`0.5`–`4`, sweet spot `~2`) — sparks emitted per unit of pointer travel; higher makes denser, more lavish trails.\n- **Sparkle lifetime** (`0.4`–`2.5s`, default `1.2`) — how long embers linger before fading; longer leaves a glowing wake.\n- **Perspective depth** (`0.4`–`1.6`) — how far the floor recedes; larger pushes the vanishing point deeper for a more dramatic stage.\n- **Horizon fade** (`0`–`1`, default `0.85`) — how quickly the grid dissolves into the dark; high values sell the depth.\n- **Halo intensity** (`0`–`3`) — brightness of the glow under the cursor; set to `0` to remove it entirely.\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-4fa3c46d207710e25f027f658019bc80"}