Line Fill Text
Alpha-cascade ribbons clipped neatly inside the letterforms themselves.
textcanvaslinesribbonsheadlineanimationtypographymask
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | - | The string to clip the ribbons into. |
backgroundClassName | string | "bg-[#b91c1c] dark:bg-[#7f1d1d]" | Tailwind background classes resolved into the glyph body fill. |
fillColor | string | - | Explicit body fill. Wins over backgroundClassName. |
colors | string[] | chili alpha cascade | Ribbon palette. Prefer a single-hue alpha cascade (buildAlphaCascade). |
duration | number | 20 | Seconds per full wave cycle. |
spacing | number | 4 | Vertical gap between ribbons in CSS pixels. |
amplitude | number | 60 | Bezier bow depth in CSS pixels. |
stagger | number | 0 | Per-row phase lag (0–1). 0 = shared arch like the classic look. |
lineWidth | number | 1.5 | Stroke width in CSS pixels. |
overlay | boolean | false | Absolutely fill the parent. |
paused | boolean | - | Force the loop paused. When omitted, auto-pauses off-screen or when the tab is hidden. |