A personal studio for Claude Code
Motion graphics, made in code, directed by you.
Claude works as creative director, motion designer, animator and engineer. You steer it stage by stage, every frame is rendered from code, and quality is judged on the rendered frames, never on the code.
The 15 s library showcase (1920 by 1080, 30 fps), built entirely from the components in studio/src/lib.
What it is
A repo you open Claude Code in, and make videos.
A Remotion project
React components that draw every frame: titles, kinetic type, captions, charts, transitions, backgrounds, sound cues. Same input, same video, every time.
Skills that act as a crew
A director that plans, a builder that renders, a strict reviewer that only trusts rendered frames, and a scout that finds inspiration with credit.
A prompt library and a guide
Ordered prompts for each stage, a 7-day learning plan and an illustrated handbook, so you never start from a blank page.
You do not ask for a whole video in one shot. You decide the direction, approve a storyboard, see one scene, and only then let the rest follow. That order is what keeps the results good.
How it works
Five stages, one decision at a time.
Each stage ends with something you can look at before the next one starts. A sixth, optional step feeds the lessons back into the skills.
Direction
Three genuinely different looks. You pick one.
prompts/10Storyboard
A timed scene table: text, motion, easing, sound.
prompts/11One scene
Build only the first scene, render frames, look, fix.
prompts/12Review
A fresh strict reviewer scores it and lists the worst defects.
prompts/13The rest
Remaining scenes, then sound, formats and the final render.
prompts/14, 50 to 53
Deterministic, frame-based animation only. One focal point per scene. Real numbers only. Sound at -14 LUFS and -1 dBTP. And never say a video was checked visually unless the frames were actually looked at.
What is inside
Everything has its own page.
Tour
Start here. Install, make a first video, learn the vocabulary, follow a 7-day plan.
Guide
The illustrated handbook: workflow, tools, prompting, motion vocabulary, design system.
Skills
The Claude Code skills that direct, build, review and search for inspiration.
Prompts
Every prompt in order, with a copy button. Pick the stage, paste, go.
Studio
The Remotion project: components, design tokens and the videos made with it.
Techniques
Lessons learned from finished videos: what worked, what to avoid.
Shot library
Curated motion shots to pick from while storyboarding, with build notes.
Research findings
What the research found and which findings landed in the studio.
Gallery
Videos made with Claude from around the web, each with how it was made.
By the numbers
Counted from the repository when this site was built.
Quick start
From clone to first frames in minutes.
You need Node 20.19 or newer, ffmpeg on your PATH and Claude Code. The tour walks through every step and what to do if one fails.
1. Set up
git clone https://github.com/AnnasMustafaDev/video-studio.git
cd video-studio
node tools/install-skills.mjs # copies skills/ into ~/.claude/skills
cd studio
npm install
npx remotion skills add # official Remotion agent skills
npm run stills -- LibraryShowcase 50,130,245,350,4492. Ask for a first video
In a second terminal at the repo root, run claude and send a brief like this one.
New video: 15 s Instagram reel (9:16, 30 fps) about <topic>.
Goal: <what it should achieve>. Mood: <calm / bold / ...>.
Look: <background>, <type colour>, one <accent> accent.
Exact text: "<line 1>" then "<line 2>".
Start with 3 creative directions. No code yet.Remotion is free for individuals and small companies, vendored third-party skills keep their own licences, and prompts found on the web stay with their authors. The details, including the music credit you owe if you use it, are on the credits page.