Music Reactive Hero Section

A modern, minimal and bold hero section with a dynamic audio reactive visualization background. Includes built in audio player with play / pause controls and beautiful post processing effects including film grain, subtle film emulation, chromatic aberration and bloom. Everything is customizable and multiple aspects, from the wave color to the film grain intensity, are reactive to the audio.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Music Reactive Hero Section to your project and fits it to your theme.

import Component from "@/components/ui/music-reactive-hero-section";

const settings = {
  bassIntensity: 1,
  midIntensity: 1,
  trebleIntensity: 1,
  hue: 0,
  saturation: 0,
  lightness: 0,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen">
      <Component {...s} />
    </div>
  );
}