AuroraHero

A full-screen, interactive hero component that renders animated simplex-noise ribbons on a <canvas> background. Includes a live control panel for tuning ribbon count, speed, complexity, amplitude, mouse intensity, color palette, pulse effect, and a built-in light/dark theme toggle.

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

import AuroraHero from "@/components/ui/aurora-hero";

const settings = {
  ribbonCount: 4,
  speed: 0.006,
  complexity: 0.012,
  amplitude: 250,
  mouseIntensity: 1,
  palette: "Arctic Frost",
};

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