Components
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.
npx @21st-dev/cli add dhileepkumargm/shutter-revealLoading preview...
import ShutterImageLoader from "@/components/ui/shutter-reveal";
export default function DemoOne() {
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={400}
height={600}
shutterCount={6}
shutterColor="#262626"
shutterDuration={1000}
staggerDelay={100}
loadingDelay={500}
className="image-frame"
/>
</div>
</div>
);
}