Duet Split

A split screen contrasts a slow grey before side with a crisp gradient after side, row by row

Installation

$ pnpm dlx shadcn@latest add @remocn/duet-split

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { DuetSplit } from "@/components/remocn/duet-split";
 
const DuetSplitScene = () => (
  <DuetSplit
    beforeLabel="Before"
    afterLabel="With us"
    rows={[
      { before: "3 weeks", after: "1 day" },
      { before: "$12K", after: "$0" },
    ]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="DuetSplit"
    component={DuetSplitScene}
    durationInFrames={140}
    fps={30}
    width={1280}
    height={720}
  />
);

Two slabs slide in, labelled by beforeLabel and afterLabel. The grey side types out wobbly serif values row by row; the after side then pushes in and shows the crisp replacements, and a wordmark rises at the bottom. Pass rows as { before, after } pairs; it ships dark and light via theme. The closing wordmark is the Remocn logo, swap RemocnLogo in the copied file.

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

Props8

Prop	Type	Default
beforeLabel	string"Before" Label above the grey before side.
afterLabel	string"With remocn" Label above the gradient after side.
rows	DuetRow[]— Paired values, one row each: the old way and the new way.
accent	string"#3B5BFD" Color of the dot beside the after label.
theme	"dark" \| "light""dark" Color scheme. Ships dark and light.
ground	GshPresetId— gradients.sh preset id for the animated ground.
groundParams	Partial<GradientParams>— Overrides for the ground shader parameters.
speed	number1 Playback speed multiplier for the whole timeline.

beforeLabelstring
Label above the grey before side.
Default"Before"
afterLabelstring
Label above the gradient after side.
Default"With remocn"
rowsDuetRow[]
Paired values, one row each: the old way and the new way.
accentstring
Color of the dot beside the after label.
Default"#3B5BFD"
theme"dark" | "light"
Color scheme. Ships dark and light.
Default"dark"
groundGshPresetId
gradients.sh preset id for the animated ground.
groundParamsPartial<GradientParams>
Overrides for the ground shader parameters.
speednumber
Playback speed multiplier for the whole timeline.
Default1