Swirl Dissolve

Unwind a swirl shader open and wind it shut to reveal the next scene

Installation

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

Usage

swirlDissolve() is a Remotion transition presentation. Pass it to a TransitionSeries.Transition between two sequences. The incoming scene resolves through the swirl as it winds shut, so give the transition enough frames for the full open → hold → close motion (104 works well).

tsx

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

Props

swirlDissolve(props) accepts:

Prop	Type	Default
colors	string[]["#1f1d29", "#413d56", "#8f88ae"] Swirl band colors.
colorBack	string"#141318" Solid color behind the swirl during the transition.
bandCount	number10 Number of swirl bands.
softness	number0.35 Edge softness of the bands.
speed	number1 Shader animation speed.

colorsstring[]
Swirl band colors.
Default["#1f1d29", "#413d56", "#8f88ae"]
colorBackstring
Solid color behind the swirl during the transition.
Default"#141318"
bandCountnumber
Number of swirl bands.
Default10
softnessnumber
Edge softness of the bands.
Default0.35
speednumber
Shader animation speed.
Default1