gtkottman/mortiflix-oss/remotion-motion

Remotion

The video is a React project in video/. Frames are a pure function of the frame number: no timers, no randomness without a seed (random('seed') from remotion), no network at render time.

Set up (first time)

node .claude/skills/remotion-motion/setup.mjs        # video/ from the template, linked to the studio's shared install

The studio installs Remotion (and its Chrome, ~750 MB) once and every project links to it: seconds, not a fresh install. Don't npm install inside video/ while it's linked (that would change the shared copy for every project). Need another package? rm video/node_modules, then npm install and npm install <pkg> in video/: this project gets its own copy.

Set src/video.ts from the brief: size (16:9 → 1920×1080, 9:16 → 1080×1920, 1:1 → 1080×1080), 30 fps, length. Put the look from design/LOOK.md in look. Fonts: @remotion/google-fonts/<Family> (loadFont() at the top of a file) or local files in video/public/ with staticFile(); never a font you can't license.

Build scenes

• One component per beat in src/scenes/, placed in Main.tsx with <Sequence from={...} durationInFrames={...}>.
• Timing in frames comes from the narration's word timings (voice/timing.json) or the music's beat grid: put the

numbers in src/timing.ts, never scattered magic numbers.

• Motion: spring() and interpolate(..., { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }). Easing per the

motion-design skill.

• Audio: <Audio src={staticFile('voice.wav')} /> (files in video/public/).
• Images and video from the brief: copy them into video/public/, <Img> / <OffthreadVideo>.

Render: always through the queue

Everything that starts Remotion's browser goes through mfx render (one heavy job at a time, studio-wide):

# a style frame (a still at a chosen frame)
mfx render --label "SF01" -- npx remotion still src/index.ts Main ../out/frames/sf01.png --frame=45
# the animatic (720p is enough for timing)
mfx render --label "animatic" -- npx remotion render src/index.ts Main ../out/animatic.mp4 --scale=0.6667
# the final
mfx render --label "final" -- npx remotion render src/index.ts Main ../out/final.mp4 --codec=h264 --crf=18
mfx render-wait <id>     # repeat until state is done or failed

Run mfx render from inside video/ (the render runs in the folder you call it from).

• Stills for style frames: render, then view each one before submitting.
• After every video render: node .claude/skills/final-pass/qc.mjs out/<file>.mp4 ... and look at the sheet.
• A failed render: read output_tail, fix, re-queue. GPU flags (--gl=angle) can speed renders up on machines that

support them; use one --gl mode for every render of a video so cuts never shimmer.

Faster iteration

npx remotion still at a few key frames is far cheaper than a full render. Check a beat with three stills (start, middle, settled) before rendering motion.