# Press Warp Dive
URL: https://remocn.dev/docs/transitions/press-warp-dive

A send button is pressed, the frame pinches into it and dives through an orb into the result screen

- Install: `npx shadcn@latest add @remocn/press-warp-dive`
- Vibe: tech
- Natural length: 30f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/press-warp-dive
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PressWarpDiveDemo } from "@/components/remocn/press-warp-dive";

const PressWarpDiveDemoScene = () => (
  <PressWarpDiveDemo
    prompt="A 30-second teaser for our new editor"
    headingB="Your teaser is ready"
    title="Editor teaser, v1"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="PressWarpDiveDemo"
    component={PressWarpDiveDemoScene}
    durationInFrames={138}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Scene A is a prompt composer: a suggestion appears, the prompt types, and a cursor presses send. The press pinches the frame, an orb grows from the button, and the camera dives through it into scene B, a result screen with a heading, your image and a title. Pass `heading`, `prompt`, `headingB` and `title` for the copy and `image` for your own picture; it ships light and dark, and the transition itself is also exported as `pressWarpDive()` for a 30-frame `linearTiming` in your own `TransitionSeries`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette for both scenes |
| `accent` | `string` | — | Accent color; defaults to the theme accent |
| `heading` | `string` | `"What are we launching?"` | Headline above the prompt box in scene A |
| `prompt` | `string` | `"A 30-second launch film for our new editor"` | Text typed into the prompt box before the press |
| `headingB` | `string` | `"Your film is ready"` | Headline of the result scene |
| `title` | `string` | `"Launch film, v2"` | Title of the generated result in scene B |
| `image` | `string` | `staticFile("reel/reel-5.jpg")` | Image src for the result card; the default exists only in the Remocn repo |
| `ground` | `GshPresetId` | — | Preset id for the scene A gradients.sh shader ground |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the scene A shader parameters |
| `groundB` | `GshPresetId` | — | Preset id for the scene B gradients.sh shader ground |
| `groundParamsB` | `Partial<GradientParams>` | — | Overrides for the scene B shader parameters |
| `transition` | `PressWarpDiveProps` | — | Overrides for the transition presentation props |

## Use when
- An AI-prompt product demo where typing a request and hitting send should visibly launch the generated result.
- A beat that needs a strong match-cut from a small UI control into a full-frame scene.
- A launch video where the next scene is a finished artifact, such as a video, document or build.

## Don't use when
- There is no button or clickable control to anchor the cut — use `zoom-blur` for a general push into the next scene.
- The cut should feel calm and editorial rather than a dramatic dive — use `iris-wipe`.
- You need a lateral, directional move between two shots — use `whip-pan`.