# Zoom Blur
URL: https://remocn.dev/docs/transitions/zoom-blur

Push the outgoing scene through the viewer while the incoming one resolves out of blur

- Install: `npx shadcn@latest add @remocn/zoom-blur`
- Vibe: clean
- Natural length: 18f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/zoom-blur
```

## Usage

`zoomBlur()` is a Remotion transition presentation. Pass it to a
`TransitionSeries.Transition` between two sequences. The outgoing scene scales
past the viewer into blur while the incoming one resolves out of blur, riding
a soft opacity crossfade — a depth punch-in. The presentation applies no
internal easing, so the character comes entirely from the timing function.
`linearTiming({ durationInFrames: 18 })` is the recommended default, and
`springTiming` gives it a springy character. `rise` adds a vertical pickup to
the move.

```tsx
import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { zoomBlur } from "@/components/remocn/zoom-blur";

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

`push-through` is a scale push without the blur crossfade — reach for
`zoomBlur` when the cut should feel like a depth punch-in.

## Props

`zoomBlur(props)` accepts:

| Prop | Type | Default | Description |
|---|---|---|---|
| `blur` | `number` | `16` | Peak blur in pixels at the edges of the transition. |
| `rise` | `number` | `0` | Vertical pickup in pixels. The incoming scene rises into place while the outgoing one lifts away. 0 keeps the move purely depth-based. |

## Use when
- You need a default, general-purpose cut for a product demo — the de-facto workhorse transition of the catalog.
- The rhythm can be anything — it reads clean at both fast and slow cadences.
- You want a sense of depth without committing to a strong directional statement.

## Don't use when
- The cut needs lateral direction — use `whip-pan`.
- The moment needs explicit hierarchy descent (outer → inner) — use `push-through`.