motion-video: start here for video
What it does
Section titled “What it does”This is the entry point for motion video. Start here and let it pick.
There are two stacks for building video out of code rather than AI footage, and choosing between them is genuinely non-obvious. This skill reads your brief, picks one, and hands over:
- hyperframes (HTML, CSS and GSAP): lower setup friction, and the default for most motion-graphic ads.
- remotion (React and JSX, driven by frame number): for the things HTML cannot do.
It authors nothing itself. It is a router, deliberately. That keeps the decision in one place instead of making you learn both stacks to find out which one you needed.
Text in both stacks renders character-perfect, because it is real text rather than an image model’s attempt at text. No regeneration lottery on a headline.
When to reach for it
Section titled “When to reach for it”- Any video ad that is not realistic footage: classified-style typewriter ads, stat reveals, captioned reels, chart races, testimonial card sequences, before-and-after animations.
- You want TikTok-style per-word caption highlighting.
- You need 10+ variants of one ad from a data file.
- You want voiceover synced to the frame.
- You are not sure which stack you need. That is exactly what this is for.
Not for realistic AI footage of people or cinematic b-roll. That is seedance-video-ad-generator.
Where it runs
Section titled “Where it runs”Rendering video needs headless Chrome and ffmpeg locally, so this is a desktop-app skill.
How to run it
Section titled “How to run it”“Make a motion video ad for examplebrand, stat reveal, 15 seconds”
“/um-toolkit:motion-video captioned reel from this script”
What it needs from you
Section titled “What it needs from you”- The brief: format, length, aspect ratio, and what the ad has to say.
- Your locked copy. Character-perfect rendering only helps if the words are final.
- Brand assets: logo file, fonts, colors, any product imagery.
- ffmpeg installed.
What you get back
Section titled “What you get back”- The stack decision, with the reason, so you learn the rule rather than just the answer.
- The composition, authored and rendered to MP4.
- The source files on disk, so a copy change is an edit and a re-render, not a rebuild.
A worked example
Section titled “A worked example”You: “I need the same ad in 40 versions, one per city.”
Picks Remotion, and says why: parametric variants from a JSON file are the case HTML templating handles badly and Remotion handles natively. Hands over to the Remotion skill with the brief intact, which scaffolds the composition, wires the city list, and renders 40 MP4s.
Tips & gotchas
Section titled “Tips & gotchas”- Come here first. Picking a stack yourself and being wrong costs a rebuild.
- Lock copy before rendering. Cheap to change, but re-rendering 40 variants twice is time you did not need to spend.
- Captions are not optional on paid social. Most plays are muted.
- HyperFrames wins on friction. If both stacks could do the job, it will pick HyperFrames, and that is the right default.
Related skills
Section titled “Related skills”Routes to hyperframes and remotion. For a video built from an existing website, use website-to-video. For realistic AI footage, seedance-video-ad-generator.