Ribbon Stroke Scroll
A pinned intro where thick rounded ribbons draw themselves across three oversized rows on scroll, two curved ribbons sweep through and erase themselves, the palette flips to dark halfway, and the rows finally slide off screen.
npx shadcn@latest add https://ui.aryank.space/r/ribbon-stroke-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 |
|---|---|---|---|
| rowColors | [string, string, string][] | 3x3 warm and cool palette | Stroke colors of the nine straight ribbons. |
| curveColors | [string, string] | ["#FFC412", "#FF6D38"] | Stroke colors of the two curved sweep ribbons. |
| embedded | boolean | true | Own the scroll container; set false to ride the window scroll. |
rowColors / curveColorscolorThe ribbon palette per row and for the two sweeps.
introInText / introOutText / outroTexttextHeadline copy before and after the dark flip.
gsaplenis