Slime Background

A glossy marbled liquid surface — double-warped FBM height field, analytic normals, Blinn-Phong specular highlights, and a cursor-dimple that presses into the slime. Five color presets including toxic purple/green.

slime-background
Lazy-ui
Press the surface

Wet, slow,
alive.

A double-warped FBM height field, lit by a single key light. Move the cursor — the slime dimples under the pointer.

0px

Customize

Edit props; preview updates instantly.

Customize
Palette
Speed
0.35x
Viscosity
0.85
Shine
1.00
Roughness
0.35
Detail
1.00
Contrast
0.50
Grain
0.040
Mouse press
0.60

Props

Props accepted by SlimeBackground.

PropTypeDefaultDescription
childrenReactNode—Content rendered above the canvas. Wrapped in `relative z-10 h-full w-full` so centered layouts resolve.
palette"toxic" | "magma" | "azure" | "amber" | "silver""toxic"Color preset. Each preset is three stops (deep, mid, peak) plus a highlight tint. `toxic` is the purple/green reference look; `silver` is the monochrome variant for surfaces that need to stay on-brand.
colorsstring[]—Custom palette — 3 stops (deep, mid, peak), with an optional 4th entry for the specular highlight tint. Accepts hex, `rgb()`/`rgba()`. Overrides `palette`.
speednumber0.35Animation speed multiplier. `0` freezes the surface on its starting pose. Reduced-motion users get a static CSS gradient fallback regardless.
viscositynumber0.85Domain-warp depth (0–2). Higher = thicker, ropier swirls that loop back on themselves; lower = open, lazy currents. Drives the recursive fbm warp factor.
shinenumber1Specular highlight intensity (0–2). The "wet" look. `0` removes the highlights entirely and leaves a flat, matte marble.
roughnessnumber0.35Surface roughness (0–1). Maps to the Blinn-Phong exponent: low values give mirror-like pinpoint hotspots, high values give soft satin sheens.
detailnumber1Height amplitude of the marbling (0–2). Drives how pronounced the embossing is — peaks read brighter and the normal map produces stronger highlights.
contrastnumber0.5Sharpness of the color bands between the three palette stops (0–1). `0` blurs into a smooth gradient; `1` cuts the colors into hard ropes of pigment.
grainnumber0.04Film-grain intensity (0–0.2). Hides banding on 8-bit displays and sells the "thick liquid" texture.
mouseFollowbooleantruePointer adds a Gaussian bulge to the height field — the slime dimples under the cursor like a finger pressing into pudding. Fades in and out on enter/leave so the dimple never snaps.
mouseInfluencenumber0.6Bulge strength (0–1).
backgroundColorstringpalette's bgSolid fill drawn behind the slime and beneath its lowest band. Defaults to the preset's background.
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/slime-background.json

Usage

Import the component and drop it into a render.

demo.tsx23 lines
import { SlimeBackground } from "@/components/lazy-ui/slime-background";

export function Demo() {
  return (
    <SlimeBackground
      palette="toxic"
      speed={0.35}
      viscosity={0.85}
      shine={1}
      roughness={0.35}
      detail={1}
      contrast={0.5}
      mouseFollow
      className="min-h-[520px] rounded-2xl"
    >
      <main className="relative z-10 flex h-full items-center justify-center px-6">
        <h1 className="text-center text-5xl font-light tracking-tight text-white">
          Wet, slow, <span className="italic">alive.</span>
        </h1>
      </main>
    </SlimeBackground>
  );
}