compreel
EN中文

Motion vocabulary · Transitions between shots

Match-cut card flip

The frame turns edge-on like a card and the next shot turns in from the other side.

Live loop · 6 s · 1920×1080 at 24 fps

Parameters

ParameterTypeWhat it does
phase (required)"out" | "in"out at the end of the leaving shot, in at the start of the entering shot
at_msmsout: shot length minus dur_ms; in: 0
dur_msmsone half (wipe 420, zoomThrough 560, flip 460, sweep 480)
dir"left" | "right" | "up" | "down"
Default: "left"		where things travel
contentelement | selectorzoomThrough / flip: the shot's main wrapper that moves
target{x, y, w, h}zoomThrough: the UI element the camera goes through, stage px
ease{"<move>": ease}retune any named move (see the entry's moves): a preset name ("out-expo"), a cubic-bezier [x1, y1, x2, y2], {spring: [hz, damping]} or {trapezoid: [accel, decel]}. A wrong move name or curve throws, it never falls back. A move measured from a reference clip (the replica workbench's measure/*.json, frame-keyed) becomes a curve without conversion: MV.fitEase(doc, "x", {from: 133, to: 142}) or `motion-fit <file> --measure x --from 133 --to 142 --ease`
brandhex
Default: #6B5BFF		the site's brand colour; the component derives its accent (>= 3:1 on the stage), surfaces and ink from it
stage"dark" | "light"
Default: "dark"		the stage the component sits on
displayfont stem
Default: "Inter-Bold"		headline stem; name it in the call so the runtime loads it
bodyfont stem
Default: "Inter-Regular"		UI / body stem; name it in the call so the runtime loads it
start_msms
Default: 300		when the component starts, ms into the shot
backgroundboolean
Default: false		draw the stage background (off: transparent over the shot's own stage)
place{x, y, w, h, z?}the component's place in the shot's layout: it fits its 1920x1080 composition into this stage rect (centred, aspect kept); z orders components front to back. Default: the whole stage

Moves and their curves

Every move is eased on its own. Retune one with ease: { "<move>": <curve> }, a curve name or cubic-bezier handles.

MoveCurveWhat it does
flip.awayin-quadout half: the card turning edge-on and shrinking to 0.88x
flip.inout-quadin half: the new card turning in from edge-on

This demo

variant"flip"
dir"left"
brand#6B5BFF
stagedark
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s2", MV.transition(el, {"variant":"flip","dir":"left","phase":"out","brand":"#6B5BFF"}));
MV.bind("s3", MV.transition(el, {"variant":"flip","dir":"left","phase":"in","at_ms":0,"brand":"#6B5BFF"}));

When to use it in a launch film

Before and after, or two sides of the same thing (the user's view and the team's view).

Why it works

A flip says 'the other side of this', which a plain cut cannot.

Do not combine with

  • the runtime's transition_in on the same cut (two transitions fight)
  • text-heavy shots on either side (text at an angle is unreadable)

Job in the film

  • Transition

Natural length

0.8–1.1 s

Make a film with these moves in LaunchReel

More transitions between shots

All motion components →