Directional Wipe

A transition primitive that animates two scenes with transform: translateX/Y. The outgoing scene slides off in one direction while the incoming scene slides in from the opposite side. Uses transform (not left/top) so the browser doesn't trigger a layout reflow per frame.

Installation

$ pnpm dlx shadcn@latest add @remocn/directional-wipe

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { DirectionalWipe } from "@/components/remocn/directional-wipe";

const DirectionalWipeScene = () => (
  <DirectionalWipe
    from={<SceneA />
);

export const RemotionRoot = () => (
  <Composition
    id="DirectionalWipe"
    component={DirectionalWipeScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`from`	`ReactNode`	—	The outgoing scene. Falls back to a labeled colored panel.
`to`	`ReactNode`	—	The incoming scene. Falls back to a labeled colored panel.
`direction`	`"left" \| "right" \| "up" \| "down"`	`"left"`	Direction the outgoing scene slides toward.
`transitionStart`	`number`	`durationInFrames * 0.4`	Frame at which the wipe begins.
`transitionDuration`	`number`	`20`	Length of the wipe in frames.
`className`	`string`	—	Optional className for the outer container.

Notes

Pair with Sequence

For multi-scene videos, wrap each scene in <Sequence> and overlap their durations so the wipe blends cleanly between them.

Use transform, not left/top

Animating positional CSS properties triggers layout reflow per frame. Stick to transform: translateX/Y for smooth 60fps renders.