remotion-motion-graphics: Turn Logos and Copy into Exportable MP4 Motion Graphics with Remotion

Who It's For

This Skill is for people who want to maintain motion graphics as code: brand operators, short-video creators, or frontend developers who want to take a reference video plus a Logo and produce kinetic typography, Logo animations, or brand promo clips, exported directly as MP4. The official documentation states it supports outputting both 9:16 and 16:9 aspect ratios from the same codebase.

It is not suitable in the following situations: environments without Node.js 18+ (required by Remotion 4) or without ffmpeg / ffprobe on the PATH — the analysis and inspection scripts cannot run; on first render, Remotion automatically downloads Chrome, which may stall in network-restricted environments. The official evidence does not state whether other runtimes or platforms are supported, nor which language interfaces of agents are supported; these are unknowns.

First Attempt in 3 Minutes

The recommended main path is local installation in Claude Code:

1. Prerequisites: Node.js 18+, with ffmpeg / ffprobe on the PATH.
2. Run the official install command in a terminal to copy the Skill into ~/.claude/skills/:

git clone https://github.com/Boriwatopal/agent-skill-remotion-motion-graphics.git /tmp/rmg && \
cp -R /tmp/rmg/skills/remotion-motion-graphics ~/.claude/skills/ && rm -rf /tmp/rmg

1. Trigger a low-risk task in Claude Code: provide a reference clip and a Logo (SVG or website), and ask for analysis only first — have the agent generate a beat map from the reference clip's contact sheets, extract colors, fonts, and copy from the brand assets, and map the Logo paths so text and graphics can be animated separately. Do not request a rendered video during the analysis phase.

Success signal: the agent reads the assets and produces a beat map plus extracted brand elements, which means the Skill's workflow is active. Note that the render phase executes commands, writes files, and downloads Chrome; the evidence does not state whether the render process requires additional confirmation, so agree on output paths with the agent before it acts. claude.ai / Cowork users do not have this path; the official alternative is downloading dist/remotion-motion-graphics.skill and uploading it under Settings → Capabilities → Skills — a secondary method for a different platform.

Use Cases

Case 1: Extracting rhythm from a reference clip. Send a competitor's short video and your Logo to the agent, ask it to generate a beat map and extract colors and fonts, then follow the Skill's workflow to produce code-based motion graphics and export a 9:16 MP4. The confirmable steps are asset reading and the beat map; rendering and final video quality depend on the agent's actual execution.

Case 2: Logo entrance animation. Provide the Logo as an SVG and ask for text and graphics to be animated separately, producing a brand promo clip. The Skill maps Logo paths so elements animate independently; before exporting, follow the official verification workflow: tsc passes, a 0.3-scale test render, frame-by-frame review of the contact sheets, still-frame renders of suspicious frames with fixes, then a final render with frames extracted from the finished video as proof. The confirmable end signals are receiving the MP4 and the frame-extraction proof.

Limits and Boundaries

Rendering executes tsc and Remotion render commands, writes project files, and downloads Chrome on first run — these behaviors are explicitly described in the official documentation. The Skill's analysis and inspection scripts depend on ffmpeg / ffprobe. The official evidence does not state: whether rendering requires user confirmation, which specific paths it writes to, whether it can run offline, or the range of supported languages (do not infer English-only assets just because the README is in English). The Skill produces rendered MP4s and code; the evidence does not state that it directly modifies the user's existing files — rely on the agent's actual behavior for the scope of its filesystem impact. The two platforms have different installation methods: Claude Code uses git clone plus copying a directory, while claude.ai / Cowork uses uploading a .skill file; they are not interchangeable.