Interlock Title Scroll
Full-bleed titles that assemble themselves as they enter. Every other character starts pushed above the line and the rest below, so the word reads as two combs sliding into each other, while the whole block drifts in from the side. Each band staggers from a different end and the middle one runs the opposite direction to its neighbours. GSAP SplitText and ScrollTrigger with Lenis, no images.
npx shadcn@latest add https://ui.aryank.space/r/interlock-title-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 |
|---|---|---|---|
| titles | string[] | Subtle Phase, Hidden Flow, Calm Glide | One title per band. Odd bands take the accent background, even bands the page background. |
| introHeading / outroHeading | string | BLANK copy | The lead-in and closing screens. |
| background / foreground / accent | string | #f4f3ef / #141414 / #e3f794 | Page, type, and alternating band colors. |
| embedded | boolean | true | Own the scroll container so it fits a bounded box. Set false to drive it from the window scroll. |
titlestextThe full-bleed titles, one per band.
accent / background / foregroundcolorAlternating band color, page color, and type color.
gsaplenis