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

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 @compronents/curtain-reveal-hero

Installs from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.

Files

Checking access…

API

Prop	Type	Default	Description
heroImage / images	string / [string, string, string]	Four BLANK-hosted images	Backdrop and the three cascade images.
heroHeading / outroHeading / aboutHeading / aboutBody	string	BLANK editorial copy	Hero, curtain, and following-section text.
embedded	boolean	true	Own 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