_{Hero made by @ybouane.}

@crazygl/hero-aurora-plane

A pure-CSS animated aurora hero. Cheap, calm, and responsive — a great default when CSS is enough.

Demo

Aurora Plane

Install

npm install @crazygl/hero-aurora-plane

Usage

import AuroraPlane from '@crazygl/hero-aurora-plane';

export default function Hero() {
  return (
    <AuroraPlane
      heading="Calm, by design."
      color1="#3be0c8"
      color2="#a67bff"
      color3="#ff6fb7"
      speed={0.45}
      intensity={1}
    />
  );
}

Customise

• Content — contentType (heading / two-columns / custom), heading, subheading, media, or custom node columns.
• Style — color1 / color2 / color3 (the three band colours), backgroundColor, intensity (overall aurora brightness), speed (ribbon drift rate).
• Typography — headingFontFamily.

Best for

• B2B SaaS, fintech and professional-services landing pages.
• Documentation sites and dashboards that want atmosphere without theatrics.
• Any hero where instant load and quiet motion behind serious copy matter more than spectacle.

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.