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 @compronents/ribbon-stroke-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 |
|---|---|---|---|
| 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