Create Motion Graphics and Edited Videos with Motion Video Director

Motion Video Director is a production skill that turns a coding agent into a motion designer, video editor, director, and sound designer. It can create animated explainers from code, edit talking-head footage, prepare voiceover scripts, synchronize sound effects, and render final MP4 videos in vertical, widescreen, or square formats.

The project uses a production playbook in SKILL.md together with helper scripts. Instead of immediately rendering a complete video, the agent follows approval gates for the script, plan, and preview.

What Motion Video Director Does

The skill covers both fully generated motion graphics and edits based on existing footage. Animations can be written in Canvas, SVG, Three.js, or GSAP, while footage projects can combine cuts, punch zooms, captions, B-roll, and text placed behind the subject.

• Motion graphics: Create kinetic typography, UI mockups, cursor animations, stickers, particles, Lottie elements, and 3D scenes.
• Footage editing: Edit talking-head clips with cuts, captions, punch zooms, speed ramps, and subject cutouts.
• Voiceover planning: Produce scripts designed for ElevenLabs and align shots with word-level timing.
• Sound design: Add frame-synchronized risers, impacts, and whooshes, duck sound under voiceover, and target platform loudness.
• Local rendering: Export MP4 videos in 9:16, 16:9, or 1:1 formats using code, headless Chrome, and ffmpeg.

Install the Skill

Option 1: Quick installation

The recommended installation uses the npx skills command. Run it from your project folder:

npx skills add Miftahul-Islam-Efaz/Motion-graphics-skill

You need Node.js installed. The installer asks which agent you use and copies the skill into the appropriate location. This method supports Claude Code, Codex, Cursor, and other agents that support skills.

Option 2: Claude Code plugin

Inside Claude Code, install the marketplace entry and plugin:

/plugin marketplace add Miftahul-Islam-Efaz/Motion-graphics-skill
/plugin install motion-video-director@motion-graphics-skill

Restart Claude Code after the installation is complete.

Option 3: Manual installation

1. Download the repository with Code and Download ZIP, then unzip it.
2. Copy the skills/motion-video-director folder into ~/.claude/skills/ for use across projects.
3. Alternatively, copy it into .claude/skills/ inside a project to limit it to that project.
4. Restart Claude Code.

On Windows, the global Claude Code skills directory is typically C:\Users\<you>\.claude\skills\. For Codex, Cursor, or another compatible agent, copy the folder into your project and provide this instruction:

Read skills/motion-video-director/SKILL.md and follow it for this video project.

Check Your Environment

Motion Video Director requires Node.js 18 or newer, ffmpeg, ffprobe, and Playwright with headless Chrome. Optional Python tools add transcription, subject cutouts, and stem separation.

• Required: Node.js 18+, ffmpeg, ffprobe, and Playwright with headless Chrome.
• Optional: Python 3.10+ with faster-whisper, rembg, and demucs.
• Optional integrations: API keys or MCP servers for ElevenLabs, Firecrawl, Freesound, Pexels, Pixabay, and LottieFiles.

Run the preflight script to see which dependencies are installed and which are missing:

bash skills/motion-video-director/scripts/preflight.sh

API keys are stored in a local .env file, which is excluded from git. The repository also provides create_env.sh for creating an environment file with empty key slots and normalize_env.py for converting an existing key file into a clean .env.

Create Your First Video

Once the skill is installed, describe the video you want in natural language. Attach visual references when you have them. For example:

Make a 30-second 9:16 launch reel for my SaaS. References attached.

You can also request an edit based on existing footage:

Edit my raw talking-head clip into a reel with captions, punch zooms and B-roll.

For a product-focused project, provide the intended style and duration:

Create a 45-second product explainer of our dashboard. Clean UI animation, subtle sound design.

Follow the Production Workflow

The agent uses a staged process so you can review important decisions before the final render.

1. Brief: The agent collects references, the story, target audience, format, and duration.
2. Voiceover script: It writes a script ready to paste into ElevenLabs. You generate the MP3 and send it back.
3. Storyboard: Every shot is timed to the words in the voiceover.
4. Build: Scenes are animated in code, and any supplied footage is edited.
5. Preview: The project renders contact sheets for each scene so problems can be found before the full render.
6. Render and mix: The final video is exported with sound design and loudness normalization, followed by a quality-assurance checklist.

You approve the script, plan, and preview before the final render. The workflow logs progress in PROGRESS.md, allowing a new session to continue from where the previous one stopped.

Explore the Main Production Features

Directing and pacing

The playbook addresses hooks in the first three seconds, pacing, shot types, J-cuts, L-cuts, match cuts, and call-to-action structure. It also defines five editing-intensity levels, ranging from fast-paced reels to restrained corporate videos.

Animation and motion graphics

For generated visuals, the skill supports kinetic typography, 3D text, UI mockups, cursor animation, stickers, particles, Lottie content, and Three.js product shots. It also applies animation principles such as easing, staggering, and overshoot.

Footage and subject treatments

For recorded footage, the workflow can add punch zooms, captions, speed ramps, and subject cutouts using tools such as RVM and SAM2. Captions can also be placed behind the subject when the edit calls for that treatment.

Color, layout, and accessibility

The guidance includes the 60-30-10 color approach, WCAG contrast, and safe zones for 9:16 platforms. These considerations help keep important text and visual elements readable in platform-native formats.

Voiceover and sound

Voiceover scripts are prepared for ElevenLabs, while faster-whisper can provide word timestamps. Sound design can include risers, impacts, and whooshes synchronized to individual frames, with ducking under the voice and a target mix of -14 LUFS and -1.5 dBTP.

Use the Helper Scripts

The repository includes several scripts that support the production workflow:

• preflight.sh checks Node.js, ffmpeg, Playwright, Python tools, and API keys.
• preview.mjs renders a selected time range into a contact sheet for quick review.
• analyze_ref.sh breaks a reference video into frames, cuts, and audio.
• create_env.sh creates a .env file with empty API key slots.
• normalize_env.py converts an existing key file into a clean .env.

Advanced Tips for Better Results

• Provide references early: Attach visual examples so the brief and storyboard reflect the intended style.
• Specify the delivery format: State whether the video should be 9:16, 16:9, or 1:1, and include the desired duration.
• Review in stages: Use the script, storyboard, and contact-sheet preview approval gates to catch issues before the full render.
• Keep source assets organized: Clearly identify footage, audio, logos, fonts, and other references so the agent can incorporate them accurately.
• Use the optional tools when appropriate: Add faster-whisper for transcription, rembg for cutouts, and demucs for stem separation.
• Check the environment before building: Run the preflight script first to avoid discovering missing rendering dependencies late in the project.
• Continue from progress logs: Consult PROGRESS.md when resuming work in a new session.

Conclusion

Motion Video Director provides a structured way to create complete videos with Claude Code, Codex, Cursor, or another terminal-capable coding agent. Install the skill, describe your project, review the script and storyboard, inspect the preview, and then let the local rendering workflow produce the final video. It supports both code-generated motion graphics and edited footage without requiring After Effects or Premiere Pro.