Components
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.
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>
);
}