Shadow Mesh

A single dark plume drifting through a WebGL field — radial alpha mass warped by FBM noise, anchor follows the cursor, fully premultiplied so it composites over any background.

shadow-mesh
Lazy-ui
Three plumes, drifting

Quiet backgrounds
that breathe slowly.

Three radial masses warped by FBM bleed into one another. The primary plume tracks your cursor through honey — move and the shadow follows.

0px

Customize

Edit props; preview updates instantly.

Customize
Color
Scale
0.55
Speed
0.30x
Feather
0.45
Turbulence
0.30
Mouse pull
0.60
Grain
0.060

Props

Props accepted by ShadowMesh.

PropTypeDefaultDescription
childrenReactNode—Content rendered above the plume. Wrapped in `relative z-10` so layout sits on top of the canvas.
colorstring"#0a0a0a"Fill color of the plume mass. Any CSS color works — the canvas premultiplies the alpha so the plume composites cleanly over whatever's behind.
backgroundColorstring"transparent"Solid fill drawn behind the plume. Defaults to transparent so the page background shows through; set to a hex/rgba value to lock the surface.
scalenumber0.55Plume radius in UV units (0–1). Roughly the share of the smaller axis the mass occupies before edge feathering.
speednumber0.3Drift + turbulence speed multiplier. `0` freezes the field on its starting pose; honored by reduced-motion users automatically.
feathernumber0.45Edge softness (0–1). Higher values dissolve the outer edge over a longer falloff for a softer, more nebulous look.
turbulencenumber0.3How much FBM noise warps the plume's radius (0–1). `0` is a clean circle; higher values rough up the silhouette into wispy clouds.
mouseFollowbooleantrueSmoothly pull the plume center toward the cursor while it's over the canvas. Eases back to its drift orbit when the pointer leaves.
mouseInfluencenumber0.6How tightly the plume lerps toward the cursor (0–1). Lower values drag through honey; higher values snap.
noisenumber0.06Film-grain intensity blended over the canvas (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/shadow-mesh.json

Usage

Import the component and drop it into a render.

demo.tsx26 lines
import { ShadowMesh } from "@/components/lazy-ui/shadow-mesh";

export function Demo() {
  return (
    <ShadowMesh
      color="#0a0a0a"
      backgroundColor="transparent"
      scale={0.55}
      speed={0.3}
      feather={0.45}
      turbulence={0.3}
      mouseFollow
      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">
          Quiet <span className="italic">drift.</span>
        </h1>
        <p className="mt-3 text-sm text-white/70">
          One soft mass, slowly billowing. Edges warped by FBM noise; the
          plume tracks your cursor through honey.
        </p>
      </main>
    </ShadowMesh>
  );
}