Overview
The ImageReveal component replaces standard fade-ins with high-end, cinematic wipes. By animating the CSS clip-path property via Framer Motion's useInView, images dynamically unfold exactly when the user scrolls to them.
The component includes a subtle, built-in scale-down animation on the image itself, creating a premium parallax-like effect as the mask opens.
Usage
import { ImageReveal } from "@/components/creative/image-reveal"
export default function Gallery() {
return (
<div className="grid grid-cols-2 gap-8 py-20 max-w-5xl mx-auto">
<ImageReveal
src="/images/photo-1.jpg"
alt="Photo 1"
direction="circle"
className="aspect-square rounded-2xl"
/>
<ImageReveal
src="/images/photo-2.jpg"
alt="Photo 2"
direction="bottom"
delay={0.2} // Staggered reveal
className="aspect-square rounded-2xl"
/>
</div>
)
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { ImageReveal } from "@/components/creative/image-reveal";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { ImageReveal } from "@/components/creative/image-reveal";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<ImageReveal
src="example"
alt="example"
direction{/* value */}
/>
</div>
);
}