Dither fieldPro

An animated dithered noise field in simplex, warp or ripple mode for a bounded media frame, at 24 fps through the shared clock, with a still frame and a pause control.

Markdown

On this page

ProA living noise field in a media frame in warp, simplex and ripple modes. Ripple follows the pointer.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/dither-field

Usage

tsx

import { DitherField } from "@/components/ui/chatcn/pro/dither-field"

<DitherField mode="warp" className="aspect-video rounded-xl" />

Use it where something is about to appear: an empty generation slot, a hero object, a voice session waiting to start. It is the only background-like effect in the kit and it always lives inside a frame, never behind a page.

Examples

States

ProPaused, sparse, dense, fine, slow, and as an empty generation slot behind a prompt hint.

Props

Prop	Type	Notes
`mode`	`"simplex" \| "warp" \| "ripple"`	Default `warp`
`algorithm`	Ordered methods	Default `bayer-4`
`pixelSize`, `scale`, `density`	`number`	Defaults 3, 1 and 0.5
`speed`, `fps`	`number`	Defaults 1 and 24 (12 to 30)
`still`	`number`	Seconds into the loop for the reduced motion frame. Default 6
`followPointer`	`boolean`	Ripple rings follow the pointer. Default true
`paused`, `defaultPaused`, `onPausedChange`		Controlled or not
`pauseControl`, `label`	`boolean`, `string`	The corner button and what it names
`ink`, `paper`	`string`	Tokens or CSS colors

Keyboard

Key	Action
`Tab` then `Enter` or `Space`	Pause or play from the corner button

Accessibility

The loop never ends, so the pause control is on by default (WCAG 2.2.2).
The canvas is aria-hidden; children you place on top stay readable.
Hidden under forced colors; pure ink and paper under more contrast.

Motion

24 fps by default, stopped offscreen and in hidden tabs, resuming where it left off.
The ripple focus eases toward the pointer instead of jumping with it.
Under reduced motion it draws one frame at still and the pause control hides, since nothing moves.