Components
Liquid Reveal
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.
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://images.unsplash.com/photo-1542044896530-05d85be9b11a?auto=format&fit=crop&w=800&q=80"
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>
);
}