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

Usage

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).

tsx

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
colorBack	string"#141318" Solid color behind the noise during the transition.
colorFront	string"#8f88ae" Foreground color the noise threshold sweeps toward.
softness	number0.1 Edge softness of the noise threshold.
speed	number1 Shader animation speed.

colorBackstring
Solid color behind the noise during the transition.
Default"#141318"
colorFrontstring
Foreground color the noise threshold sweeps toward.
Default"#8f88ae"
softnessnumber
Edge softness of the noise threshold.
Default0.1
speednumber
Shader animation speed.
Default1