{"_id":"@crazygl/hero-firework-logo-reveal","name":"@crazygl/hero-firework-logo-reveal","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-firework-logo-reveal","version":"0.1.1","description":"Firework Logo Reveal — The hero starts dark. A burst of particles explodes outward, then curves back inward and assembles into your logo. Three-phase lifecycle, additive bloom, short trails, subtle camera shake during… 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"},"peerDependencies":{"react":">=18","react-dom":">=18"},"license":"Apache-2.0","author":{"name":"ybouane"},"homepage":"https://crazygl.com/hero/firework-logo-reveal","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-firework-logo-reveal.git"},"publishConfig":{"access":"public"},"keywords":["particle","firework","logo","burst","bloom","additive","image-input","canvas","energetic","firework-logo-reveal","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","three"],"bugs":{"url":"https://github.com/crazygl-com/hero-firework-logo-reveal/issues"},"gitHead":"f06c390c68b389e9352b10bb68fe6cfd26dabed4","_id":"@crazygl/hero-firework-logo-reveal@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-CaQGUot6wkGdc5zjTCbS3R174aKaFnfPslh7l+EUvIjlrPQL1M07300cOGijAQ+WRlplg9r5ZAIisCLmvfzhlw==","shasum":"046ff1dab924423e436e2e39c1199f658c19cef3","tarball":"https://registry.npmjs.org/@crazygl/hero-firework-logo-reveal/-/hero-firework-logo-reveal-0.1.1.tgz","fileCount":9,"unpackedSize":74416,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIE9UvuSm3TkdumYyOZiJ1Xj8o2imIm6br/y3CU6rtXl6AiAlITmVuBI0GbU7HFT0Lh7vzVwhemt2JbMhjCq6su9Etg=="}]},"_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-firework-logo-reveal_0.1.1_1782922318678_0.20431231793174032"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T16:11:58.493Z","0.1.1":"2026-07-01T16:11:58.817Z","modified":"2026-07-01T16:11:59.100Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Firework Logo Reveal — The hero starts dark. A burst of particles explodes outward, then curves back inward and assembles into your logo. Three-phase lifecycle, additive bloom, short trails, subtle camera shake during… A customizable CrazyGL animated hero","homepage":"https://crazygl.com/hero/firework-logo-reveal","keywords":["particle","firework","logo","burst","bloom","additive","image-input","canvas","energetic","firework-logo-reveal","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","three"],"repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-firework-logo-reveal.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-firework-logo-reveal/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-firework-logo-reveal/banner-full.png\" alt=\"Firework Logo Reveal\" width=\"640\">\n</p>\n\n# @crazygl/hero-firework-logo-reveal\n\nThe hero starts dark. A burst of particles explodes outward, then curves back inward and assembles into your logo. Three-phase lifecycle, additive bloom, short trails, subtle camera shake during the burst. Once the logo is assembled, move the cursor across the hero to spawn micro-firework bursts that fan out and fade. The default still capture lands mid-re-assembly — the most photogenic frame.\n\n## Demo\n[Firework Logo Reveal](https://crazygl.com/hero/firework-logo-reveal)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-firework-logo-reveal\n```\n\n## Usage\n\n```tsx\nimport FireworkLogoReveal from '@crazygl/hero-firework-logo-reveal';\n\nexport default function Hero() {\n  return (\n    <FireworkLogoReveal\n      logo=\"/brand/logo.png\"\n      heading=\"Lights up.\"\n      subheading=\"Sparks burst, curve back, and snap into your mark.\"\n      haloHex=\"#ff7a3a\"\n      accentHex=\"#5dd2ff\"\n    />\n  );\n}\n```\n\n## Customise\n\n- **Logo** — `logo` (transparent PNG/SVG alpha mask becomes the target shape), `logoZoom`, `logoCenterX/Y`, `sampleDensity`.\n- **Particles** — `particleCount`, `particleSize`, `haloSize`, `tailLength`, `coreHex`, `haloHex`, `accentHex`.\n- **Lifecycle** — `burstDuration`, `settleDuration`, `burstStrength`, `burstDrag`, `attractStrength`, `phaseShift`, `loopCycle`, `loopInterval`.\n- **Interaction** — `pointerBurstRadius`, `pointerBurstCount`, `pointerBurstColor`.\n- **Stage** — `transparent`, `bgTopHex`, `bgBotHex`, `cameraShake`.\n\n## Best for\n\n- Product launch days and big reveal moments.\n- Conference, event, and entertainment sites.\n- Celebratory campaign and brand hero sections.\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-a508c2cbdd58818eafe338443f61f238"}