Arc Spotlight Scroll
A pinned telescope reveal. Two words split apart to open a scaling background frame, then a diagonally clipped viewport scrolls a column of titles past its center. As each title reaches the middle it lights up, the backdrop swaps to its still, and thumbnail frames arc down a bezier path on the right. GSAP ScrollTrigger with Lenis.
npx shadcn@latest add https://ui.aryank.space/r/arc-spotlight-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 |
|---|---|---|---|
| items | ArcSpotlightItem[] | Ten BLANK stills with titles | Name and image for each telescope entry. |
| intro / outro / introWords / headerLabel | string / string / [string, string] / string | BLANK editorial copy / Beneath, Beyond / Discover | Framing copy, the split intro words, and the side label. |
| embedded | boolean | true | Owns the scroll container so it fits a bounded box. |
itemstextName and still for each entry in the telescope column.
items[].imgasset-urlBackdrop still and arcing thumbnail per entry.
intro / outro / introWords / headerLabeltextOpening line, closing line, split words, and side label.
gsaplenis