Service Index Scrub
A pinned services index where scroll distance is the selector: every viewport height advances one service, so the list steps discretely rather than scrubbing. A black indicator bar slides down by exactly one row height and resizes to the width of the label it lands on, measured off-screen at the real display font before anything animates, so it hugs each name instead of using a fixed width. A single tall image strip translates by one image height in step with it, and the body copy swaps by splitting to lines, lifting them out, replacing the text, and dropping the new lines back in. GSAP ScrollTrigger, SplitText, and Lenis.
Scroll Down
Deliverables
Brand & Event Design
Video & Photography
Motion Design
3D Graphics
Print & Production
Digital (UI/UX)
Web Development
We transform your ideas into tangible results. Our deliverables are meticulously crafted to exceed expectations, ensuring every project milestone is met with precision and excellence. From concept to completion.
Your next section goes here
npx shadcn@latest add https://ui.aryank.space/r/service-index-scrub.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 |
|---|---|---|---|
| services | ServiceIndexEntry[] | 8 BLANK services | Label, copy, and image. The pin length is one viewport per entry, so the list length sets the scroll distance. |
| serviceHeight / imgHeight | number | 38 / 250 | Row height and image frame height in px. Both are step sizes for transforms, so they must match the CSS. |
| embedded | boolean | true | Own the scroll container. Set false to drive it from the window scroll. |
accentcolorSeparator and outro colour.
heroCopytextPrompt at the bottom of the opening image.
gsaplenis