Liquid Reveal

A WebGL fluid sim — cursor leaves a dye trail that uncovers a second image through the first, with idle auto-drift.

liquid-reveal

0px

Customize

Edit props; preview updates instantly.

Customize

Cursor size

200px

Mouse force

Resolution

0.50x

Viscosity

Reveal strength

1.00

Reveal softness

0.85

Auto speed

0.50

Props

Props accepted by LiquidReveal.

Prop	Type	Default	Description
frontImage	string	—	URL of the image shown by default. Stays visible where the liquid hasn't passed.
backImage	string	—	URL of the image revealed inside the dye trail as the cursor disturbs the surface.
cursorSize	number	200	Radius of the dye splat dropped at the cursor, in pixels.
mouseForce	number	60	Strength of the velocity impulse injected by mouse motion. Higher = more splashy.
resolution	number	0.5	Simulation buffer scale (0.25–1). Lower is cheaper but blurrier.
viscous	number	42	Velocity diffusion — higher values make the fluid feel thicker and slower.
revealStrength	number	1	How aggressively the dye uncovers the back image.
revealSoftness	number	0.85	Soft edge of the reveal mask. 0 is a hard cut; >1 fades broadly.
autoDemo	boolean	true	Drift the cursor across the canvas when the user is idle.
autoSpeed	number	0.5	Idle drift speed, in normalized units per second.
autoResumeDelay	number	1200	Milliseconds the cursor must be idle before the demo drift resumes.
className	string	—	Extra class names merged onto the root container.

Installation

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

npx shadcn@latest add https://2lazyui.com/r/liquid-reveal.json

Usage

Import the component and drop it into a render.

demo.tsx12 lines

import { LiquidReveal } from "@/components/lazy-ui/liquid-reveal";

export function Demo() {
  return (
    <div className="relative h-[480px] w-full overflow-hidden rounded-xl">
      <LiquidReveal
        frontImage="/images/armor.png"
        backImage="/images/human.png"
      />
    </div>
  );
}