haidrrrry/claude-remotion-skill

Open-source Claude agent skill that teaches Claude Code, Claude Desktop & Claude AI to create and edit professional motion graphics videos with Remotion. AI video editing, B-roll, captions, sound design — from one prompt.

Claude Remotion Skill – Quick Overview

What it is – An open‑source agent skill for Anthropic’s Claude (Claude Code, Claude Desktop, etc.). When the skill is installed, you can ask Claude in plain English to create or edit a video. Claude then writes a Remotion project (React + TypeScript code for video), renders it, extracts frames with ffmpeg, checks the frames, fixes any issues, and finally returns a polished motion‑graphics clip.

Why it matters – It moves AI‑driven video creation from “flat fades” generated by text‑to‑video models to deterministic, code‑based motion graphics that follow professional design rules (springs, staggered entrances, color grading, grain, Ken Burns, etc.). The output is fully re‑renderable and editable like any other code project.

Key components

  • remotion-motion-graphics/ – the skill folder that Claude reads.
  • SKILL.md – the workflow description and ten non‑negotiable motion rules.
  • references/ – ready‑made motion‑pattern snippets and design guidelines.
  • assets/theme.ts – a single theme file defining colors, easings, and spring presets.
  • Example Remotion projects in examples/ showing ready‑to‑run compositions.

How to get started

  1. Clone the repo.
  2. Copy the remotion‑motion‑graphics folder into ~/.claude/skills (per‑user) or .claude/skills in a project (per‑project).
  3. In Claude Desktop upload the generated .skill file, or just use Claude Code which picks up the folder automatically.
  4. Prompt Claude, e.g. “make a 3‑second logo sting” – Claude reads the skill, writes Remotion code, runs npm run render, extracts frames, inspects them, and returns the final MP4.

What you can ask Claude to do

  • Build logo intros, vertical TikTok/Reel intros, kinetic‑type captions, lower‑thirds, product explainers, etc.
  • Add or fix motion‑design details (staggering, easing, grain, Ken Burns).
  • Sync captions to spoken words or sync animation to a beat.

Design philosophy (the “10 rules”) – No linear interpolation, always use springs/beziers; animate 2‑3 properties together; stagger every element; provide fast exits; layer background‑mesh → assets → graphics → grade → grain/vignette; apply Ken Burns to stills; add subtle breathing motion; base timing on FPS; keep all styling in a single theme.ts; always render → inspect → fix → re‑render.

Demo & examples – A GIF/MP4 demo in the README shows a short motion‑graphics clip. The examples/ folder contains four full compositions (profile promo, Focus Cat app promo, a self‑fixing demo, and a beat‑synced code edit) that can be rendered locally with npm install and the provided scripts.

License & community – MIT‑licensed, free to use and fork. Contributions are welcomed via pull requests (new motion patterns, palettes, bug fixes). Stars help the project get discovered.

TL;DR for non‑experts

Install the skill, talk to Claude, and Claude will write and render a professional‑looking animated video for you—no After Effects needed, just code that you can keep and tweak forever.

Related

  • Project
    db-lyon/ue-mcp

    UE‑MCP is a Node‑based server plus a C++ bridge plug‑in that gives AI assistants read/write access to the Unreal Editor. It exposes ~2 000 actions across virtually every UE subsystem, supports YAML‑defined multi‑step flows, and includes safety guards and an npm plug‑in system for extensibility.

  • Project
    WeChatCV/Wan-Alpha

    A video generation framework that enables the creation of high-quality videos with stable transparency (alpha channels) using a Shiftable RGB-A Distribution Learner.

  • Project
    microsoft/World-R1

    World-R1 is a reinforcement learning framework that improves 3D geometric consistency in text-to-video generation by aligning generated videos with 3D constraints without changing the base model architecture.

  • Project
    nestrilabs/virtio-nvgpu

    A virtio device that lets multiple Linux VMs share one NVIDIA GPU at near‑bare‑metal speed, avoiding vGPU licenses and PCI passthrough, with ~2 % performance loss and support for CUDA, Vulkan, and NVENC.