# Smoke Dissolve
URL: https://remocn.dev/docs/transitions/smoke-dissolve

Expand a smoke ring outward across the frame to reveal the next scene

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

## Installation

```bash
npx 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 | Description |
|---|---|---|---|
| `colorBack` | `string` | `"#141318"` | Solid color behind the smoke ring during the transition. |
| `colors` | `string[]` | `["#8f88ae"]` | Smoke ring colors. |
| `speed` | `number` | `1` | Shader animation speed. |

## Use when
- A reveal should feel like emerging from mist — moody, cinematic, mysterious openings.
- Center-out motion suits the content: the new scene is literally born at the middle of the frame.
- Dark palettes — the smoke ring reads best against deep backgrounds.

## Don't use when
- Fast cuts — the ring expansion needs ~100 frames of runway.
- Bright, flat, poster-like scenes — the smoke loses definition on light backgrounds.