Reveal Image Mask

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://images.unsplash.com/photo-1511818966892-d7d671e672a2?auto=format&fit=crop&w=1400&q=80"
          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://images.unsplash.com/photo-1496307653780-42ee777d4833?auto=format&fit=crop&w=1400&q=80"
          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>
  );
}