# Dither Gradient

> Drifting pools of light rendered through an ordered Bayer dither, like an old print or early Mac screen, with a cursor glow.

Category: Backgrounds · MotionKit Plus · Updated 2026-10-23 · Live demo: https://motionkitui.com/components/dither-gradient

## When to use it

Retro-modern brands, developer tools, editorial sites and portfolios that want texture and character without noise or grain.

## How it works

The canvas has one pixel per dither cell and is scaled up with image-rendering: pixelated, so each pixel stays crisp. Every frame works out a brightness for each cell from three slowly wandering Gaussian pools of light, plus one at the pointer, and dims the centre for text. Ordered dithering then adds that cell's threshold from an 8×8 Bayer matrix before rounding to one of four tones. Because the thresholds are spread so evenly, smooth gradients become fine, regular patterns rather than random speckle.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/dither-gradient` after adding their registry token from https://motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `colors` | `[string, string]` | `["#0E7C86", "#93CACE"]` | The light's body and highlight. |
| `pixelSize` | `number` | `3` | Size of each dither pixel. |
| `speed` | `number` | `1` | Drift speed. 0 holds it still. |
| `interactive` | `boolean` | `true` | A glow that follows the pointer. |
| `children` | `ReactNode` |  | Your content, layered above. |

## Accessibility

- **Keyboard: Not applicable.** Decorative, nothing to focus.
- **Screen readers: Pass.** The canvas is hidden from assistive tech; only your content is read.
- **Reduced motion: Pass.** With reduced motion on, it draws one still frame. It also stops drawing off screen.
- **Colour contrast: Pass.** A dark centre keeps ivory text at 10:1 or better; the pointer glow can brighten what sits right under it.