Diagonal Split

A diagonal seam slides the outgoing scene away to reveal the next with a band of light along the edge

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { DiagonalSplit } from "@/components/remocn/diagonal-split";
 
const DiagonalSplitScene = () => (
  <DiagonalSplit
    from="Built in a weekend"
    to="Launched on Monday"
    angle={28}
    accent="#3B5BFD"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="DiagonalSplit"
    component={DiagonalSplitScene}
    durationInFrames={100}
    fps={30}
    width={1280}
    height={720}
  />
);

A bright seam opens at angle, then the outgoing from scene is shoved off along the seam while the to scene settles in behind it on a fluted gradient. Pass from and to as short text or any React node and tune angle; it ships light and dark and the motion ends at frame 70.

Props6

Prop	Type	Default
from	React.ReactNode"Built in a weekend" Outgoing scene: a short headline or any React node
to	React.ReactNode"Launched on Monday" Incoming scene: a short headline or any React node
angle	number28 Seam angle in degrees
accent	string"#3B5BFD" Accent color used by the scenes
theme	"dark" \| "light""dark" Light or dark stage
speed	number1 Playback multiplier for the whole timeline

fromReact.ReactNode
Outgoing scene: a short headline or any React node
Default"Built in a weekend"
toReact.ReactNode
Incoming scene: a short headline or any React node
Default"Launched on Monday"
anglenumber
Seam angle in degrees
Default28
accentstring
Accent color used by the scenes
Default"#3B5BFD"
theme"dark" | "light"
Light or dark stage
Default"dark"
speednumber
Playback multiplier for the whole timeline
Default1