Card Flip
A whole-frame 3D flip that hands one scene off to the next on backface culling.
PrimitiveTransitions
$ npx remotion-ui@latest add transition-card-flipEach scene turns a half-circle in its own direction and the hand-off is done by backface culling: the outgoing face passes 90° at the midpoint and is hidden for the rest of the window, and the incoming one stays hidden until it crosses back through -90°. Clamping both at 90° instead leaves two faces parked edge-on, flickering against each other.
A flipping frame is zero pixels wide at the halfway point, so something is
visible behind it. backdrop is that something — the outgoing layer paints it,
since it sits under the incoming one for the whole cut. Set it to your scene
background rather than leaving the page through.
shading darkens the face as it turns away, on cos() of the turn, which is
exactly 1 at 0° and so leaves a settled scene untouched. dip recedes the card
at the midpoint on a parabola that is exactly 1 at both ends.
Exports transitionCardFlip() and getTransitionCardFlipDuration() for use
with TransitionSeries.Transition.
Requires @remotion/transitions. Run npx remotion add @remotion/transitions if not already installed.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/transition-card-flip- Use when: scene transitions and composition pacing.
- Customize: durationInFrames, axis, perspective, backdrop, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { transitionCardFlip } from "@/remotion/primitives/transition-card-flip";
<TransitionSeries.Transition {...transitionCardFlip({ axis: "y" })} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| durationInFrames | number | 24 | Transition overlap length. |
| axis | "y" | "x" | "y" | y flips left-to-right like a page; x flips top over bottom. |
| perspective | number | 1600 | Perspective distance in px. Lower is a wider-angle flip. |
| backdrop | string | "#05060a" | Colour behind the card while it is edge-on. Without it the page background shows at the halfway frame. |
| shading | number | 0.55 | Peak darkening of the face turning away, 0→1. |
| dip | number | 0.86 | How far the card recedes at the halfway point. |
| variant | "linear" | "spring" | "editorial" | "editorial" | Timing curve. |