CrazyGLAurora Borealis
Northern lights — three volumetric ribbon curtains driven by FBM noise, with parallax on pointer/scroll, additive blending, and a starfield behind.
Usage
import AuroraBorealis from '@crazygl/hero-aurora-borealis';
export default function Hero() {
return (
<AuroraBorealis
heading="Northern lights."
intensity={0.8}
parallax={0.6}
/>
);
}Customise
- Sky —
skyTopColor,skyBottomColor,starDensityfor the backdrop gradient and starfield. - Aurora —
lowColor/midColor/highColorspectral ramp, plusintensity,ribbonHeight,ribbonWidth,windSpeed,shimmer,bloom. - Parallax —
parallaxcontrols how strongly pointer/scroll tilts and lifts the curtains. - Content / Typography — heading, subheading or two-column/custom content, and heading font.
Best for
- Premium SaaS landing pages and dark-mode product launches.
- Climate / earth-science and space storytelling.
- Travel and adventure brands wanting an atmospheric backdrop.
One command, zero config.
npm install @crazygl/hero-aurora-borealisImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import AuroraBorealis from '@crazygl/hero-aurora-borealis';
export default function Landing() {
return (
<AuroraBorealis />
);
}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.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import AuroraBorealis from '@crazygl/hero-aurora-borealis';
export default function Page() {
return (
<section>
<AuroraBorealis
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
