Liquid Reveal

Component 2

About

LiquidReveal is a React component that animates image loading with a dynamic liquid wipe effect. It uses SVG filters to simulate fluid distortion and waviness, creating a visually engaging reveal. Ideal for portfolios, hero sections, and immersive UI transitions.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Liquid Reveal to your project and fits it to your theme.

Code

How Liquid Reveal is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import LiquidImageLoader from "@/components/ui/liquid-reveal";

const settings = {
  width: 400,
  height: 600,
  revealDuration: 10000,
  loadingDelay: 500,
  distortion: 40,
  waviness: 0.03,
};

export default function DemoOne(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="app-wrapper">
      <div className="demo-card">
        <LiquidImageLoader
          src="https://cdn.21st.dev/assets/mirror/71/7148ae05e1f83f80fa56986b25c058593042c5ce971b3f29998029d9e5fbb6d2.jpg"
          alt="Portrait of a woman"
          width={s.width}
          height={s.height}
          liquidColor="#be185d"
          revealDuration={s.revealDuration}
          loadingDelay={s.loadingDelay}
          revealDirection="up"
          className="image-frame"
          distortion={s.distortion}
          waviness={s.waviness}
        />
      </div>
    </div>
  );
}