Before After

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

Installation

$ pnpm dlx 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.

Props14

Prop	Type	Default
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	number0.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	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color scheme. Ships light and dark.

beforestring
Image URL for the before side. Defaults to a repo-only file.
afterstring
Image URL for the after side. Defaults to a repo-only file.
beforeLabelstring
Label on the before side.
Default"Before"
afterLabelstring
Label on the after side.
Default"After"
titlestring
Optional title above the frame.
aspectnumber
Aspect ratio of the frame. Defaults to 16:9, or 4:5 in portrait.
fit"cover" | "contain"
How images fill the frame.
Default"cover"
pauseAtnumber
Divider position where the sweep rests, 0 to 1.
Default0.5
accentstring
Accent color of the grip and divider.
Default"#3B5BFD"
backgroundstring
Solid background color for the stage.
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color scheme. Ships light and dark.
Default"dark"