Warp Dissolve

Melt the outgoing scene into a folding domain-warp field that straightens back out into the next scene

Installation

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

Usage

warpDissolve() is a Remotion transition presentation. Pass it to a TransitionSeries.Transition between two sequences. The outgoing scene blurs and swells into a liquid color field, distortion peaks mid-transition, and the incoming scene sharpens out of the warp. Give it enough frames for the melt to read (76 works well).

tsx

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

Props

warpDissolve(props) accepts:

Prop	Type	Default
colors	string[]["#141318", "#3a3a5c", "#1f1d29", "#8f88ae"] Colors of the warping field.
distortion	number0.8 Peak distortion of the field at mid-transition.
swirl	number0.6 Rotational folding of the warp pattern.
softness	number1 Blending softness between the field colors.
speed	number1 Shader animation speed.

colorsstring[]
Colors of the warping field.
Default["#141318", "#3a3a5c", "#1f1d29", "#8f88ae"]
distortionnumber
Peak distortion of the field at mid-transition.
Default0.8
swirlnumber
Rotational folding of the warp pattern.
Default0.6
softnessnumber
Blending softness between the field colors.
Default1
speednumber
Shader animation speed.
Default1