Components
IMG Reveals
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/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://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&w=1170&q=80"
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>
);
}