Dither Dissolve
Dissolve one scene into the next through a drifting field of dither pixels
Installation
$ pnpm dlx shadcn@latest add @remocn/dither-dissolveUsage
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.
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. |