PRO

Montage Reveal Hero

A landing intro that counts itself in. A rolling three-digit counter runs to 100 while a loader panel wipes up and a stack of thumbnails pops in at one corner, then the whole stack Flips across to the opposite corner with a scale pulse as the counter fades, and the navigation, sidebar, dividers, and headline rise into place line by line. GSAP Flip with SplitText.

Component
Frame 1
Frame 2
Frame 3
Frame 4
Frame 5
Frame 6
Frame 7
Frame 8
Frame 9
Frame 10
Frame 11
Frame 12
Frame 13
Frame 14
Frame 15

Visual engineering for modern brands

A design team focused on brand websites, apps and products

Award-winning creative studio

Operating since 2019

Watch showreel

Install
npx shadcn@latest add https://ui.aryank.space/r/montage-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
images / logostring[] / stringFifteen BLANK thumbnails and a logoMontage thumbnails and the sidebar mark.
brand / navLinks / cta / heading / subheading / infoLines / footerstring / [string, string] / string / string / string / [string, string] / stringBLANK landing copyAll hero and navigation text.
Customize
images / logoasset-url

The fifteen montage thumbnails and the sidebar mark.

brand / navLinks / ctatext

Wordmark, nav links, and the call-to-action.

heading / subheading / infoLines / footertext

Headline, supporting lines, and the showreel footer.

Dependencies
gsap