Lazy-uiLazy UI
Star0

Aurora Mesh

A flowing mesh gradient background — up to 8 color anchors drift on independent lissajous curves, the last anchor follows the cursor, and clicks emit a ripple that warps the field. Ships with glass + gooey SVG filters for children.

Lazy-ui
Move, click — aurora reacts

Beautiful backgrounds
that follow you.

A flowing mesh gradient. The brightest anchor tracks your cursor; click anywhere to send a ripple through the field.

Customize

Palette
Speed0.30x
Mouse pull0.60
Ripple0.060
Grain0.060
Wireframe opacity0.45
Mouse follow
Click ripple
Wireframe

Usage

import { AuroraMesh } from "@/components/lazy-ui/aurora-mesh";

export function Demo() {
  return (
    <AuroraMesh
      colors={["#050505", "#161616", "#525252", "#a3a3a3", "#f8f8f8"]}
      speed={0.3}
      wireframe
      mouseFollow
      ripple
      className="min-h-[520px] rounded-2xl"
    >
      <main className="relative z-10 max-w-md px-8 pt-24 pb-12">
        <h1 className="text-5xl leading-tight text-white">
          Build <span className="italic">lazily.</span>
        </h1>
        <p className="mt-3 text-sm text-white/70">
          The brightest anchor tracks your cursor. Click to ripple.
        </p>
      </main>
    </AuroraMesh>
  );
}