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

tsx

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:

Prop	Type	Default
colorBack	string"#141318" Solid color behind the smoke ring during the transition.
colors	string[]["#8f88ae"] Smoke ring colors.
speed	number1 Shader animation speed.

colorBackstring
Solid color behind the smoke ring during the transition.
Default"#141318"
colorsstring[]
Smoke ring colors.
Default["#8f88ae"]
speednumber
Shader animation speed.
Default1