Converging Icons Text
A pinned hero where a row of icons collects itself into a sentence. As you scroll, the header fades, the floating icon row lifts and scales down to caption size, then clones of each icon peel off and travel into inline slots inside a headline, moving vertically then horizontally into place, and the surrounding words fade in one by one in a shuffled order. GSAP ScrollTrigger with Lenis, desktop only.
npx shadcn@latest add https://ui.aryank.space/r/converging-icons-text.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 |
|---|---|---|---|
| icons | [string, string, string, string, string] | Five BLANK-hosted icons | Icons that clone and fly into the headline slots. |
| heroTitle / heroSubtitle / segments / outroText | string / string / [string x6] / string | BLANK PRO copy | Header, subtitle, sentence fragments, and closing line. |
| embedded | boolean | true | Own the scroll container; set false to ride the window scroll. |
iconsasset-urlThe five icons that fly into the sentence.
heroTitle / heroSubtitle / outroTexttextOpening header, subtitle, and closing line.
segmentstextThe six word groups the icons slot between.
gsaplenis