Strands
A luminous bundle of threads that flow like windblown hair and part around the cursor.
canvasinteractive
Styled with ONONC's design tokens — shadcn add installs them for you.
Customize
Strands
Strands24
Thickness1
Motion
Speed1
Wave height1
Cursor parting1
Appearance
Color 1
Color 2
Color 3
Glow0.6
Props
| Prop | Type | Default | Description |
|---|---|---|---|
count | number | 24 | Number of flowing strands in the bundle. |
colors | string[] | brand spectrum | Strand colors as r,g,b, blended top to bottom. |
speed | number | 1 | Flow speed multiplier (0 = frozen). |
amplitude | number | 1 | Wave height multiplier (0–2). |
thickness | number | 1 | Strand thickness multiplier. |
glow | number | 0.6 | Additive glow strength (0–1). |
pointerPull | number | 1 | How strongly the cursor parts the strands (0–2). |
children | ReactNode | — | Content layered above the canvas. |
className | string | — | Extra classes for the wrapper. |