Components
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.
npx @21st-dev/cli add dhileepkumargm/liquid-revealLoading preview...
import LiquidImageLoader from "@/components/ui/liquid-reveal";
export default function DemoOne() {
return (
<div className="app-wrapper">
<div className="demo-card">
<LiquidImageLoader
src="https://images.unsplash.com/photo-1542044896530-05d85be9b11a?auto=format&fit=crop&w=800&q=80"
alt="Portrait of a woman"
width={400}
height={600}
liquidColor="#be185d"
revealDuration={10000}
loadingDelay={500}
revealDirection="up"
className="image-frame"
distortion={40}
waviness={0.03}
/>
</div>
</div>
);
}