# Dither Dissolve
URL: https://remocn.dev/docs/transitions/dither-dissolve

Dissolve one scene into the next through a drifting field of dither pixels

- Install: `npx shadcn@latest add @remocn/dither-dissolve`
- Vibe: tech
- Natural length: 40f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/dither-dissolve
```

## Usage

`ditherDissolve()` is a Remotion transition presentation. Pass it to a
`TransitionSeries.Transition` between two sequences. It is content-agnostic —
the outgoing scene fades under the dither field while the incoming scene fades
in beneath it.

```tsx
import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { ditherDissolve } from "@/components/remocn/dither-dissolve";

export const MyVideo = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={70}>
      <SceneA />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition
      timing={linearTiming({ durationInFrames: 40 })}
      presentation={ditherDissolve()}
    />
    <TransitionSeries.Sequence durationInFrames={70}>
      <SceneB />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);
```

## Props

`ditherDissolve(props)` accepts:

| Prop | Type | Default | Description |
|---|---|---|---|
| `colorBack` | `string` | `"#141318"` | Background color of the dither field. |
| `colorFront` | `string` | `"#8f88ae"` | Ink color of the dither pixels. |
| `shape` | `"simplex" \| "warp" \| "dots" \| "wave" \| "ripple" \| "swirl" \| "sphere"` | `"simplex"` | Pattern source driving the dither. |
| `speed` | `number` | `1.5` | Shader animation speed. |

## Use when
- The video has a retro, terminal, or print aesthetic — the dither reads as CRT/risograph texture.
- Dev-tool and CLI content — pairs naturally with `terminal-simulator` and `matrix-decode`.
- Cuts need to stay quick but textured — 40 frames, unlike the longer dissolves.

## Don't use when
- The tone is soft and organic — the pixel grid reads technical; use `grain-dissolve` or `perlin-dissolve`.
- Brand colors clash with a two-color reduction — the field is strictly `colorBack`/`colorFront`.