CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/aurora-plane

Aurora Plane

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

ReactWebGLInteractiveFont#aurora#css#gradient#calm#efficient#no-js-animation

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.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-aurora-plane
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

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

export default function Landing() {
  return (
    <AuroraPlane />
  );
}
03 · Use it in a page

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.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

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

export default function Page() {
  return (
    <section>
      <AuroraPlane
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Liquid Aurora Gradient

A full-bleed liquid gradient: large organic blobs of electric blue and warm orange bleed and morph across a near-black field, driven by domain-warped FBM in a single WebGL2 fragment shader. Slow lava-lamp / aurora flow with deep black negative space; the pointer gently pulls the fluid toward the cursor.

Breathing Gradient Landscape

A product screenshot floats above an abstract gradient terrain that slowly breathes through stacked low-frequency FBM noise. Warm peach peaks fade into soft sage valleys; motes drift up; the camera pans across a 30-second loop with a hint of bob.

Aurora Borealis

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

Prism Cloud

A luminous chromatic cloud hero built with GLSL. Responds to scroll and pointer with refracted color light.

Ink Flow Field

On a near-white page, thousands of very thin charcoal lines drift along a divergence-free curl-noise flow field, leaving long curved trails that layer into delicate spirograph and flower-like ink patterns. Minimal, monochrome, calm.

Gradient Text

Heading filled with a slowly drifting multi-stop linear gradient — three configurable colours, customizable angle, optional animation.Live customizer

Aurora Plane

Aurora 1Aurora 2Aurora 3BackgroundIntensity1Drift Speed0.45Heading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.