IMG Reveals

Component 5

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 IMG Reveals to your project and fits it to your theme.

Code

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

Usage.tsx

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

const settings = {
  width: 600,
  height: 400,
  revealDuration: 1500,
  loadingDelay: 500,
  distortion: 60,
  waviness: 0.01,
};

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/54/54d81d8ff4ab28cb3ff7b4c5d1ec99c79f6b4ea975924e963b8d8b307b01cdec.jpg"
          alt="Snowy mountains"
          width={s.width}
          height={s.height}
          liquidColor="#0c4a6e"
          revealDuration={s.revealDuration}
          loadingDelay={s.loadingDelay}
          className="image-frame"
          distortion={s.distortion}
          waviness={s.waviness}
        />
      </div>
    </div>
  );
}