Waves

Layered ribbons of motion that rise and fall in smooth, continuous rhythm. Calm, fluid, endlessly watchable.

Preview

Layers

3Amplitude

0.08Frequency

1.5Speed

1.0xFilledOnHarmonicsOff

Usage

import { createWaves } from 'syaivo';

const effect = createWaves({
  colors: ['rgba(59,130,246,0.5)', 'rgba(99,102,241,0.4)', 'rgba(139,92,246,0.3)'],
  layers: 3,
  amplitude: 0.1,
  speed: 0.8,
});

effect.mount(document.getElementById('hero')!);

Options

Option	Type	Default	Description
`colors`	`string[]`	3 blue tones	Wave line/fill colors
`backgroundColor`	`string`	`"transparent"`	Canvas background
`layers`	`number`	`3`	Number of wave layers
`amplitude`	`number`	`0.08`	Amplitude as fraction of height
`frequency`	`number`	`1.5`	Cycles per canvas width
`speed`	`number`	`1`	Animation speed multiplier
`filled`	`boolean`	`true`	Fill waves instead of stroking
`lineWidth`	`number`	`2`	Stroke width (when `filled=false`)
`animated`	`boolean`	`true`	Enable animation
`respectReducedMotion`	`boolean`	`true`	Honor `prefers-reduced-motion`

Dynamic Updates

effect.update({ amplitude: 0.15, speed: 1.2 });

Example

Introducing your product

Build something
people remember

A polished experience starts with the details. Ship interfaces that feel considered from the first pixel.

Get startedDocumentation