Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| accentColor | string | "#e879f9" | Accent color for the seam line, eyebrow text, and divider lines |
| leftImage | string | "unsplash URL" | Image URL for the left curtain panel |
| rightImage | string | "unsplash URL" | Image URL for the right curtain panel |
When to Use
Ideal for hero sections, dramatic product reveals, and brand intro sequences. The curtain metaphor immediately creates anticipation before the content is visible.
Best Practices
Use high-contrast images against a dark background for maximum drama. The reveal content works best as short, bold typography — not paragraphs.
Why This Component Matters
The curtain reveal is one of cinema's most powerful tools. Bringing it to web scroll creates a theatrical moment that makes users feel like they're witnessing a premiere.
FAQ
QCan I customize the reveal content?
Yes — edit the inner JSX inside the 'Revealed content' section. The motion is on the curtain wrapper, not the content.
QCan both panels show the same image?
Yes — pass the same URL to both leftImage and rightImage for a symmetric split-screen effect.
QHow do I adjust the split timing?
Change the second value in `[0, 0.75]` on leftX/rightX transforms — lower = faster split.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Image Ribbons
Three horizontal image strips drifting in alternating directions as you scroll — rows counter-move to create depth and motion.