Hero made by @ybouane.

@crazygl/hero-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.

Demo

Sonic Text

Install

npm install @crazygl/hero-sonic-text

Usage

import SonicText from '@crazygl/hero-sonic-text';

export default function Hero() {
  return (
    <SonicText
      heading="now playing"
      subheading="Crazyglow · Voltage Drop"
      bpm={120}
    />
  );
}

Customise

• Content — heading, subheading.
• Waveform — barCount, barGap, barMaxHeight, bpm (drives the kick pulse).
• Typography — textColor, subColor, barColor, barAccent, fontSize, headingFontFamily, headingFontWeight.
• Backdrop — bgColor, transparentBackground.

Best for

• Music, podcast, and audio-product landing pages.
• "Now playing" / release announcement hero blocks.
• Event and DJ / label sites wanting a kinetic, sound-coded headline.

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.