MOTION0:34Promo film cut automatically with claude-motion-design
The agent researched YouTube ad styles and edited a product promo from a homepage, using the claude-motion-design skill.
/
Submitclaude-motion-design: no After Effects, no Remotion
Motion videos in pure code: HTML scenes captured with Playwright and stitched with ffmpeg, cuts on the beat.
Reference videos (1)
Real videos made with this skill, credited to their creators. Hover to preview.
MOTION0:34What it does
Motion videos in pure code: HTML scenes captured with Playwright and stitched with ffmpeg, cuts on the beat.
A Claude Code skill to make motion design videos in pure code: HTML + Playwright + ffmpeg. No After Effects, no Remotion license, no editing app.
Every frame is computed from time, rendered frame by frame, blended for motion blur, and cut to the beat of the music. Every sound effect lands on its measured peak.
Quoted from the README of howseen-ai/claude-motion-design.
Inside the repo
Why code instead of an editorInstallRun the exampleWhat the skill coversCredits and licenses
Step by step
- Open the GitHub repo and skim the README (install commands change often).
- Install it: copy the skill folder into ~/.claude/skills/ (Claude Code) or ~/.codex/skills/ (Codex), or use the plugin/marketplace command from the README.
- Restart Claude Code or Codex.
- Ask for the job in plain words; the skill loads when your request matches.
Sources & credit
All credit to the original authors. We rewrite in our own words and link back. Something wrong? Report it.
Related
SKILL0:56HyperFrames: write HTML, get a video
Open-source renderer that turns HTML/CSS/JS scenes into frame-exact MP4s; built so coding agents can drive it.
Claude Code +1★ 63.8k
SKILL0:34/brag: turn a finished project into a launch video
Type /brag in a project; it reads the code and renders a ~20s launch film with music, captions and share copy.
Claude Code +1★ 16k
SKILL0:28Anatomy: interactive isometric illustrations
Draws detailed, interactive isometric cutaways of real objects as code; a port also runs in ChatGPT/Codex.
Claude Code +1★ 10.6k
SKILLGSAP official agent skills
Official skills from GreenSock that teach agents to write correct, smooth GSAP animations.
Claude Code +1★ 16.4k
SKILLmotion-skills: 50 packs (Reels, explainers, data-viz, Manim)
Install a pack and your agent works like a motion designer for TikTok/Reels, explainers, charts and WebGL.
Claude Code +2★ 812
SKILLanimate: single-file procedural videos with a storyboard
Makes short canvas videos in any style, planning story, look and storyboard as it goes.
Claude Code★ 703Coming soon
AgentsUses Weekly
A free weekly email with the best new skills and agent workflows is coming soon. Want a heads-up when the first issue goes out? Email [email protected] and we will let you know.