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/img-revealLoading preview...
import LiquidImageLoader from "@/components/ui/img-reveal";
export default function DemoOne() {
return (
<div className="app-wrapper">
<div className="demo-card">
<LiquidImageLoader
src="https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&w=1170&q=80"
alt="Snowy mountains"
width={600}
height={400}
liquidColor="#0c4a6e"
revealDuration={1500}
loadingDelay={500}
className="image-frame"
distortion={60}
waviness={0.01}
/>
</div>
</div>
);
}