remotion-video-editor-automation-generator

A programmatic video generation system built with Remotion (React-based video rendering) and directed with Claude Code. It turns a text quote and a category label into a branded, vertical (1080×1920) Instagram Reel — rendered as an MP4, not edited by hand frame by frame.

This repo documents the actual system: the brand configuration, the two React components that make up the video, the automation script for batch rendering, and the constraints file that keeps Claude's output on-brand every time.

---

What this is

Most "faceless content" video tools are either fully manual (cut in CapCut/Premiere one at a time) or a black-box SaaS template. This project sits in between: a small, code-defined video component, driven by data, that renders consistent branded output on demand — with an AI coding agent doing the implementation work under a fixed set of design rules.

• Input: a category label + a quote (or one row from a CSV of many)
• Output: a branded vertical MP4, ready to post
• Control layer: CLAUDE.md — a constraints file that stops the AI agent from drifting off-brand (wrong fonts, too many colors, generic copy, wrong logo casing)

---

Repository structure

remotion-video-editor-automation-generator/
├── .github/
│   └── workflows/render.yml     # CI check on push (build validation)
├── src/
│   ├── config/
│   │   └── branding.ts          # Color palette + typography tokens
│   ├── components/
│   │   ├── Wordmark.tsx         # Logo component (locked casing/color rules)
│   │   └── QuoteComposition.tsx # The actual video template
│   ├── Root.tsx                 # Registers the composition with Remotion
│   └── index.ts                 # Entry point
├── data/
│   └── quotes-sample.csv        # Example dataset for batch rendering
├── scripts/
│   └── render-batch.ts          # Automation script: CSV row → MP4
├── package.json
├── CLAUDE.md                    # Brand + voice constraints for the AI agent
├── sample-input.md              # One example input, annotated
├── sample-output.md             # What the rendered output looks like
└── README.md

---

Version 1: No-code walkthrough

For anyone who wants to see it run without touching code.

Prerequisites

1. Install Node.js (LTS version).
2. Install Visual Studio Code (or any editor) to view the files.

Steps

1. Open a terminal (PowerShell on Windows, Terminal on Mac) and move into the project folder:

   cd remotion-video-editor-automation-generator
   npm install

2. Start the Remotion Studio preview:

   npm run dev

   This opens a live preview at http://localhost:3000, where you can see the video composition update in real time.
3. To direct changes through Claude Code instead of editing manually, run in a second terminal:

   npx claude

   Then give it a plain-English instruction, e.g.:

   "Change the quote to 'Strategy before tactics.' and confirm it still respects the one-accent-color rule."

4. Export the finished video as an MP4:

   npx remotion render QuoteReel out/my-reel.mp4

   The file lands in the out/ folder.

---

Version 2: Developer / automation path

Install

git clone https://github.com/zSofisticated/remotion-video-editor-automation-generator
cd remotion-video-editor-automation-generator
npm install

Local preview across your network (useful for checking on mobile)

npm run dev -- --host

Batch-rendering from a dataset

scripts/render-batch.ts reads data/quotes-sample.csv and renders one MP4 per row — this is the automation layer that replaces manually opening a template per post:

npx tsx scripts/render-batch.ts

Single render with custom props via CLI

npx remotion render QuoteReel out/production-reel.mp4 --props='{"category":"INSIGHT","quote":"Data before opinion."}'

---

Why this exists

I use this as the rendering layer behind a faceless, systemized content pipeline. The point isn't the video effect — it's that a locked set of brand rules (CLAUDE.md + branding.ts) means every output is on-brand by construction, whether I generate one video or a hundred, and whether I typed the props myself or an AI agent did.

Stack

Remotion · React · TypeScript · Claude Code · Node.js