CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/audio-reactive

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

ReactWebGLImageInteractiveFont#audio#visualizer#music#waveform#spectrum#reactive#premium

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.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-audio-reactive
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx
import AudioReactiveHero from '@crazygl/hero-audio-reactive';

export default function Landing() {
  return (
    <AudioReactiveHero />
  );
}
03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

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

export default function Page() {
  return (
    <section>
      <AudioReactiveHero
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Sonic Text

Heading paired with a procedurally simulated audio waveform — bars rise and fall in time-correlated bands and the text stretches subtly with the loudest beats.

Floating Neon Logo Sign

The logo becomes a 3D neon tube sign floating in a dark cinematic scene. Segments flicker on during boot, then settle into a gentle pulse. Smoke drifts behind; hovering brightens the tubes.

Neon Tube Typography

A glowing neon-tube headline that flickers on, settles into a slow plasma breath, sparks on hover, and bends its glow toward the cursor. Rendered to a HiDPI canvas with rounded tube strokes plus stacked blurred copies for true additive bloom.

Reactive Gradient Silk

A background of folded silk made of light — very smooth gradients with broad flowing folds drifting in slow, elegant fabric motion. The folds carry deep desaturated jewel tones and catch a soft specular sheen along each crease. The pointer presses a gentle indentation into the cloth: the folds bend around the cursor and the highlights and shadows shift with it.

Logo Edge Glow

Upload an SVG or transparent PNG logo and light it with a neon inner glow — a bright, radial-gradient rim clipped to the silhouette that fades to a dark core, and intensifies toward your cursor as it approaches.

Crystal Refraction Field

Six raymarched octahedral crystals drift across the screen, refracting the background through each face with per-channel chromatic dispersion at the rim.Live customizer

Audio-Reactive Hero

Center media (logo / preview)Logo or preview image at the heart of the visualizer. Transparent SVG/PNG looks best; any photographic image is cover-fit into the disc.Subject size0.2Radius of the center disc, in frame units. 0.18–0.24 is the sweet spot.Subject bass response0.08How much the subject scales/glows on the bass. 0 = static; above 0.2 it pumps hard.Visualizer styleBar count96Number of bars / waveform samples around the ring. 64–128 reads as a fine, dense visualizer.Reactivity / amplitude1Overall bar/waveform height multiplier. Below 0.5 feels flat; above 2 clips into a wall.Beat pulse strength1Strength of the radial flash on each kick. 0.8–1.3 sells the rhythm.Glow intensity1Bloom around the bars and subject. Around 1 is rich; above 2 washes out.Rotation speed0.15Slow drift of the ring. 0 holds it still; 0.1–0.3 gives a gentle turn.Accent colourPrimary visualizer hue (low / bass bars and waveform).Secondary colourHigh-band hue; bars blend accent→secondary from bass to treble.Background topBackground bottomTransparent backgroundDrop the backdrop so the ring and subject sit over the page background.Audio sourcePick the audio source. None uses the synthesized spectrum (no real audio). Audio File reacts to a URL you provide. Microphone shows an opt-in button — access is requested only when the user clicks it.Heading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.