Remotion workflow: setup, rendering en motion graphics

Definitie

Remotion is een React-gebaseerd framework voor het programmatisch genereren van video. Composities worden geschreven in TypeScript/TSX en gerenderd via FFmpeg naar videobestanden. Geschikt voor motion graphics, infographics en animaties die als overlay in Premiere Pro worden gebruikt.

Context

Gebruikt in twee journalistieke projecten: een animatie van een hackerspaces-kaart van Nederland (remotion-hackerspaces) en een explainer-video met een Arnhem-wijkenkaart voor Comzorg. Beide projecten vereisten transparante alpha-output voor gebruik als overlay in Adobe Premiere Pro. De setup is volledig op maat: geen create-video CLI-template, maar een handmatig opgezet project.

Kernpunten

Packages

De kern van een Remotion-project bestaat uit deze packages (versie 4.0.442+):

@remotion/core       – React-componenten en hooks (useCurrentFrame, interpolate, etc.)
@remotion/cli        – npx remotion studio / render commando's
@remotion/renderer   – programmatische rendering buiten CLI
@remotion/media-utils – audio/video hulpfuncties (getAudioDurationInSeconds, etc.)
@remotion/player     – embedding in webapps (niet voor rendering)

Aanvullende packages voor motion graphics:

@remotion/bundler, @remotion/motion-blur, @remotion/paths,
@remotion/noise, @remotion/shapes, @remotion/transitions,
@remotion/animation-utils

Alle packages moeten exact dezelfde versie hebben. Mismatch door installatie buiten de projectmap veroorzaakt fouten. Controleer met npm ls | grep remotion.

Project handmatig opzetten (zonder create-video CLI)

create-video draait een interactieve prompt die niet werkt in niet-interactieve shells. Handmatige structuur:

package.json (minimaal):

{
  "name": "mijn-project",
  "scripts": {
    "start": "remotion studio",
    "render": "remotion render"
  },
  "dependencies": {
    "@remotion/cli": "4.0.445",
    "@remotion/core": "4.0.445",
    "react": "18.x",
    "react-dom": "18.x"
  },
  "devDependencies": {
    "typescript": "^5.x",
    "@types/react": "^18.x"
  },
  "remotion": {
    "entryPoint": "./src/index.ts"
  }
}

tsconfig.json: standaard React/TSX config met "jsx": "react-jsx".

remotion.config.ts: zie sectie ProRes hieronder.

src/index.ts: registreert composities via registerRoot(Root).

src/Root.tsx: definieert composities met <Composition>.

Studio draaien: npx remotion studio → standaard http://localhost:3000 (of 3001 als bezet).

ProRes 4444 alpha-rendering voor Premiere Pro

Om Remotion-output als transparante overlay in Premiere Pro te gebruiken:

remotion.config.ts:

import { Config } from "@remotion/cli/config";
 
Config.setVideoImageFormat("png");
Config.setCodec("prores");
Config.setProResProfile("4444");
Config.setPixelFormat("yuva444p10le");

Waarom yuva444p10le: zonder dit wordt ProRes 4444 gerenderd zonder daadwerkelijk alpha-kanaal. yuva444p10le = YUV + alpha, 10-bit, 4:4:4 chroma. Premiere Pro herkent dit als transparantie.

CLI-equivalent:

npx remotion render src/index.ts MyComp out.mov \
  --codec=prores \
  --prores-profile=4444 \
  --pixel-format=yuva444p10le

staticFile() als achtergrondlaag met SVG-overlay

Referentieafbeeldingen (foto’s, kaarten) worden via staticFile() geladen vanuit de public/-map:

import { staticFile, Img, useCurrentFrame, interpolate } from "@remotion/core";
 
export const ArnhemMap = () => {
  const frame = useCurrentFrame();
 
  return (
    <div style={{ position: "relative", width: 1920, height: 1080 }}>
      {/* achtergrond: referentiekaart */}
      <Img src={staticFile("arnhem-kaart.png")} style={{ width: "100%", height: "100%" }} />
 
      {/* SVG-overlay: animeerbare wijkvlakken */}
      <svg
        viewBox="0 0 3508 2362"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}
      >
        <path
          d="M..."
          fill={`rgba(255, 0, 0, ${interpolate(frame, [0, 30], [0, 0.4])})`}
        />
      </svg>
    </div>
  );
};

ViewBox uitlijning: stel de viewBox in op de pixelafmetingen van de referentieafbeelding (bijv. 3508x2362 voor A3 aan 300dpi). SVG-paden die in dezelfde coördinatenruimte zijn getraceerd, vallen dan automatisch over de achtergrond.

GADM GeoJSON naar SVG wijkenkaart

Patroon voor kaarten op basis van GADM-geodata (gadm.org):

1. Download GeoJSON voor het gewenste niveau (Nederland: level 0 = landsgrens, level 2 = gemeenten, level 3 = wijken waar beschikbaar)
2. Converteer GeoJSON naar SVG-paden met een projectie. Voorbeeld met d3-geo:

   import * as d3 from "d3";
   const projection = d3.geoMercator().fitSize([breedte, hoogte], geojson);
   const pathGenerator = d3.geoPath().projection(projection);
   const svgPath = pathGenerator(feature);

3. Mercator-correctie is nodig voor juiste verhoudingen (standaard Mercator rekt hoge breedtegraden uit)
4. Voor Nederland: vasteland als één polygoon, Zeeland en Waddeneilanden als aparte features
5. Paden hardcoden in een TSX-component of dynamisch inladen als JSON

Arnhem-wijken: GADM heeft geen CBS-wijkindeling op straatniveau. Alternatief: CBS WFS/GeoJSON (pdok.nl) of handmatig tracen over referentiekaart. Bij handmatig tracen: viewBox gelijkstellen aan beeldpixels van de referentie.

Bekende problemen

• Versie-mismatch: Remotion packages buiten projectmap installeren veroorzaakt conflicten. Altijd in de projectmap installeren, ~/node_modules/ verwijderen als die bestaat.
• Alpha-kanaal ontbreekt: ProRes 4444 zonder yuva444p10le geeft geen transparantie in Premiere. Altijd pixelformaat expliciet zetten.
• Kaartuitlijning: SVG-paden getraceerd op verkeerde schaal of viewBox sluiten niet aan op achtergrond. Referentieafbeelding en viewBox moeten dezelfde pixelverhouding hebben.
• create-video werkt niet in CC: gebruik handmatige projectstructuur (zie boven).

Verbanden

• Zie ook: wiki-premiere-pro-workflow (als die bestaat)
• Zie ook: wiki-gadm-geojson (als die bestaat)
• Gerelateerd project: remotion-hackerspaces, Remotion projects/Comzorg

Sessie-herkomst

• raw-cc-2026-03-31-remotion-dependencies-setup
• raw-cc-2026-04-06-comzorg-remotion-arnhem-kaart