# PR Merge
URL: https://remocn.dev/docs/product-scenes/pr-merge

A pull request's checks pass one by one, a cursor merges it, and the branch is offered for deletion.

- Install: `npx shadcn@latest add @remocn/pr-merge`
- Vibe: tech
- Natural length: 178f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/pr-merge
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PrMerge } from "@/components/remocn/pr-merge";

const PrMergeScene = () => (
  <PrMerge
    repo="acme/app"
    title="Add dark mode"
    number={128}
    branch="feat/dark-mode"
  />
);

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

A pull request card enters with a list of CI checks that run and pass one by one. Once all are green, a cursor clicks Merge, confirms, and the checks collapse into a Merged state with a Delete branch prompt. Pass `repo`, `title`, `number`, `branch` and `checks` (plain names or `{ name, workflow, seconds }`) to make it yours; it ships light and dark.

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 |
|---|---|---|---|
| `repo` | `string` | `"remocn/remocn"` | Repository slug shown in the header |
| `title` | `string` | `"Add launch pack"` | Pull request title |
| `number` | `number` | `312` | Pull request number |
| `author` | `string` | `"maya-chen"` | Author handle shown on the card |
| `reviewer` | `string` | `"leo-park"` | Reviewer handle who approves the pull request |
| `branch` | `string` | `"feat/launch-pack"` | Source branch name |
| `base` | `string` | `"main"` | Target branch the pull request merges into |
| `commits` | `number` | `14` | Commit count shown in the summary |
| `checks` | `(string \| PrCheck)[]` | `DEFAULT_CHECKS` | CI checks to run; plain names or { name, workflow, seconds } |
| `additions` | `number` | `1248` | Added-lines count in the diff stat |
| `deletions` | `number` | `96` | Removed-lines count in the diff stat |
| `mergeSha` | `string` | `"3f2a9c1"` | Short commit hash shown after the merge |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights, buttons and progress |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline |
| `theme` | `"light" \| "dark"` | `"light"` | Light or dark palette |
| `ground` | `GshPresetId` | — | gradients.sh preset id for the backdrop shader |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the backdrop shader parameters |

## Use when
- A developer-tool launch beat about code review: checks go green, one click merges, the status flips to Merged.
- A ship-faster scene that shows a CI pipeline gating a merge instead of describing it.
- A changelog video for a git workflow feature where the merge confirmation is the payoff.

## Don't use when
- You want a build streaming logs and flipping to Ready — use `deploy-pipeline`.
- The story is a gradual percentage rollout with metric charts — use `feature-flag-rollout`.
- You only need a short typed-code-to-UI moment, not a review flow — use `live-code-compilation`.