Hero made by @ybouane.

@crazygl/hero-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.

Demo

Liquid Aurora Gradient

Install

npm install @crazygl/hero-liquid-aurora-gradient

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

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.