Frame Scroll
A pinned hero that collapses into a drifting grid. As you scroll, the headline slides up out of frame, a second line fades in word by word, then the full-bleed image shrinks to a small rounded tile in the center. Below it, four columns of thumbnails parallax past at staggered speeds before the frame settles into a quiet outro. GSAP ScrollTrigger with Lenis; owns its scroll container so it embeds anywhere.
npx shadcn@latest add https://ui.aryank.space/r/frame-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 |
|---|---|---|---|
| heroImage | string | "…/frame-scroll/hero.jpg" | Full-bleed hero photo that shrinks to a tile. |
| images | string[] | 16 Compronents-hosted JPGs | Thumbnails laid into four parallax columns. |
| heading / copy | string | headline / fading second line | The pinned headline and the word-by-word copy line. |
| aboutText / outroText | string | about line / outro line | Copy in the parallax panel and the closing panel. |
| background / textColor / heroTextColor | string | "#e3e3db" / "#171717" / "#ffffff" | Surface, body ink, and the color over the hero image. |
| embedded | boolean | true | Own an internal scroll container (true) or use the window scroll (false). |
background / textColorcolorPage surface and the about / outro ink.
heroTextColorcolorHeadline and copy color over the hero image.
heading / copy / aboutText / outroTexttextThe pinned headline, the fading line, and the two panels.
heroImage / imagesasset-urlHero photo and 16 thumbnails, hosted through https://ui.aryank.space/assets/frame-scroll/hero.jpg and the numbered set.
gsaplenis