content / skill
claude-motion-design
Make motion design videos in code with a Claude Code skill built on HTML, Playwright and ffmpeg.
At a glance
- Purpose
- Make motion design videos in code with a Claude Code skill built on HTML, Playwright and ffmpeg.
- Runs in
- Local agent with shell
- Operating systems
- Not stated
- Needs
- Runtime: Python, Playwright, Chromium and ffmpeg; Needs internet: Yes; Needs accounts or API keys beyond your agent: Not stated
- Files and data
- Reads files: Yes; Writes files: Yes; Sends data to other services: Not stated
- Tool type
- Skill
- Delivery
- From GitHub
- Version
- Latest on the main branch
- Access
- Code on GitHub
- Compatibility
- According to the README, the skill is for Claude Code and uses Python with Playwright and Chromium, imageio-ffmpeg, numpy, pillow and ffmpeg.
- External costs
- The repository's code is MIT-licensed. The README describes Chromium, ffmpeg and Python as free. The README says the tools it uses (Chromium, ffmpeg and Python) need no licence or subscription. Third-party music, sound effects, logos and a font used by the example stay under their own licences. Claude Code and your model provider may charge for usage.
- Permissions
- The skill acts through Claude Code with the access you give it. According to the README, installation copies the skill into ~/.claude/skills, installs Python packages with pip and installs Chromium through Playwright. The README describes browser rendering, an example HTTP server on port 8000, audio generation and ffmpeg encoding, with output files written in the example folder. The README says fetch_assets.py downloads third-party music, sound effects, logos and a font, and describes asset-search and download scripts. The README's remake workflow reads a reference video, extracts frames and runs build and audio agents; the README tells them not to reuse the reference's music, voice or people photos.
- Usage terms
- MIT License, as stated in the repository. See its LICENSE file for the exact terms. The README says the code is MIT and that third-party media downloaded by fetch_assets.py stays under its own licences.
Code on GitHub
howseen-ai/claude-motion-design
MITA Claude Code skill to make motion design videos in pure code: HTML + Playwright + ffmpeg. No After Effects, no Remotion license.
Topics: claude-code claude-skills ffmpeg motion-design playwright
Public GitHub data fetched · 0 days old
Skill folders in this repository (1)
Folders that contain a SKILL.md file, from GitHub's file list on .
What it does
claude-motion-design is a Claude Code skill for making motion design videos in code. According to the README, a video is built from HTML, rendered frame by frame with Playwright and encoded with ffmpeg, with no editing app. The README describes the film as one seek(t) function, with frames computed from time.The README says the skill covers a flow from inputs to a beat map, four approved stills, a full render, a pop scan, audio and a final file. It also lists a director's brief and QA rules, audio steps that line up music and sound effects, free asset sources, and a remake mode that rebuilds a launch video for your brand.
The repository holds the skill in skill/motion-design and an example, the Howseen launch video, with its source in examples/howseen-launch. The README says the example was made with Claude Opus 5.5 and this skill in 5 iterations.
Who it is for
People who want Claude Code to build motion design videos in code instead of using an editing app.Example tasks
In Claude Code, ask for a video or type /motion-design.Write a director's brief with a reference style, timed states, layer list and sound plan before any code.
Render a quick 540p draft before the master render.
Place the music so its drop hits the key frame, and set each sound effect by its measured peak.
In the example folder, run python fetch_assets.py to download its assets.