motion-design
From the author
A Claude Code skill to make motion design videos in pure code: HTML + Playwright + ffmpeg. No After Effects, no Remotion license.
Install
npx skills add howseen-ai/claude-motion-design --skill motion-design -a claude-code
Installs to .claude/skills/motion-design/ · Each command fetches the skill straight from GitHub with the open skills CLI.
Download .zip
Byte-identical to the scanned commit, with the repository’s licence and a SOURCE.txt.
Want your agent to suggest skills while you type? See how to use skills from your IDE.
Safety checks on SKILL.md
- Ships scripts we have not reviewedLow
Why 81
Security85
Provenance74
Maintenance100
Licence100
Adoption46
aiqbench computes the trust score from public signals. It is not a security audit, so read a skill before you install it.
Similar skills
Closest to this one by what they do and when they are used.
- animating-with-codeoaustegard/claude-skillsMake a short animated film by writing the drawing code yourself: every frame a pure function of time, rendered headlessly to MP4. Covers storyboarding with a per-shot timing sheet of viewer 'reads', blocking key poses as stills, the contact-sheet / frame-strip / crop review loop, and the hand-painted character kit JohnHeibel/ClaudeAnimationBase (p5.js + p5.brush, the Clawd mascot, 31 emotions). Use for 'animate', 'make a cartoon', 'animated short', 'motion graphic', 'Clawd video', 'p5 animation', or any video request where Claude draws the frames. Not for AI-generated footage (creating-video), transcoding or trimming existing video (processing-video), or a comic from footage (drawing-video).Engineering★ 158
- motion-language-designerOneWave-AI/claude-skills200+ production-ready Claude Code skills for sales, marketing, design, engineering, and AI agent architecture. Built and maintained by OneWave AI.Design★ 411
- motion-graphicsJimLiu/baocut给音频视频定制内容背景与标题，或要在视频上加一段动效图形时用：下横栏（姓名职务）、关键词字幕、大数字与图表、标注与引导、品牌贴片与片尾、倒计时与进度。不选模板，按规则写一个自包含的 HTML 画面（时间的纯函数），打包成代码包导入后放上时间线。只加静态文字、贴纸或已有的文字动画预设时不用；声波一律用内置的声波元素，不用本 skill 画；整条成片的规划看「从简报到成片」。Other★ 1.7K
- motion-framesnexu-io/open-designA single-frame motion-design composition with looping CSS animations — rotating type ring, animated globe, ticking timer, parallax labels. Renders as a hero video poster you can hand straight to HyperFrames or any keyframe-based exporter. Use when the brief asks for "motion design", "animated hero", "loop", "video poster", "title card", or pairs Open Claude Design with HyperFrames for a kinetic export.Design★ 105.7K
- motion-design-rulesBintzGavin/heliosMotion design framework for programmatic video. Defines anti-slideshow architecture, depth, one easing personality, choreography, the squint test, transitions, timing to music and voice, and checks a script can run. Stated so it holds in any look; a motion-styles card overrides it where they conflict. Reference this skill from any guided video skill.Design★ 123
- vid-motion-graphicsVarnan-Tech/opendirectoryGenerates motion graphics videos (MP4) from a content brief. Multi-scene HTML/CSS animations rendered frame-by-frame in headless Chromium via Playwright, assembled with FFmpeg. 1080×1080 default, 16:9 (1920×1080) and 9:16 (1080×1920) supported. 5 style presets. Trigger when user says "create a video", "motion graphic", "animated video", "make a reel", "create an explainer", "animated infographic", or "short video".Testing★ 689
Ratings & reviews
—
no reviews
Tried this skill? Rate it to help others. Sign in
Discussion
Join the discussion. Sign in