ASCII Dissolve

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

Installation

$ pnpm dlx 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
colorBack	string"#0d0d10" Canvas behind the glyphs during the hold.
colorFront	string"rgba(242,242,242,0.6)" Glyph color.
cellSize	number22 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	number0.05 Share of cells rendered in the accent color, 0–1.

colorBackstring
Canvas behind the glyphs during the hold.
Default"#0d0d10"
colorFrontstring
Glyph color.
Default"rgba(242,242,242,0.6)"
cellSizenumber
Row height of one glyph cell, in pixels.
Default22
rampstring
Density ramp, lightest to densest.
Default" .:-=+*#%@"
accentColorstring
Optional second color for a sparse scattering of accent cells.
accentDensitynumber
Share of cells rendered in the accent color, 0–1.
Default0.05