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.

aurora-mesh
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.

0px

Customize

Edit props; preview updates instantly.

Customize
Palette
Speed
0.30x
Mouse pull
0.60
Ripple
0.060
Grain
0.060
Wireframe opacity
0.45

Props

Props accepted by AuroraMesh.

PropTypeDefaultDescription
childrenReactNode—Content rendered above the gradient. Wrapped in `relative z-10` so layout sits on top of the canvas.
colorsstring[]["#050505","#161616","#525252","#a3a3a3","#f8f8f8"]Gradient anchor colors. 2–8 entries; each anchor drifts on its own lissajous curve. Default is the Lazy-ui silver ramp — pass your own palette to recolor without code changes.
speednumber0.3Animation speed multiplier. Multiplied into every anchor's drift frequency — `0` freezes the field on its starting positions.
mouseFollowbooleantrueSmoothly pull the last (typically brightest) anchor toward the cursor while it's over the background. Eases back to center when the pointer leaves.
mouseInfluencenumber0.6How tightly the followed anchor lerps toward the cursor (0–1). Lower values drag through honey; higher values snap.
ripplebooleantruePointer-down on the background emits a single radial wavefront that warps the mesh for ~1.4s. New clicks replace the previous ripple.
rippleStrengthnumber0.06Ripple amplitude in UV units. Values past ~0.12 start to look psychedelic — keep under 0.1 for a polished feel.
backgroundColorstringfirst colorSolid fill drawn behind the mesh and used as the reduced-motion fallback. Defaults to the first entry of `colors`.
wireframebooleanfalseAdds a second overlay layer: faint contour bands inside the gradient plus a subtle grid masked toward the edges. Use sparingly — it doubles the visual density.
wireframeOpacitynumber0.45Opacity of the wireframe overlay (0–1). Only applied when `wireframe` is on.
grainnumber0.06Film-grain intensity blended over the gradient (0–0.3). Hides banding on 8-bit displays. Set to `0` for a perfectly clean fill.
classNamestring—Extra class names merged onto the outermost wrapper. Width and height are governed here — the canvas fills the container.

Installation

Choose CLI for the one-line shadcn install, or copy the file manually.

npx shadcn@latest add https://2lazyui.com/r/aurora-mesh.json

Usage

Import the component and drop it into a render.

demo.tsx23 lines
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>
  );
}