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 @compronents/interlock-title-scrollInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| 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