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.
A living catalogue of images that shouldn't exist, collected frame by frame from the edge of the real.
Request AccessStudio
Connect
npx shadcn@latest add @compronents/spotlight-gallery-scrollInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| 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