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

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.

ReactWebGLInteractiveFont#gradient#liquid#aurora#fbm#domain-warping#noise#fluid#shader#premium#agency

Usage

import LiquidAuroraGradient from '@crazygl/hero-liquid-aurora-gradient';

export default function Page() {
  return (
    <LiquidAuroraGradient
      heading="We are bold and effective."
      flowSpeed={0.22}
      contrast={1.4}
    />
  );
}

Customise

  • Content — contentType (heading / two-columns / custom), heading, subheading.
  • Gradient — colorBase (deepest black), colorDeep (navy), colorA (electric blue), colorB (orange), colorHot (hot highlight).
  • Flow — flowSpeed, warpAmount, scale, contrast (black negative space).
  • Interaction / backdrop — pointerWarp, transparent.

Best for

  • Premium agency, studio, and design-portfolio sites
  • Fashion and editorial landing pages
  • Product launches and AI / creative-tool brands
  • Any hero that wants one confident, expensive-looking gesture behind the headline
01 · Install the package

One command, zero config.

npm install @crazygl/hero-liquid-aurora-gradient
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 LiquidAuroraGradient from '@crazygl/hero-liquid-aurora-gradient';

export default function Landing() {
  return (
    <LiquidAuroraGradient />
  );
}
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 LiquidAuroraGradient from '@crazygl/hero-liquid-aurora-gradient';

export default function Page() {
  return (
    <section>
      <LiquidAuroraGradient
        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

Aurora Plane

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

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.

Floating Ink

Ink clouds drifting through water — domain-warped FBM noise, layered with transparency, slowly evolving so the silhouettes never repeat.

Aurora Borealis

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

Reactive Gradient Silk

A background of folded silk made of light — very smooth gradients with broad flowing folds drifting in slow, elegant fabric motion. The folds carry deep desaturated jewel tones and catch a soft specular sheen along each crease. The pointer presses a gentle indentation into the cloth: the folds bend around the cursor and the highlights and shadows shift with it.

Gradient Text

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

Liquid Aurora Gradient

Base (deepest black)The near-black background the blobs emerge from. Keep it very dark for the premium look.Deep navyThe first colour to appear out of black — a dark navy that the blue grows out of.Electric blueThe cool blob colour.OrangeThe warm blob colour.Hot highlightNear-white-hot core where the fluid is brightest.Flow speed0.22How fast the fluid morphs. 0 freezes a composed frame; ~0.5 is a slow premium drift; above 1 it churns.Warp amount2.55How hard the field folds back on itself. Low reads as soft gradients; 1.2–1.8 gives the liquid marbled look; high gets noisy.Scale2.7Spatial frequency of the blobs. Below 1 = a few huge shapes; above 1.5 = smaller, busier veins.Contrast1.4How much black negative space. Higher pushes colour into tighter, brighter veins surrounded by deep black.Pointer warp0.7How strongly the fluid drifts toward the cursor as it moves. 0 disables it.Transparent backgroundDrop the opaque base so the gradient composites over the page behind it (colour only where the fluid blooms).InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.