Disclose Image

Galleries

About

An image that reveals itself with two animated sliding door panels once it finishes loading.

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

Code

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

Usage.tsx

import DiscloseImage from "@/components/ui/disclose-image";

export default function DiscloseImageDemo() {
  return (
    <div className="flex min-h-[26rem] w-full items-center justify-center bg-background">
      <DiscloseImage
        src="https://cdn.21st.dev/assets/mirror/1d/1d3f8defb31873a8c94f3f0b7e72423da28e8b328c9b024285c44a753ee534d9.jpg"
        alt="Mountain landscape"
      />
    </div>
  );
}