Backgrounds
Waves
Our roadmap, visualized as an ocean of momentum.
Canvas-rendered swell of flowing lines. Each line is a sum of sines that travel at different speeds and slowly wax and wane, so crests form and dissolve like real water — then shear forward like a wave about to break. Colors default to the theme gradient tokens and resolve `var(--…)` at runtime. Zero JS dependencies. Drop inside any `position: relative` parent.
Install
Copy this owned-code component into your app from the registry.
pnpm dlx shadcn-svelte@latest add https://benjamin-brady.github.io/performative-ui-svelte/registry/waves.json
Examples
Default
<div style={{ position: "relative", height: 260 }}>
<Waves />
</div>About to break
<Waves
lines={5}
amplitude={104}
skew={0.85}
centerBias={0.8}
/>Calm, upright swell
<Waves
lines={4}
complexity={2}
skew={0.15}
speed={0.1}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| lines | number | 6 | Number of flowing lines. |
| colors | string[] | - | Stroke colors, distributed across the lines. Any CSS color incl. `var(--…)`. Defaults to the theme gradient tokens. |
| amplitude | number | 72 | Peak vertical travel (px) of the swell. |
| speed | number | 0.16 | Animation rate. Higher flows faster. |
| lineWidth | number | 1.5 | Stroke width in px. |
| baseOpacity | number | 0.55 | Resting stroke opacity (0–1). |
| complexity | number | 4 | Harmonics summed per line. Each travels at its own speed and breathes. Fewer = calmer swell; more = busier. |
| spread | number | 0.22 | How far (0–1 of height) the lines fan out from the vertical centre. |
| edgeFade | number | 0.18 | Fraction (0–0.5 of width) over which each line fades to transparent at both ends. 0 disables. |
| centerBias | number | 0.55 | How strongly the swell concentrates toward the horizontal centre (0–1). 0 = uniform; 1 = flat at the ends. |
| skew | number | 0.55 | Forward lean of each crest (0–1), like a wave about to break. 0 = upright. |