# Swirl Dissolve
URL: https://remocn.dev/docs/transitions/swirl-dissolve

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

- Install: `npx shadcn@latest add @remocn/swirl-dissolve`
- Vibe: premium
- Natural length: 104f @ 30fps

## Installation

```bash
npx 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 | 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. |

## Use when
- A dramatic chapter break where the frame should visibly transform — reveals, act changes.
- The brand can carry hypnotic, rotational motion; band colors take brand palettes well.
- You have runtime to spare — the full twist-untwist arc needs ~3.5 seconds.

## Don't use when
- Fast cuts — under ~80 frames the twist arc collapses into noise.
- Repeated use within one video — the vortex is a statement move, one per video.