emocn

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.

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:

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

Page TurnNEW

The exiting scene swings up and away like a notebook page in stop-motion poses

Caret WipeNEW

Sweep a typing caret across the frame, wiping the outgoing scene into the next