# Push Through
URL: https://remocn.dev/docs/transitions/push-through

Dolly through the outgoing scene while the next one approaches from the depth

- Install: `npx shadcn@latest add @remocn/push-through`
- Vibe: premium
- Natural length: 40f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/push-through
```

## Usage

`pushThrough()` is a Remotion transition presentation. Pass it to a
`TransitionSeries.Transition` between two sequences. The camera pushes
forward: the outgoing scene accelerates past the lens, blurring as it grows to
`zoom`, while the incoming scene scales up from the depth with a small
overshoot settle. Around 40 frames keeps the dolly readable.

```tsx
import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { pushThrough } from "@/components/remocn/push-through";

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

## Props

`pushThrough(props)` accepts:

| Prop | Type | Default | Description |
|---|---|---|---|
| `zoom` | `number` | `2.4` | How far the outgoing scene grows past the camera. |
| `blur` | `number` | `14` | Peak blur in pixels as scenes pass the focal plane. |

## Use when
- The narrative moves deeper into a topic — zooming in on a feature, entering a product, chapter descent.
- A climactic arrival: the CTA or logo scene deserves the camera physically landing on it.
- You want spatial continuity between scenes without any texture or overlay.

## Don't use when
- Scenes are peers moving sideways — use `whip-pan`; the push implies hierarchy (outer → inner).
- Dense text fills the outgoing scene edge-to-edge — the scale-up crops it awkwardly mid-flight.