Slit Reveal Hero
A pinned hero that peels itself apart in stages. The lead image narrows to a vertical slit as a dark veil closes over it, then the whole panel rotates and shrinks to nothing while two columns of copy slide off behind it under a red wash, and finally two outro images clip in from top and bottom as the closing headline rises line by line. GSAP ScrollTrigger with SplitText and Lenis.
Silhouettes against the burning dark
Motion
Bodies drawn through engineered light and open dark. Every frame caught between the signal and the shadow that it quietly leaves behind.
Silence
Stillness measured in reflected color and slow heat. Where the moving crowd dissolves and only the burning outline holds against the night.
You become the shape that the light finally learns to find.
A studio built for image, motion, and the quiet glow that keeps burning after.
npx shadcn@latest add https://ui.aryank.space/r/slit-reveal-hero.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| heroImage / outroImages | string / [string, string] | Three BLANK-hosted images | Lead hero image and the two outro images. |
| heroHeading / columns / outroHeading / aboutHeading | string / [SlitColumn, SlitColumn] / string / string | BLANK editorial copy | Hero headline, the two copy columns, and closing lines. |
| embedded | boolean | true | Own the scroll container; set false to ride the window scroll. |
heroImage / outroImagesasset-urlLead image and the two outro images.
heroHeading / columns / outroHeading / aboutHeadingtextAll headline and column copy.
gsaplenis