Reveal Image Mask

Component 202

About

An editorial image reveal component that elegantly masks and blooms images into full frame using scroll-driven Framer Motion transitions.

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

Code

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

Usage.tsx

import { RevealImageMask } from "@/components/ui/reveal-image-mask";

export default function DemoOne() {
  return (
    // max-w-4xl constrains the width, mx-auto centers it, and px-4 adds a gutter for mobile
    <div className="mx-auto max-w-4xl space-y-12 px-4 py-20 md:space-y-24">
      
      <div className="space-y-12">
        <RevealImageMask />
        
        <RevealImageMask
          shape="rounded"
          src="https://cdn.21st.dev/assets/mirror/03/032859953f20f73a811d60ad35c9410d55b0218ba2b3af4e7823a3c56ef135b8.jpg"
          alt="A calm coastal road at dusk."
          title="The frame opens with patience."
          caption="The rounded variant feels especially good for brand storytelling and product reveal sections."
        />
        
        <RevealImageMask
          src="https://cdn.21st.dev/assets/mirror/62/6215d594dc52ca3de0439045028befc402e50a02f6a45fd6556bbda08f42d360.jpg"
          alt="Mountain ridge disappearing into fog."
          title="A wide image still carries the effect."
        />
      </div>

      {/* Optional: Add a footer or spacer to allow scrolling past the last item */}
      <div className="h-40" />
    </div>
  );
}