Spotlight Gallery Scroll
A pinned hero where a giant three-column image wall shrinks to a tidy grid as you scroll, a corner logo scales down and rides up into place, the headline fades in word by word while the footer blurs away, then the whole hero lifts and dims to hand off to the next sections. GSAP ScrollTrigger with SplitText and Lenis, Blob-hosted images.
npx shadcn@latest add https://ui.aryank.space/r/spotlight-gallery-scroll.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[] | Blob-hosted img1..9 | Nine images filling the three-column wall. |
| logo / heading / buttonLabel / footer / studioHeading / connectHeading | string | BLANK copy | Logo asset and hero/section copy. |
| embedded | boolean | true | Own the scroll container; set false to ride the window scroll. |
heading / buttonLabel / footer / studioHeading / connectHeadingtextHero headline, CTA, footer, and the two section headings.
images / logoasset-urlThe nine gallery images and the logo, starting at https://ui.aryank.space/assets/spotlight-gallery-scroll/img1.jpg.
gsaplenis







