Liquid Transition

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

Customize

Duration2400ms

Hold1200ms

Distortion0.080

Softness0.18

Noise scale2.4

Drip0.55

Direction

Auto play

Loop

Usage

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