emocn

Smoke Dissolve

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

Installation

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

Usage

smokeDissolve() is a Remotion transition presentation. Pass it to a TransitionSeries.Transition between two sequences. The smoke ring grows in radius, scale and thickness while the incoming scene resolves behind it, so give the transition enough frames for the full expansion (104 works well).

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

Props

smokeDissolve(props) accepts:

PropTypeDefaultDescription
colorBack
string"#141318"Solid color behind the smoke ring during the transition.
colors
string[]["#8f88ae"]Smoke ring colors.
speed
number1Shader animation speed.

Perlin Dissolve

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

Whip Pan

Whip the camera sideways with motion blur so both scenes fly through the frame in one move