More screenshots
Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+22 moreClaude CodeCursorCodex CLIMuseDots
OpenClaw
Manus
Grok
Grok Bot+18 agentsMotion Studio: Motion Graphics Videos Written in Code
Your agent writes the code that draws every frame, then renders MP4s in 9:16, 1:1 and 16:9 with music, sound effects and your real brand.
$19
Motion Studio: Motion Graphics Videos Written in Code
Example session with this skill installed
make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a résumé. go all out.
- Read your context and instructions
- Compiled the motion studio
Summary
Built a 15 s showreel about the studio itself ("seek(t)"): 5 sections on a 120 BPM grid, house music in A minor composed in code, 18 sound effects locked to the picture, rendered from one timeline into 9:16, 1:1 and 16:9. Before rendering, the agent reviewed a contact sheet (one frame per beat) and an SFX sheet.
Shot list (9:16)
| Time | Section | On screen | Sound |
|---|---|---|---|
| 0.0–2.5 s | Hook | "SEEK" assembles letter by letter, then "(t)" pops in orange | tick ×4 on the 16ths, pop at 1.0 s, whoosh at 2.2 s |
| 2.5–5.0 s | Build | Grid of frame cards; a ball travels across them and the current frame is highlighted. "CADA FOTOGRAMA · seek(t) → el fotograma exacto" | — |
| 5.0–7.5 s | Drop | Dot grows into a button → "Renderizando…" → cursor click → "Listo ✓" | tap 5.0, swipe 6.0, click 6.5, whoosh 7.05 |
| 7.5–10 s | Drop | Light background, kinetic type: ESCALA, GIRA, REBOTA (each word does what it says) | pop 7.5, swipe 8.0 and 8.5, tick 8.8, tap 9.28 |
| 10–12.5 s | Break | Counter 0 → 60 fps "sin After Effects", line chart drawing itself | impact 10.0 |
| 12.5–15 s | Outro | Logo mark spins in → "motion studio · Hecho en código con Claude Code" | impact + riser 12.5 |
Deliverables
| File | Resolution | Size | Frames |
|---|---|---|---|
out/demo/9x16.mp4 | 1080×1920 | 6.9 MB | 450 |
out/demo/1x1.mp4 | 1080×1080 | 4.3 MB | 450 |
out/demo/16x9.mp4 | 1920×1080 | 6.7 MB | 450 |
All three files are 15.0 s at 30 fps: H.264, yuv420p, bt709, AAC audio. The renderer checked every file with ffprobe.
Studio commands for this video
npm run new -- demo --dur 15 # from the showreel template
npm run check -- demo # rules + determinism
npm run sheet -- demo # one frame per beat → reviewed
npm run sheet -- demo --sfx # each sound vs. its frame → reviewed
npm run render -- demo --format all # 9:16, 1:1, 16:9
Connects securely to your tools. The creator never sees your data.
About this skill
Motion graphics without After Effects
Motion Studio turns your coding agent into a motion designer. The agent doesn't generate a video with a diffusion model: it writes the program that draws it. Every video is an HTML page with window.seek(t) that paints the exact frame for second t. Headless Chromium photographs each frame, ffmpeg joins them into an MP4, and the agent looks at its own frames on contact sheets and fixes them before the final render.
The result looks designed, not AI-generated. You get crisp type, real UI, and motion that lands on the beat.
What you can make
- Product launch / promo video from a URL: the agent captures your real screenshots, logo, colors and fonts, then builds a hook → product → 3 features with a real cursor and clicks → metric → logo + CTA.
- Reels, TikTok and Shorts (9:16), plus 1:1 and 16:9 from the same timeline, with safe zones respected.
- Kinetic typography and showreels.
- Copying a reference video's grammar (cuts, pacing, type), never its content.
- Self-critique of any existing video, frame by frame.
What's inside
- A deterministic render engine: no timers, no real clock, seeded randomness, network blocked while rendering. npm run check proves the same frame comes out every time.
- Music composed in code (minimal, house, lofi or cinematic). You can also bring your own track and use its real beats. Sound effects (click, whoosh, impact, riser…) are registered on the same clock as the picture, so audio sync comes from the code itself, not manual alignment.
- Brand capture: npm run capture -- <url> <brand> saves screenshots, logo, palette and fonts locally.
- Contact sheets: one frame per beat, a 360 px mobile-readability sheet, and an SFX sheet showing what's on screen at each
- A built-in critique rubric: hook (0–2 s), mobile readability, motion, variety, brand, audio. The agent iterates (up to 5 rounds) until everything scores 8/10 or higher.
- Partial re-renders (--from 4 --to 7 only redoes those seconds), a live preview with scrubber, and npm run doctor for setup problems.
- Output: H.264, yuv420p, bt709, AAC, verified with ffprobe.
How it works
- Install the skill and ask your agent: "set up the motion studio in ./motion-studio". It copies the studio, installs Playwright + Chromium and Python for audio, then makes a 2-second test render.
- Ask for a video: "Make a 20-second launch video for [product] ([url]) with real screenshots, logo and music."
- The agent captures the brand, writes the composition, reviews its contact sheets, fixes the 3 worst problems, and only then renders all three formats.
Who it's for
Founders, indie hackers, marketers and content creators who need launch videos and social clips every week and don't want to learn After Effects or pay an editor.
Good to know
- Renders locally and offline. No API keys, no per-video cost beyond your agent plan.
- Requires Node 22+ and ffmpeg. Python 3 is optional (for music and SFX).
- The studio's internal rules, docs and prompts are written in Spanish (it comes from the "Guía MOTION" by @saulautomatiza). Your agent reads them fine and answers in your language; the README is in English.
- Works best with agents that can view images (Claude Code), because the self-review loop depends on looking at frames.
How to use
Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
Money-back guarantee
Doesn't do what its page promises? You get your money back.
Trust & safety
Security scanned
Verified clean 11 days ago
- Passed all security checks, Safe to install
Requires
Node.js