# Dithering
URL: https://remocn.dev/docs/shaders/components/shader-dithering

Ordered-dither shading over an animated gradient field

- Install: `npx shadcn@latest add @remocn/shader-dithering`
- Vibe: tech
- Natural length: 150f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/shader-dithering
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ShaderDithering } from "@/components/remocn/shader-dithering";

const ShaderDitheringScene = () => (
  <ShaderDithering speed={1} size={2} type="4x4" />
);

export const RemotionRoot = () => (
  <Composition
    id="ShaderDithering"
    component={ShaderDitheringScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);
```

## Credits

Shader by [paper-design/shaders](https://github.com/paper-design/shaders).

## Use when
- You want a retro/print, 1-bit ordered-dither texture over a moving gradient.
- A tech or lo-fi scene benefits from visible bayer/ordered dot structure.
- You want the matrix tunable via `type` (`"2x2"`, `"4x4"`, `"8x8"`).

## Don't use when
- You want a centered dithered sphere — override `shape` (this wrapper defaults to full-bleed `"wave"`).
- You want smooth, non-textured color — use `shader-mesh-gradient`.
- The dot pattern would reduce legibility of small text — raise `size` or use a solid `backdrop`.