# Before After
URL: https://remocn.dev/docs/media/before-after

A divider sweeps across a framed image to reveal the after version, then settles back to the pause point.

- Install: `npx shadcn@latest add @remocn/before-after`
- Vibe: premium
- Natural length: 112f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/before-after
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BeforeAfter } from "@/components/remocn/before-after";

const BeforeAfterScene = () => (
  <BeforeAfter
    before="/shots/raw.jpg"
    after="/shots/graded.jpg"
    title="Graded in one pass"
  />
);

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

A framed image appears with a grip handle. The divider sweeps across to reveal the after version, then returns to `pauseAt` before the grip fades. Pass your own `before` and `after` image URLs, with optional labels and a `title`. If neither is given, the built-in demo image shows a flat look against a graded look and uses a `staticFile` from the Remocn repo. It ships light and dark through `theme`.

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 |
|---|---|---|---|
| `before` | `string` | — | Image URL for the before side. Defaults to a repo-only file. |
| `after` | `string` | — | Image URL for the after side. Defaults to a repo-only file. |
| `beforeLabel` | `string` | `"Before"` | Label on the before side. |
| `afterLabel` | `string` | `"After"` | Label on the after side. |
| `title` | `string` | — | Optional title above the frame. |
| `aspect` | `number` | — | Aspect ratio of the frame. Defaults to 16:9, or 4:5 in portrait. |
| `fit` | `"cover" \| "contain"` | `"cover"` | How images fill the frame. |
| `pauseAt` | `number` | `0.5` | Divider position where the sweep rests, 0 to 1. |
| `accent` | `string` | `"#3B5BFD"` | Accent color of the grip and divider. |
| `background` | `string` | — | Solid background color for the stage. |
| `ground` | `GshPresetId` | — | Shader preset id for the animated background. |
| `groundParams` | `Partial<GradientParams>` | — | Partial shader parameters that override the ground preset. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships light and dark. |

## Use when
- Showing a color grade, edit, retouch or redesign as a before and after.
- A comparison beat with Before and After labels and an optional title above.
- Any image pair where a draggable-slider feel works better than a cut.

## Don't use when
- The change is a whole UI switching theme — use `theme-flip`.
- You want a scene-to-scene wipe rather than a comparison — use `wave-wipe`.
- The change is in text, not an image — use `diff-swap`.