Lazy-uiLazy UI
Star0

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.

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.

Customize

Palette
Show content
Speed0.35x
Viscosity0.85
Shine1.00
Roughness0.35
Detail1.00
Contrast0.50
Grain0.040
Mouse press0.60
Mouse follow

Usage

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>
  );
}