An editorial image reveal component that elegantly masks and blooms images into full frame using scroll-driven Framer Motion transitions.
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>
);
}