Perlin Dissolve

Sweep a perlin-noise threshold across the frame to dissolve into the next scene

Installation

$ pnpm dlx shadcn@latest add @remocn/perlin-dissolve

perlinDissolve() is a Remotion transition presentation. Pass it to a TransitionSeries.Transition between two sequences. The perlin field sweeps its threshold from back to front while the incoming scene resolves through it, so give the transition enough frames for the full sweep (104 works well).

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { perlinDissolve } from "@/components/remocn/perlin-dissolve";
 
export const MyVideo = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={110}>
      <SceneA />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition
      timing={linearTiming({ durationInFrames: 104 })}
      presentation={perlinDissolve()}
    />
    <TransitionSeries.Sequence durationInFrames={110}>
      <SceneB />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

Props

perlinDissolve(props) accepts:

Prop	Type	Default	Description
`colorBack`	`string`	`"#141318"`	Solid color behind the noise during the transition.
`colorFront`	`string`	`"#8f88ae"`	Foreground color the noise threshold sweeps toward.
`softness`	`number`	`0.1`	Edge softness of the noise threshold.
`speed`	`number`	`1`	Shader animation speed.

Dither Dissolve

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

Smoke Dissolve

Expand a smoke ring outward across the frame to reveal the next scene

Perlin Dissolve

Installation

Usage

Props