Liquid Transition

A WebGL scene-cut — image A bleeds into image B through an animated fbm front with edge refraction, looping ping-pong.

liquid-transition

0px

Customize

Edit props; preview updates instantly.

Customize

Duration

2400ms

Hold

1200ms

Distortion

0.080

Softness

0.18

Noise scale

2.4

Drip

0.55

Direction

Props

Props accepted by LiquidTransition.

Prop	Type	Default	Description
imageA	string	—	URL of the first image. Fully visible at progress 0.
imageB	string	—	URL of the second image. Fully visible at progress 1.
progress	number	—	Controlled progress 0..1. When supplied, autoplay is ignored.
autoPlay	boolean	true	Animate progress automatically. Ignored when `progress` is provided.
duration	number	2400	Length of one A → B sweep in milliseconds.
hold	number	1200	Milliseconds to dwell at each end of the sweep when looping.
loop	boolean	true	Ping-pong forever. When false, the transition stops at B after one sweep.
direction	"noise" \| "horizontal" \| "vertical" \| "radial"	"noise"	Shape of the moving front. Noise is a liquid blob, the others bias the sweep along an axis or outward from the center.
drip	number	0.55	How strongly the direction biases the noise field. 0 is a pure noise blob, 1 is a clean directional wipe.
distortion	number	0.08	Liquid refraction amplitude at the moving boundary, in UV units.
softness	number	0.18	Soft edge of the boundary mask. 0 is a hard wipe; larger values feather the front.
noiseScale	number	2.4	Noise scale — higher values produce finer streaks.
onComplete	() => void	—	Called when the forward sweep finishes (and at each end of a ping-pong cycle).
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-transition.json

Usage

Import the component and drop it into a render.

demo.tsx12 lines

import { LiquidTransition } from "@/components/lazy-ui/liquid-transition";

export function Demo() {
  return (
    <div className="relative h-[480px] w-full overflow-hidden rounded-xl">
      <LiquidTransition
        imageA="/images/liqid-hole-dark.png"
        imageB="/images/liqid-hole-light.png"
      />
    </div>
  );
}