Hero made by @ybouane.

@crazygl/hero-aurora-borealis

Northern lights — three volumetric ribbon curtains driven by FBM noise, with parallax on pointer/scroll, additive blending, and a starfield behind.

Demo

Aurora Borealis

Install

npm install @crazygl/hero-aurora-borealis

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, starDensity for the backdrop gradient and starfield.
• Aurora — lowColor / midColor / highColor spectral ramp, plus intensity, ribbonHeight, ribbonWidth, windSpeed, shimmer, bloom.
• Parallax — parallax controls 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.

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.