Strip Merge Reveal
A landing intro that opens on a dark card: a counter runs to a hundred in one corner while a three line status list steps up through a single line window. Behind it five narrow portrait strips rise into place, the row closes its gap, and the strips scale to full size. The four outer strips then wipe upward one after another, the centre strip doubles, and the dark card lifts away to leave that image filling the frame with the name rising in beneath it. GSAP with CustomEase and masked SplitText words.
npx shadcn@latest add https://ui.aryank.space/r/strip-merge-reveal.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 |
|---|---|---|---|
| images | string[] | 5 BLANK strips | Strips in the row. Any count works; the one at heroIndex is the one that survives. |
| heroIndex | number | 2 | Which strip stays and doubles once the others have wiped away. |
| navItems / statusLines | string[] | BLANK copy | Navigation links and the three loading lines. |
| overlayColor | string | #0f0f0f | Colour of the dark card that lifts away at the end. |
brandtextName in the nav and in the headline that rises at the end.
statusLinestextThe three lines stepped through during the load.
gsap