Lazy-uiLazy UI
Star0

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";

<LiquidTransition
  duration={2400}
  hold={1200}
  distortion={0.08}
  softness={0.18}
  noiseScale={2.4}
  drip={0.55}
  direction="noise"
  autoPlay={true}
  loop={true}
/>