Video Studio
A personal studio for making motion graphics and animated videos with Claude Code: a Remotion project, a prompt library, Claude Code skills, a shot library, research and an illustrated guide, all in one repo.
Website: https://annasmustafadev.github.io/video-studio/ (tour, guide, skills, prompts, studio components, techniques, shot library, research and a gallery of 73 Claude-made motion videos).
The idea: Claude works as creative director, motion designer, animator and engineer, and you direct it stage by stage. You don't ask for a whole video in one shot. Every frame is rendered from code, and quality is judged on rendered frames, never on the code.
The library showcase (15 s, 1920x1080, 30 fps), built from the components in studio/src/lib. Full quality with sound: showcase.mp4.
Demo
The guide
guide/index.html is a single offline page with every prompt behind a copy button, a section filter and light and dark themes.
Examples
What to type in Claude Code, and which part of the studio picks it up.
| You ask | What happens | Uses |
|---|
| "I want a 20 s launch teaser for my side project. Give me three creative directions, no code yet." | Three genuinely different directions (look, type, pacing, transitions, sound), one recommended with reasons | motion-director, prompts/10 |
| "Direction B. Storyboard it." | A timed scene table: first and last frame, focal point, exact text, motion, easing, transition, sound cue per scene, plus a hits table | motion-director, prompts/11 |
| "Build scene 1 only and show me the stills." | One scene in studio/src/videos/<slug>/, rendered stills and a contact sheet that Claude actually looks at and fixes | remotion-studio, prompts/12 |
| "Strict review." | A fresh reviewer scores nine dimensions from the rendered frames and lists the five worst defects with fixes | motion-review, prompts/13 |
| "Find me product UI animations on prompt-motion that use a phone." | Three to five matches with the original prompt, author credit and a link to watch, then a proper brief from the one you pick | prompt-motion-search, prompts/21 |
| "Analyse this reel and make something with the same feel for my app." | A breakdown of composition, type, motion, timing and sound, separating what is observed from what is guessed, then a plan that keeps the principles but not the branding | motion-director, prompts/20 |
| "Make the 9:16 and 1:1 versions." | Each format recomposed for its own frame and safe margins | remotion-studio, prompts/52 |
| "/brag" (inside a project you just built) | A 15 to 25 s launch video of that project in one command | brag |
More recipes (launch teaser, YouTube explainer, Instagram reel, data story, UI demo) are in prompts/INDEX.md.
What's inside
| Path | What it is |
|---|
studio/ | Remotion 4 project (React, frame-based). Component library in src/lib/ (titles, kinetic type, captions, lower thirds, counters, charts, transitions, backgrounds, sound cues), design tokens, DESIGN_SYSTEM.md, a lock file for the official Remotion agent skills (npx remotion skills add), and a _template for new videos |
prompts/ | Prompt library. prompts/INDEX.md says which prompt to use for which purpose, and in what order |
skills/ | Claude Code skills (see below). Installed into ~/.claude/skills with node tools/install-skills.mjs |
third_party/ | Vendored third-party material (brag, video-shotcraft), pinned to an upstream commit and never edited here (each has an UPSTREAM.md with source, licence and how to update). The same install script installs them |
docs/ | The source of the website: a generator (docs/_build/) that builds every page from this repo. Rebuild with node docs/_build/build.mjs |
shot-library/ | 51 curated motion shots with build notes for Remotion and the HTML engine and a taste verdict for each, adapted from video-shotcraft (Apache-2.0). Open shot-library/index.html |
|
This is the beginning of the README. Read the rest at the original. Read the full README ↗
