# Ripple Zoom
URL: https://remocn.dev/docs/transitions/ripple-zoom

Fly the camera through the center of grainy ripple rings while the next scene approaches from the depth

- Install: `npx shadcn@latest add @remocn/ripple-zoom`
- Vibe: premium
- Natural length: 88f @ 30fps

## Installation

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

## Usage

`rippleZoom()` is a Remotion transition presentation. Pass it to a
`TransitionSeries.Transition` between two sequences. The outgoing scene blows
past the camera, a grain-gradient ripple field opens up, and the camera dives
through the center of the rings — the field magnifies toward `zoom` while the
incoming scene counter-scales up from the depth, so the two motions read as
one continuous dolly onto the new scene. Keep the incoming scene transparent
so it lands on the ripple field. Give the flight enough frames to read (88
works well).

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

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

## Props

`rippleZoom(props)` accepts:

| Prop | Type | Default | Description |
|---|---|---|---|
| `colors` | `string[]` | `["#3a3a52", "#4a4a68", "#8f88ae"]` | Colors of the ripple rings. |
| `colorBack` | `string` | `"#141318"` | Backdrop color between the rings. Match it to the scene backgrounds for a seamless dive. |
| `intensity` | `number` | `0.5` | Distortion strength of the ripple rings. |
| `softness` | `number` | `0.5` | Blending softness between the ring colors. |
| `noise` | `number` | `0.5` | Amount of per-pixel grain over the rings. |
| `zoom` | `number` | `4` | Final magnification of the ripple field — how deep the camera dives through the rings. |
| `speed` | `number` | `1` | Shader animation speed of the rings. |

## Use when
- A hero statement or logo deserves a camera move — the dolly-through-rings reads as arriving at the point.
- The narrative zooms in: overview → detail, product → feature, chapter → moment.
- The video already uses the grain-gradient family (grain-dissolve, wave-wipe) — same texture language.

## Don't use when
- The incoming scene has an opaque full-frame background — it hides the field and kills the depth illusion.
- Scenes chain rapidly — the fly-through needs ~88 frames; shorter reads as a scale pop.