PRO

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.

Component

A living catalogue of images that shouldn't exist, collected frame by frame from the edge of the real.

Request Access

Studio

Connect

Install
npx shadcn@latest add https://ui.aryank.space/r/spotlight-gallery-scroll.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
imagesstring[]Blob-hosted img1..9Nine images filling the three-column wall.
logo / heading / buttonLabel / footer / studioHeading / connectHeadingstringBLANK copyLogo asset and hero/section copy.
embeddedbooleantrueOwn the scroll container; set false to ride the window scroll.
Customize
heading / buttonLabel / footer / studioHeading / connectHeadingtext

Hero headline, CTA, footer, and the two section headings.

images / logoasset-url

The nine gallery images and the logo, starting at https://ui.aryank.space/assets/spotlight-gallery-scroll/img1.jpg.

Dependencies
gsaplenis