PRO

Curtain Reveal Hero

A long pinned hero that stages a full reveal on scroll. A red wipe splits from a center seam to fill the frame, three images cascade open from nothing with a clip-and-scale, and a closing statement scales up, then that statement is cut down the middle and its two halves slide apart like curtains to hand off to the next section. GSAP timeline ScrollTrigger with Lenis.

Component

A modern approach to luxury living and timeless spaces

Interior 1
Interior 2
Interior 3

Thoughtfully crafted spaces designed to inspire modern living connections

Designing digital experiences that feel effortless

From initial concept to final detail, every element is considered with purpose and clarity

Install
npx shadcn@latest add https://ui.aryank.space/r/curtain-reveal-hero.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
heroImage / imagesstring / [string, string, string]Four BLANK-hosted imagesBackdrop and the three cascade images.
heroHeading / outroHeading / aboutHeading / aboutBodystringBLANK editorial copyHero, curtain, and following-section text.
embeddedbooleantrueOwn the scroll container; set false to ride the window scroll.
Customize
heroImage / imagesasset-url

Backdrop and the three cascade images.

heroHeading / outroHeadingtext

Opening headline and the split curtain statement.

aboutHeading / aboutBodytext

The following section's heading and copy.

Dependencies
gsaplenis