# ASCII Dissolve
URL: https://remocn.dev/docs/transitions/ascii-dissolve

Dissolve one scene into the next through a drifting field of ASCII glyphs

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

## Installation

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

## Usage

`asciiDissolve()` is a Remotion transition presentation. Pass it to a
`TransitionSeries.Transition` between two sequences. The outgoing scene blurs
out under a rising grid of monospace glyphs, then the incoming scene resolves
cell by cell as the field dissolves.

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

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

## Props

`asciiDissolve(props)` accepts:

| Prop | Type | Default | Description |
|---|---|---|---|
| `colorBack` | `string` | `"#0d0d10"` | Canvas behind the glyphs during the hold. |
| `colorFront` | `string` | `"rgba(242,242,242,0.6)"` | Glyph color. |
| `cellSize` | `number` | `22` | Row height of one glyph cell, in pixels. |
| `ramp` | `string` | `" .:-=+*#%@"` | Density ramp, lightest to densest. |
| `accentColor` | `string` | — | Optional second color for a sparse scattering of accent cells. |
| `accentDensity` | `number` | `0.05` | Share of cells rendered in the accent color, 0–1. |

## Use when
- The video has a retro, terminal, or print aesthetic — the text-grid dissolve reads as CRT or risograph texture.
- Content is dev-tool or teletype in tone and a monospace-glyph cut fits the brand.
- The cut needs to stay content-agnostic — it works between any two scenes with no color matching required.

## Don't use when
- The tone is soft or organic — use `grain-dissolve` or `perlin-dissolve` for a gentler texture instead.
- You need a camera move rather than a dissolve — use `whip-pan` or `push-through`.
- The brand is clean and minimal — the character grid reads as deliberately rough, not polished.