Shutter Reveal

Component 5

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Shutter Reveal to your project and fits it to your theme.

Code

How Shutter Reveal is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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://cdn.21st.dev/assets/mirror/66/667369889ffd12e510897fcb9ba5b817d56f735faea85f9ccd12bcedbfaa819b.jpg"
          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>
  );
}