# Warp Dissolve
URL: https://remocn.dev/docs/transitions/warp-dissolve

Melt the outgoing scene into a folding domain-warp field that straightens back out into the next scene

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

## Installation

```bash
npx shadcn@latest add @remocn/warp-dissolve
```

## Usage

`warpDissolve()` is a Remotion transition presentation. Pass it to a
`TransitionSeries.Transition` between two sequences. The outgoing scene blurs
and swells into a liquid color field, distortion peaks mid-transition, and the
incoming scene sharpens out of the warp. Give it enough frames for the melt to
read (76 works well).

```tsx
import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { warpDissolve } from "@/components/remocn/warp-dissolve";

export const MyVideo = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={96}>
      <SceneA />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition
      timing={linearTiming({ durationInFrames: 76 })}
      presentation={warpDissolve()}
    />
    <TransitionSeries.Sequence durationInFrames={96}>
      <SceneB />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);
```

## Props

`warpDissolve(props)` accepts:

| Prop | Type | Default | Description |
|---|---|---|---|
| `colors` | `string[]` | `["#141318", "#3a3a5c", "#1f1d29", "#8f88ae"]` | Colors of the warping field. |
| `distortion` | `number` | `0.8` | Peak distortion of the field at mid-transition. |
| `swirl` | `number` | `0.6` | Rotational folding of the warp pattern. |
| `softness` | `number` | `1` | Blending softness between the field colors. |
| `speed` | `number` | `1` | Shader animation speed. |

## Use when
- Moving between chapters or moods — the melt reads as time passing or context shifting.
- The brand is organic, creative, or experimental; the field colors take brand palettes well.
- You want a slow, textured transition that holds attention for two-plus seconds.

## Don't use when
- The transition must be fast — under ~50 frames the melt has no room to read and looks like a smeared crossfade.
- Scenes are spatially related steps of one flow — use a directional move instead of a dissolve.