Dither

Flowing waves rendered with 8x8 ordered Bayer dithering in two colors; the cursor sends ripples through them. WebGL.

Dither

Open

color

background

pixelSize3

speed1

scale1

interactive

Installation

npx shadcn@latest add @glint-ui/dither

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/dither.json

Usage

import { Dither } from "@/components/ui/dither";

<div className="relative h-96">
  <Dither color="#c6ff3d" pixelSize={3} />
</div>

Props

Prop	Type	Default	Description
color	string	"#c6ff3d"	Ink color of the lit dots.
background	string	"#0a0a0c"	Background color between the dots.
pixelSize	number	3	Size of one dither pixel in px.
speed	number	1	Wave speed multiplier.
scale	number	1	Zoom; higher means broader waves.
interactive	boolean	true	Cursor sends ripples through the waves.
className	string	—	Extra classes for the root element.