Swipe Transition Wipe

A mobile-style swipe transition where the outgoing scene flicks off-screen and the new one slides in beside it, with a parallax background and a darkening trail.

A swipe-style transition borrowed from native mobile UIs. Two scenes sit side-by-side inside a flex slider; one snappy spring drives the slider's translateX from 0% to -100% (or the mirror), so the outgoing scene flicks off the edge while the incoming one slides in right behind it. A parallax background layer moves at a fraction of the foreground speed to fake depth, and the outgoing scene gets a subtle darkening overlay so it visibly recedes instead of just exiting.

Installation

$ pnpm dlx shadcn@latest add @remocn/swipe-transition-wipe

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { SwipeTransitionWipe } from "@/components/remocn/swipe-transition-wipe";

const SwipeScene = () => (
  <SwipeTransitionWipe
    direction="left"
    swipeAt={30}
    labelA="Before"
    labelB="After"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="SwipeTransitionWipe"
    component={SwipeScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`sceneA`	`ReactNode`	—	Override the first (outgoing) scene's content.
`sceneB`	`ReactNode`	—	Override the second (incoming) scene's content.
`labelA`	`string`	`"First"`	Label rendered on the default scene A gradient.
`labelB`	`string`	`"Second"`	Label rendered on the default scene B gradient.
`colorA1`	`string`	`"#0ea5e9"`	First gradient stop for scene A.
`colorA2`	`string`	`"#1e3a8a"`	Second gradient stop for scene A.
`colorB1`	`string`	`"#f97316"`	First gradient stop for scene B.
`colorB2`	`string`	`"#9333ea"`	Second gradient stop for scene B.
`background`	`string`	`"#050505"`	Stage background behind the parallax layer.
`direction`	`"left" \| "right"`	`"left"`	Which way the outgoing scene flicks off the screen.
`swipeAt`	`number`	`30`	Frame at which the swipe spring fires.
`parallaxFactor`	`number`	`0.6`	How much slower the background moves vs the foreground (0 = locked, 1 = matched).
`dimStrength`	`number`	`0.4`	Maximum opacity of the darkening overlay applied to the outgoing scene.
`speed`	`number`	`1`	Playback speed multiplier.
`className`	`string`	—	Optional className passed to the root container.

Notes

One spring, two layers

The same spring value drives the foreground slider and the parallax background — they can never desync, which is what sells the depth illusion.

Keep the flick snappy

Swipes feel natural when they're fast. The default spring resolves in ~50 frames with a touch of overshoot; slowing it down past ~80 frames starts to feel like a slide carousel instead of a gesture.