Dither

Gradients dissolve through ordered dithering patterns. The raw texture of pixels, elevated into motion.

Preview

Pixel Size

4pxAngle

135°Noise

0.30Speed

1.0

Usage

import { createDither } from "syaivo";

const effect = createDither({
  colors: ["#c084fc", "#818cf8", "#38bdf8", "#2dd4bf"],
  pixelSize: 4,
  pattern: "bayer",
  angle: 135,
});

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

Options

Option	Type	Default	Description
`colors`	`string[]`	Purple → blue → teal	Gradient color stops
`backgroundColor`	`string`	`"#0a0a0a"`	Canvas background
`pixelSize`	`number`	`4`	Size of each dither block (px)
`pattern`	`"bayer" \| "dots"`	`"bayer"`	Dithering pattern
`angle`	`number`	`135`	Gradient angle in degrees
`noiseIntensity`	`number`	`0.3`	Noise distortion amount (0–1)
`speed`	`number`	`1`	Animation speed multiplier
`animated`	`boolean`	`true`	Enable animation
`respectReducedMotion`	`boolean`	`true`	Honor `prefers-reduced-motion`

Dynamic Updates

effect.update({ pixelSize: 6, pattern: "dots" });

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