Swirl Dissolve
Unwind a swirl shader open and wind it shut to reveal the next scene
Installation
$ pnpm dlx shadcn@latest add @remocn/swirl-dissolveUsage
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).
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 | Description |
|---|---|---|---|
colors | string[] | ["#1f1d29", "#413d56", "#8f88ae"] | Swirl band colors. |
colorBack | string | "#141318" | Solid color behind the swirl during the transition. |
bandCount | number | 10 | Number of swirl bands. |
softness | number | 0.35 | Edge softness of the bands. |
speed | number | 1 | Shader animation speed. |