Shavin UI Docs & Component Gallery

Interactive Playground

Move cursor over canvas to interact

Variant

Matrix Algorithm

Wave Speed0.25x

Wave Frequency1.6

Wave Amplitude0.50

Dither Intensity1.0

Pointer Repulsion

Anatomy

import { DitherWaves } from "@shavin/fx";

<DitherWaves
  color="theme"
  speed={0.25}
  frequency={1.6}
  amplitude={0.5}
  intensity={1.0}
  matrix="8x8"
  interactive={true}
  className="h-96 rounded-[var(--radius-panel)]"
/>

Examples

Theme Palette Dither Waves

Dynamically adapts to the active accent color token.

<DitherWaves
  color="theme"
  speed={0.2}
  frequency={2.8}
  amplitude={0.3}
  intensity={3.2}
  className="h-64 rounded-[var(--radius-panel)]"
/>

Monochrome High-Contrast Waves

Crisp black and white Bayer dithered fluid ripples.

<DitherWaves
  color="monochrome"
  speed={0.15}
  frequency={3.5}
  amplitude={0.4}
  matrix="8x8"
  className="h-64 rounded-[var(--radius-panel)]"
/>

Coarse 4×4 Matrix Retro Crunch

16-step matrix thresholding for an 80s arcade computer terminal aesthetic.

<DitherWaves
  color="accent-dark"
  speed={0.3}
  frequency={4.0}
  amplitude={0.5}
  matrix="4x4"
  className="h-64 rounded-[var(--radius-panel)]"
/>

Props Reference

Prop	Type	Default	Description
color	"theme" \| "monochrome" \| "accent-dark" \| "accent-light" \| string[]	"theme"	Color palette mode or pair of custom [waveColor, bgColor] strings.
speed	number	0.25	Wave animation flow speed.
frequency	number	1.6	Spatial noise frequency and density.
amplitude	number	0.50	Wave distortion amplitude height.
intensity	number	1.0	Dither contrast and color intensity multiplier.
matrix	"8x8" \| "4x4"	"8x8"	Bayer matrix resolution algorithm (8x8 fine vs 4x4 coarse).
interactive	boolean	true	Enables pointer wave repulsion interaction.
mouseRadius	number	0.3	Cursor interaction influence radius.