gtkottman/mortiflix-oss/transition-board

The transition board

Every cut is designed. Between each style frame and the next there is something that carries the change: a shape that grows, a line that leads the eye, a camera that moves, an element that becomes another. A transition without a carrier and a reason doesn't go on the board.

The screen never goes blank. No transition fills the frame with a colour (a cover or dip to purple, black or any flat colour) or blows it out to white (a flash or light leak to white). The scenes' own elements do the transition: they move, grow, open, fold, carry the eye, or a real object (2D or 3D) passes through the frame and brings the next scene with it. board.mjs check looks at every 10% of each transition and fails a frame that is flooded with a colour neither scene has, blown out, or emptied of the scenes' elements. Library transitions that work by covering the frame (most of 04-cover, dips, flashes) are only usable if the cover itself is made of the scenes' elements; otherwise choose another or make a new one.

The transitions come from the owner's library, remotion-transitions ($MFX_TRANSITIONS): 50 transitions in nine families, each a drop-in <TransitionSeries> presentation with a catalog entry and a preview.

B=.claude/skills/transition-board/board.mjs
node $B list [--function section-break] [--family 04-cover]   # choose
node $B use liquid-fill flash ...                             # copy them (and their core) into video/src/transitions/
node $B posters                                               # the library's preview stills, for the board
node $B check                                                 # the rules: must pass
node $B panels                                                # one review image per cut

1. Learn the library

Read $MFX_TRANSITIONS/TAXONOMY.md (the nine families, how each works, timing and craft) and skim the catalog with node $B list. Each entry says what it's for (function: continuity, energy, section-break, reveal, progression, contrast, brand…), how it's built (structure, origin, edge), its length range in frames, and its parameters. Most take color: the incoming scene's background colour, so the change arrives through a shape in the new scene's own colour.

2. Find each cut's carrier

Go through the approved script and style frames in order. For every change of scene, before choosing anything, write:

• The carrier: the object or element in the frames that makes the change happen. Look at both frames: what in

the outgoing frame can lead into the incoming one (the $ in the price, the terminal window, the stage track's next node, the mark, a line of text, the light)? A good carrier is already on screen.

• Why: what the cut means in the story, in one sentence: continuity (the same idea, carried on), a turn (the

story changes direction), a section break, a reveal, a rise in energy, a breath.

• Where it lands: the word or beat in the narration the cut lands on.

3. Choose the transition

Pick from the library by what the cut means and what carries it, not for variety's sake:

• Continuity inside a section: quiet families (blend, a carry, a match cut, a short motion move).
• Section breaks and turns: the bigger moves (carries, portals, a 3D object through the frame, motion with

weight), reserved so they mean something.

• A vocabulary: two to four families across the whole video, used consistently (the same kind of cut means the

same kind of change). The check warns when one family dominates or when there are too many.

• Length: inside the transition's range, and long enough to read under the narration; snap cuts on beats,

slower ones in breaths.

3D carriers. A real 3D object can carry a cut: a wobbling sphere that flies at the camera and fills the lens as it passes, revealing the next scene behind it; a ribbon or a swarm that sweeps across. Render it in the studio's Blender (blender-3d skill) as a transparent image sequence (-F PNG, RGBA, film transparent) and use it as the transition's layer, with the outgoing scene before it passes and the incoming scene after. The object is the carrier, never a flat cover: the scenes stay visible around and through it.

If nothing in the library fits, design a new one, inspired by the library entries closest to it: write it in the library's format (transition.json + index.tsx, built on video/src/transitions/core) in video/src/transitions/<new-id>/, and mark it on the board as {"new": "<new-id>", "inspired_by": ["<id>", …]}. Never edit the library itself (it's the owner's repository; a new transition worth sharing can be proposed there through its CONTRIBUTING protocol later, by the owner).

Write transitions/board.json:

{ "cuts": [
  { "from": "SF01 · The hook", "to": "SF02 · The turn",
    "a": "out/frames/sf01.png", "b": "out/frames/sf02.png",
    "carrier": "the gradient inside the $5,400",
    "why": "The price's colour floods the frame and drains away into the promise: the cost dissolves.",
    "transition": "liquid-fill", "params": { "color": "#0B0913" }, "frames": 96,
    "lands_on": "\"Now\", the first word of beat 2",
    "mids": ["out/board/cut-01-35.png", "out/board/cut-01-65.png"],
    "strip": ["out/board/cut-01/10.png", "…", "out/board/cut-01/90.png"] }
] }

Cuts run through the scenes in order (each starts where the last ended). Run node $B check until it passes.

4. Copy the transitions into the video

node $B use <id> … copies the library's core/ and each chosen transition into video/src/transitions/ with their imports fixed. Use them exactly as the library says:

import { TransitionSeries, linearTiming } from '@remotion/transitions';
import { toPresentation } from './transitions/core';
import liquidFill from './transitions/liquid-fill';
<TransitionSeries.Transition presentation={toPresentation(liquidFill, { color: '#0B0913' })}
  timing={linearTiming({ durationInFrames: 96 })} />

Always linearTiming (each transition does its own easing). Transitions whose catalog entry requires webgl2 render with --gl=angle (or --gl=swangle with no GPU). Keep every cut in one place in the video's code (one list of cuts), so a changed board changes the video in one edit.

5. Render the in-betweens

For each cut, a board composition puts the two style frames in a <TransitionSeries> with the chosen transition and renders real stills from the transition itself, at about 35% and 65% of its length, so the owner sees exactly how one frame becomes the next:

const HOLD = 30;   // frames of the outgoing still before the transition starts
<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={HOLD + cut.frames}><Still src={cut.a} /></TransitionSeries.Sequence>
  <TransitionSeries.Transition presentation={...} timing={linearTiming({ durationInFrames: cut.frames })} />
  <TransitionSeries.Sequence durationInFrames={HOLD + cut.frames}><Still src={cut.b} /></TransitionSeries.Sequence>
</TransitionSeries>
// stills at frame HOLD + round(cut.frames * 0.35) and HOLD + round(cut.frames * 0.65)

Also render the strip: a still every 10% of the transition (10% to 90%), listed as "strip" in the cut's entry: the check reads every one of them for blank frames. Render through mfx render (npx remotion still … --frame=N, with --gl=angle where needed). Look at every in-between: if the carrier doesn't read in it, the cut isn't working yet. Fix the choice, not the frame.

6. Submit the board

node $B posters, then node $B panels: one image per cut, reading left to right: the outgoing frame, the real in-betweens, the incoming frame, and the library's preview still of that transition, dimmed, for reference.

Submit every panel as an image item, labelled Cut 03 · SF03 → SF04 · Liquid Fill (cover) · carried by the terminal window, and transitions/BOARD.md as a text item: for each cut, the carrier, the why, the transition and its family, its length, and the word it lands on. The note: the video's transition vocabulary in two or three lines.

The approved board is the animatic's cut list: the animatic uses these transitions at these lengths, landing on these words.