Components
Shutter Reveal
Shutter Reveal is a React component that animates image loading using vertical shutter panels. It creates a cinematic reveal effect with customizable direction, color, timing, and easing. Ideal for portfolios, galleries, or any UI that deserves a dramatic entrance.
import ShutterImageLoader from "@/components/ui/shutter-reveal";
const settings = {
width: 400,
height: 600,
shutterCount: 6,
shutterDuration: 1000,
staggerDelay: 100,
loadingDelay: 500,
};
export default function DemoOne(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="app-wrapper">
<div className="demo-card">
<ShutterImageLoader
src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=800&q=80"
alt="Portrait of a man"
width={s.width}
height={s.height}
shutterCount={s.shutterCount}
shutterColor="#262626"
shutterDuration={s.shutterDuration}
staggerDelay={s.staggerDelay}
loadingDelay={s.loadingDelay}
className="image-frame"
/>
</div>
</div>
);
}