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-dissolveUsage
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).
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 | Description |
|---|---|---|---|
colors | string[] | ["#141318", "#3a3a5c", "#1f1d29", "#8f88ae"] | Colors of the warping field. |
distortion | number | 0.8 | Peak distortion of the field at mid-transition. |
swirl | number | 0.6 | Rotational folding of the warp pattern. |
softness | number | 1 | Blending softness between the field colors. |
speed | number | 1 | Shader animation speed. |