Hero made by @ybouane.

@crazygl/hero-audio-reactive

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 audio.

Demo

Audio-Reactive Hero

Install

npm install @crazygl/hero-audio-reactive

Usage

import AudioReactive from '@crazygl/hero-audio-reactive';

export default function Hero() {
  return (
    <AudioReactive
      heading="Hear it move."
      visualizerStyle="radial-bars"
      centerMedia="https://crazygl.com/samples/crazygl.png"
      accentColor="#5cf2ff"
      secondaryColor="#c45cff"
    />
  );
}

Customise

• Subject — centerMedia (logo/preview at the centre), subjectSize, subjectBassResponse (how hard it pumps on bass).
• Visualizer — visualizerStyle (radial-bars / linear-bars / waveform-ring), barCount, reactivity, beatPulse, glowIntensity, rotationSpeed.
• Palette — accentColor (bass/low hue), secondaryColor (treble hue), bgTop, bgBottom, transparent.
• Audio input — audioSource (none / file / mic), audioFile URL. Mic shows an opt-in button; access is requested only on click.

Best for

• Music streaming, podcast and audio tools.
• Audio-AI and generative-music product launches.
• Creator / DJ landing pages where a logo should feel like it's playing.

This hero is part of CrazyGL, 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.