Mesh Gradient

Organic color fields blend and shift in slow motion. Bold gradients that feel like they breathe.

Preview

Points

6Distortion

0.40Speed

0.20

Usage

import { createMeshGradient } from 'syaivo';

const effect = createMeshGradient({
  backgroundColor: '#0a0a0a',
  points: 6,
  distortion: 0.4,
  speed: 0.2,
});

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

Options

Option	Type	Default	Description
`colors`	`string[]`	Vibrant palette	Colors for mesh control points
`backgroundColor`	`string`	`"#0a0a0a"`	Canvas background
`points`	`number`	`6`	Number of control points
`distortion`	`number`	`0.4`	How far points drift from base (0–1)
`speed`	`number`	`0.2`	Animation speed multiplier
`animated`	`boolean`	`true`	Enable animation
`respectReducedMotion`	`boolean`	`true`	Honor `prefers-reduced-motion`

Dynamic Updates

effect.update({ points: 8, distortion: 0.6 });

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