{"_id":"@crazygl/hero-audio-reactive","_rev":"2-74cf3ee7790660ea1acc6b9c241e6420","name":"@crazygl/hero-audio-reactive","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@crazygl/hero-audio-reactive","version":"0.1.0","author":{"name":"ybouane"},"license":"Apache-2.0","_id":"@crazygl/hero-audio-reactive@0.1.0","maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"homepage":"https://crazygl.com/hero/audio-reactive","bugs":{"url":"https://github.com/crazygl-com/hero-audio-reactive/issues"},"dist":{"shasum":"2c6ebaec070ed4168bd53dda24d43e0e99fc2cb1","tarball":"https://registry.npmjs.org/@crazygl/hero-audio-reactive/-/hero-audio-reactive-0.1.0.tgz","fileCount":9,"integrity":"sha512-aajNsl1SQvcK5YVv4SzSMEW2THsf3fqi0eJbXQVxw3xMd3TngcomzolY4ku1plX3o1EFKtLpE6OdRJ3Et0A9fg==","signatures":[{"sig":"MEYCIQDaL0m3LMND9ZGYHq3RTII1rpXa+NO4YoqSbXZfNOoibwIhAP7oMs/DEWJSc5TmvnkeSMHiX1DE5PgWifj94KfnF1JW","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":66988},"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":"2a1c80ee205ffffc0bb26d46a7507268f0685fe1","_npmUser":{"name":"ybouane","email":"ybouane@ybouane.com"},"repository":{"url":"git+https://github.com/crazygl-com/hero-audio-reactive.git","type":"git"},"_npmVersion":"11.12.0","description":"Audio-Reactive Hero — a central logo/preview framed by a reactive frequency-bar ring and waveform, pulsing on the beat. Alive without sound; optional mic/file input.","directories":{},"_nodeVersion":"24.14.0","dependencies":{"@crazygl/core":"^0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/hero-audio-reactive_0.1.0_1782870510336_0.4685852301023814","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@crazygl/hero-audio-reactive","version":"0.1.1","description":"Audio-Reactive Hero — A central logo or preview image framed by a reactive visualizer — a radial frequency-bar ring and waveform that pulse with glow blooms on every beat. Alive without sound, with optional mic or file… 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/audio-reactive","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-audio-reactive.git"},"publishConfig":{"access":"public"},"keywords":["audio","visualizer","music","waveform","spectrum","reactive","premium","audio-reactive","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"],"bugs":{"url":"https://github.com/crazygl-com/hero-audio-reactive/issues"},"gitHead":"140fd4e2b2499109bd9f86776cab1589b9f42b0e","_id":"@crazygl/hero-audio-reactive@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-BuiWF1+onrJ5EzW3kCTEHEaI+7dJlg62HK20ZoZLbeVtJDwkzpdBM0FgxYNLjvuVVhzYG7a9oI/0czMxh4Xybg==","shasum":"b11c3f98c997b7f68356b677c0819c1f218841b0","tarball":"https://registry.npmjs.org/@crazygl/hero-audio-reactive/-/hero-audio-reactive-0.1.1.tgz","fileCount":9,"unpackedSize":67506,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAQiGhRfYPpcDAkkPaZdjDDqA2gqm5QQF2x7Ecxn7yH/AiBIoP5+uzXWm1UVZQXWusKnAdJEpaskshaaRkRw3vH7Nw=="}]},"_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-audio-reactive_0.1.1_1782922258853_0.237986400440221"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T01:48:30.206Z","modified":"2026-07-01T16:10:59.117Z","0.1.0":"2026-07-01T01:48:30.456Z","0.1.1":"2026-07-01T16:10:58.994Z"},"bugs":{"url":"https://github.com/crazygl-com/hero-audio-reactive/issues"},"author":{"name":"ybouane"},"license":"Apache-2.0","homepage":"https://crazygl.com/hero/audio-reactive","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-audio-reactive.git"},"description":"Audio-Reactive Hero — A central logo or preview image framed by a reactive visualizer — a radial frequency-bar ring and waveform that pulse with glow blooms on every beat. Alive without sound, with optional mic or file… A customizable CrazyGL animated her","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-audio-reactive/banner-full.png\" alt=\"Audio-Reactive Hero\" width=\"640\">\n</p>\n\n# @crazygl/hero-audio-reactive\n\nA central logo or preview image framed by a reactive visualizer — a radial frequency-bar ring and waveform that pulse with glow blooms on every beat. Alive without sound, with optional mic or file audio.\n\n## Demo\n[Audio-Reactive Hero](https://crazygl.com/hero/audio-reactive)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-audio-reactive\n```\n\n## Usage\n\n```tsx\nimport AudioReactive from '@crazygl/hero-audio-reactive';\n\nexport default function Hero() {\n  return (\n    <AudioReactive\n      heading=\"Hear it move.\"\n      visualizerStyle=\"radial-bars\"\n      centerMedia=\"https://crazygl.com/samples/crazygl.png\"\n      accentColor=\"#5cf2ff\"\n      secondaryColor=\"#c45cff\"\n    />\n  );\n}\n```\n\n## Customise\n\n- **Subject** — `centerMedia` (logo/preview at the centre), `subjectSize`, `subjectBassResponse` (how hard it pumps on bass).\n- **Visualizer** — `visualizerStyle` (radial-bars / linear-bars / waveform-ring), `barCount`, `reactivity`, `beatPulse`, `glowIntensity`, `rotationSpeed`.\n- **Palette** — `accentColor` (bass/low hue), `secondaryColor` (treble hue), `bgTop`, `bgBottom`, `transparent`.\n- **Audio input** — `audioSource` (none / file / mic), `audioFile` URL. Mic shows an opt-in button; access is requested only on click.\n\n## Best for\n\n- Music streaming, podcast and audio tools.\n- Audio-AI and generative-music product launches.\n- Creator / DJ landing pages where a logo should feel like it's playing.\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":["audio","visualizer","music","waveform","spectrum","reactive","premium","audio-reactive","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"]}