Dither Dissolve

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

Installation

$ pnpm dlx 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
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	number1.5 Shader animation speed.

colorBackstring
Background color of the dither field.
Default"#141318"
colorFrontstring
Ink color of the dither pixels.
Default"#8f88ae"
shape"simplex" | "warp" | "dots" | "wave" | "ripple" | "swirl" | "sphere"
Pattern source driving the dither.
Default"simplex"
speednumber
Shader animation speed.
Default1.5