Not in the top 1,000 by GitHub stars
howseen-ai/claude-motion-design
A Claude Code skill to make motion design videos in pure code: HTML + Playwright + ffmpeg. No After Effects, no Remotion license.
History
Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.
View weekly changes
skill/motion-design/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
3d90d349ef3f → 3d90d349ef3f
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → 3d90d349ef3f
No earlier version was observed for comparison.
786GitHub stars
43stars in 7 days
1skill in this repository
0commits in 30 days
Heat
6.7- Star growth, last 7 daysNot available
- Star growth, last 24 hoursNot available
- Rank movement, last 7 daysNot available
- Commits, last 30 daysNot available
- Accounts asking about it through MCP, last 7 daysNot available
- Hot votes this weekNot available
Heat never changes the order by stars, and sponsorship never touches it. How heat works
Stars over time
Individual skills in this repository
- motion-design
skill/motion-design
How it works
motion-design
When your agent uses it
Code-only motion design pipeline (no After Effects) for Raphaël / Howseen: launch films, showreels, product promos, LinkedIn/X videos, meme clips. Use when asked to make a motion design video, a promo/launch film, a showreel, "remake this video", a video from a prompt (e.g. "make a 15s motion graphics video…"), to change a video's music/SFX, or to prepare memes for posts. Covers the brief → beat map → stills → seek(t) HTML engine → Playwright render → ffmpeg → music/SFX → QA flow, plus asset sourcing (Mixkit, Pexels, Unsplash, svgl, 21st.dev) and every gotcha hit so far.
What it loads into context
Frontmatter
165 tokensAlways available to the agent
SKILL.md
9,353 tokensWhen the skill is activated
Reference documents
556 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- 00. Start from the library (fastest path)
- 0. Non-negotiables
- 1. Flow (always in this order)
- 2. The engine (one HTML file)
- 3. Render (scripts/render_template.py)
- 4. Music & SFX (scripts/audio_template.py, analyze_song.py)
- 5. Assets
- 6. Gotchas (all hit for real)
- 7. Delivery checklist
- 8. Critique loop (make the model watch its own frames)
- 9. Extra rules
- 9b. Studio conventions & director's brief (from the "Playbook Opus 5.5" doc, 02/10/2026)
- 9c. Stolen from the other public motion skills (scan 02/10/2026)
- 9d. From the YouTube walkthroughs (Bart Slodyczka, Moritz, Jack Roberts, 24-25/09; transcripts in vault `30 Ressources/.raw/`)
- 10. Remake mode — frame-locked 1:1 copy of an existing video (scripts/remake/)
- 11. Product film mode — homepage SaaS film (from the "PROMPT MOTION DESIGN SAAS" brief, 29/09/2026)
Scripts executed separately
scripts/analyze_song.pyscripts/audio_template.pyscripts/mcp21_client.pyscripts/mixkit_sfx_search.pyscripts/remake/core.jsscripts/remake/remake_analyze.pyscripts/remake/remake_qa.pyscripts/remake/remake_render.pyscripts/remake/remake_stub.pyscripts/remake/remake_sync.pyscripts/render_template.pyscripts/svgl_logos.py
Files
SKILL.mdcore33,895 bytesSKILL.mdcore33,895 bytesSKILL.mdcore33,895 bytesscripts/analyze_song.pyruns1,260 bytesscripts/audio_template.pyruns3,320 bytesscripts/mcp21_client.pyruns2,117 bytesscripts/mixkit_sfx_search.pyruns1,011 bytesscripts/remake/BRIEF_TEMPLATE.mddoc2,143 bytesscripts/remake/core.jsruns9,359 bytesscripts/remake/index.htmlasset1,200 bytesscripts/remake/remake_analyze.pyruns2,120 bytesscripts/remake/remake_qa.pyruns1,523 bytesscripts/remake/remake_render.pyruns3,304 bytesscripts/remake/remake_stub.pyruns627 bytesscripts/remake/remake_sync.pyruns2,578 bytesscripts/render_template.pyruns8,143 bytesscripts/svgl_logos.pyruns1,268 bytes
Read SKILL.md
# Motion design, 100 % code (Howseen pipeline)
Built and battle-tested 25-27/09/2026 on: promo60 (60 s VO ad), loop, launch film, showreel v1/v2, frame. (Apple-keynote prompt), Crave (food-app prompt), reel15 (howseen.ai in 1 prompt + "make it better" pass), Baguette Pro (Apple framework parody), Howseen LinkedIn v1→v5 (4:5).
Workdir: `~/Desktop/Howseen AI/howseen-video/` (one folder per film). Every film folder = `<name>.html` + `render.py` + `audio.py` + `out/`.
**Our stack vs the "AI motion" stack people post** (Opus + Higgsfield + Blender + After Effects + Suno + Soundly): we replace Blender/After Effects with a deterministic HTML engine rendered frame by frame, Higgsfield with real stock (Pexels/Unsplash) or coded visuals, Suno with Mixkit music, Soundly with Mixkit SFX. 0 € and fully reproducible. Suno/Envato/Higgsfield only if Raphaël asks and has credits.
## 00. Start from the library (fastest path)
- **Read `howseen-video/INDEX.md` first**: every film we made, its final file and what to reuse. Copy the closest folder instead of starting from zero.
- **Brief given as frame tables** (f0–fN, hard cuts, per-frame px lists, "motion law p(n)=…"): copy `launch20/` (02/10/2026). It has the frame-number engine (`core.js`: `T`/`L`/`kf` registered tables, `law()`, `settleT`/`exitT`/`joinT`, `scanTables()` that blocks one-frame outliers, `makeField` colour field, `makeBadge`, macOS cursor), fictional Mac apps in em units (`ui.js`: chat, call, notes, files, board, dock icons, `lineIcon` set, `tx` helper), shot registry split in files so **3 agents build shot groups in parallel** (one file each), `render.py` (deviceScaleFactor 2 = 4K, `PROBE=<dir>` per agent, `frames a b` in 3 parallel processes, `encode` with frame count check, no `-shortest`), `audio.py` (music + SFX 100 % synthesized on exact frames, two-pass −14 LUFS / TP −1.3).
- Workflow that worked on launch20 (≈2 h brief → v2): inputs (AskUserQuestion) → 4 stills → BRIEF.md in the folder → 3 build agents + 1 side task in parallel → scan → parallel render → encode → **motion critic + design critic as separate read-only agents (default reject)** → FIXES file split per agent → v2.
- Lessons from the critics (apply from the first pass): never key settles in 3-frame steps (per-frame law, fastest step first), exits geometric ×1.5, **no frozen frame anywhere except the final hold** (keep a micro settle/drift alive, also on still end cards), the next shot enters already moving in the exit's direction, real icons (no empty placeholder squares), one face per name everywhere, grade photos to remove banned hues with a continuous per-pixel formula (hue thresholds blotch JPEG blocks), traffic lights/details sized in the component's em units.
- People in fictional UIs: AI-generated faces (thispersondoesnotexist.com/random-person.jpeg, crop centre 76 % to drop the watermark), names chosen to match each face, never a real person. Photos: picsum (Unsplash licence) when Unsplash napi returns 401; build a contact sheet and pick by eye (an agent can do it).
Skills included
- motion-design
Repository facts
- License
- MIT
- Created
- Sep 27, 2026
- Last pushed
- Oct 4, 2026
- Forks
- 101
- Open issues
- 1
- Project activity
- Active
Rank over the last 12 weeks
Now #886 · best #867
- #972 on Oct 19
- #976 on Oct 20
- #985 on Oct 21
- #944 on Oct 22
- #951 on Oct 23
- #886 since Oct 24
22 earlier periods
- #910 on Sep 27
- #951 on Sep 28
- #978 on Sep 29
- #942 on Sep 30
- #877 on Oct 1
- #893 on Oct 2
- #867 on Oct 3
- #909 on Oct 4
- #930 on Oct 5
- #916 on Oct 6
- #955 on Oct 7
- #993 on Oct 8
- #954 on Oct 9
- #930 on Oct 10
- #938 on Oct 11
- #955 on Oct 12
- #957 on Oct 13
- #975 on Oct 14
- #960 on Oct 15
- #967 on Oct 16
- #946 on Oct 17
- #928 on Oct 18
Before you install
Network or broad shellAutomated signals, not a guarantee
Checked Nov 7, 2026
Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.
Show 2 notes
skill/motion-design/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskill/motion-design/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzed
- No broad tool permissions
- No dangerous shell commands
- 29 network referencesin 7 files: motion-design/SKILL.md:52 motion-design/scripts/mcp21_client.py:2 motion-design/scripts/svgl_logos.py:9 and 4 more
- No hidden or obfuscated text
- No instruction overrides
- 12 executable scriptsin 12 files: motion-design/scripts/analyze_song.py:1 motion-design/scripts/audio_template.py:1 motion-design/scripts/mcp21_client.py:1 and 9 more
- 4 references to secretsin 4 files: motion-design/SKILL.md:160 motion-design/scripts/mcp21_client.py:3 motion-design/scripts/remake/remake_render.py:17 and 1 more
- No requests to vote in Hot
Show all 45 signals by file
skill/motion-design/SKILL.md
- Network accessline 52
## 4. Music & SFX (scripts/audio_template.py, analyze_song.py) - **Music = Mixkit** (free commercial). Direct file: `https://assets.mixkit.co/music/<id>/<id>.mp3`. IDs: grep `music/[0-9]+/[0-9]+\.mp3` in the listing page HTML (page order = - Network accessline 53
- **Music = Mixkit** (free commercial). Direct file: `https://assets.mixkit.co/music/<id>/<id>.mp3`. IDs: grep `music/[0-9]+/[0-9]+\.mp3` in the listing page HTML (page order = WebFetch list order). - Network accessline 54
- Used & measured: `audio/mixkit-207.mp3` 120 BPM (drop song 31.97 s), `mixkit-190` 120 BPM (drop bar 8 = 16.01 s), `mixkit-129` 120 BPM (drop 16.09 s), `minimal-techno-01` 119.99 BPM (true drop 39.98 s, auto grid is 2 beats off), **Cat Wal - Network accessline 55
- **Find the drop by energy**, never trust an auto grid: per-bar low/full band energy, then 20-50 ms windows around the jump. Start the song at `drop_in_song - drop_in_film`. - **SFX = Mixkit**, downloaded to `howseen-video/sfx/` (`https:// - Network accessline 56
- **SFX = Mixkit**, downloaded to `howseen-video/sfx/` (`https://assets.mixkit.co/active_storage/sfx/<id>/<id>-preview.mp3`); search with `scripts/mixkit_sfx_search.py <tag>`. Map so far: click 1125, key 2568, soft tick 1117, check 1113, to - Network accessline 60
## 5. Assets - **Photos**: Unsplash `https://unsplash.com/napi/search/photos?query=…&per_page=30` (curl ok) → `urls.raw + &w=2600&q=85&fm=jpg`; Pexels CDN `https://images.pexels.com/photos/<ID>/pexels-photo-<ID>.jpeg?auto=compress&cs=tinysr - Network accessline 61
- **Photos**: Unsplash `https://unsplash.com/napi/search/photos?query=…&per_page=30` (curl ok) → `urls.raw + &w=2600&q=85&fm=jpg`; Pexels CDN `https://images.pexels.com/photos/<ID>/pexels-photo-<ID>.jpeg?auto=compress&cs=tinysrgb&w=1600` (s - Access to secretsline 160
[Credential-related source omitted]
skill/motion-design/scripts/analyze_song.py
- Executable scriptline 1
Executable file
skill/motion-design/scripts/audio_template.py
- Executable scriptline 1
Executable file
skill/motion-design/scripts/mcp21_client.py
- Executable scriptline 1
Executable file - Network accessline 2
import json, os, sys, urllib.request KEY = os.environ.get("API_KEY_21ST") or open(os.path.expanduser("~/.config/21st.key")).read().strip() URL = "https://21st.dev/api/mcp" - Network accessline 3
[Credential-related source omitted] - Access to secretsline 3
[Credential-related source omitted] - Network accessline 4
URL = "https://21st.dev/api/mcp" - Network accessline 14
if SID: h["Mcp-Session-Id"] = SID try: r = urllib.request.urlopen(urllib.request.Request(URL, data=json.dumps(body).encode(), headers=h), timeout=90) - Network accessline 15
try: r = urllib.request.urlopen(urllib.request.Request(URL, data=json.dumps(body).encode(), headers=h), timeout=90) except urllib.error.HTTPError as e: - Network accessline 16
r = urllib.request.urlopen(urllib.request.Request(URL, data=json.dumps(body).encode(), headers=h), timeout=90)
skill/motion-design/scripts/mixkit_sfx_search.py
- Executable scriptline 1
Executable file - Network accessline 2
import re, sys, urllib.request for q in sys.argv[1:]: html = urllib.request.urlopen(urllib.request.Request(f"https://mixkit.co/free-sound-effects/{q}/", headers={"User-Agent": "Mozilla/5.0"}), timeout=20).read().decode("utf8", "ignore") - Network accessline 3
for q in sys.argv[1:]: html = urllib.request.urlopen(urllib.request.Request(f"https://mixkit.co/free-sound-effects/{q}/", headers={"User-Agent": "Mozilla/5.0"}), timeout=20).read().decode("utf8", "ignore") marks = [(m.start(), m.gro - Network accessline 4
html = urllib.request.urlopen(urllib.request.Request(f"https://mixkit.co/free-sound-effects/{q}/", headers={"User-Agent": "Mozilla/5.0"}), timeout=20).read().decode("utf8", "ignore")
skill/motion-design/scripts/remake/BRIEF_TEMPLATE.md
- Network accessline 3
Workdir (absolute): [WORKDIR] · Python: [VENV]/bin/python · page: http://localhost:[PORT]/[DIR]/index.html (server already running).
skill/motion-design/scripts/remake/core.js
- Executable scriptline 1
Executable file
skill/motion-design/scripts/remake/remake_analyze.py
- Executable scriptline 1
Executable file
skill/motion-design/scripts/remake/remake_qa.py
- Executable scriptline 1
Executable file
skill/motion-design/scripts/remake/remake_render.py
- Executable scriptline 1
Executable file - Network accessline 15
FF = imageio_ffmpeg.get_ffmpeg_exe() import os URL = os.environ.get("REMAKE_URL", "http://localhost:8768/remake/index.html") # set REMAKE_URL to your served index.html - Network accessline 16
import os URL = os.environ.get("REMAKE_URL", "http://localhost:8768/remake/index.html") # set REMAKE_URL to your served index.html FPS = 24 - Network accessline 17
[Credential-related source omitted] - Access to secretsline 17
[Credential-related source omitted]
skill/motion-design/scripts/remake/remake_stub.py
- Executable scriptline 1
Executable file
skill/motion-design/scripts/remake/remake_sync.py
- Executable scriptline 1
Executable file
skill/motion-design/scripts/render_template.py
- Executable scriptline 1
Executable file - Network accessline 16
HERE = Path(__file__).parent FF = imageio_ffmpeg.get_ffmpeg_exe() URL = "http://localhost:8767/crave.html" - Network accessline 17
FF = imageio_ffmpeg.get_ffmpeg_exe() URL = "http://localhost:8767/crave.html" FPS, T, SUB = 60, 32 * 60 / 130, 8 - Network accessline 18
URL = "http://localhost:8767/crave.html" - Access to secretsline 23
[Credential-related source omitted]
skill/motion-design/scripts/svgl_logos.py
- Executable scriptline 1
Executable file - Network accessline 9
for name, q in WANT.items(): try: res = json.loads(urllib.request.urlopen(urllib.request.Request("https://api.svgl.app?search=" + urllib.parse.quote(q), headers=UA), timeout=30).read()) - Network accessline 10
try: res = json.loads(urllib.request.urlopen(urllib.request.Request("https://api.svgl.app?search=" + urllib.parse.quote(q), headers=UA), timeout=30).read()) except Exception as e: - Network accessline 11
res = json.loads(urllib.request.urlopen(urllib.request.Request("https://api.svgl.app?search=" + urllib.parse.quote(q), headers=UA), timeout=30).read()) - Network accessline 15
if not pick: print(name, "none"); continue route = pick["route"] if isinstance(pick["route"], str) else pick["route"].get("light") (OUT / f"{name}.svg").write_bytes(urllib.request.urlopen(urllib.request.Request(route, headers=UA), t - Network accessline 16
route = pick["route"] if isinstance(pick["route"], str) else pick["route"].get("light") (OUT / f"{name}.svg").write_bytes(urllib.request.urlopen(urllib.request.Request(route, headers=UA), timeout=30).read()) print(name, "<-", pick[" - Network accessline 17
(OUT / f"{name}.svg").write_bytes(urllib.request.urlopen(urllib.request.Request(route, headers=UA), timeout=30).read())
How the signals fit together
Facts from a static read of the files at the pinned commit. They describe what the code does, not why.
Signal confidence: 45 facts
- Network access in prose of the SKILL.mdmotion-design/SKILL.md:52Low confidence
- Network access in prose of the SKILL.mdmotion-design/SKILL.md:53Low confidence
- Network access in prose of the SKILL.mdmotion-design/SKILL.md:54Low confidence
- Network access in prose of the SKILL.mdmotion-design/SKILL.md:55Low confidence
- Network access in prose of the SKILL.mdmotion-design/SKILL.md:56Low confidence
- Network access in prose of the SKILL.mdmotion-design/SKILL.md:60Low confidence
- Network access in prose of the SKILL.mdmotion-design/SKILL.md:61Low confidence
- Access to secrets in prose of the SKILL.md: a variable, placeholder or call, not a stored valuemotion-design/SKILL.md:160Low confidence
- Executable script in prose of a file that runsmotion-design/scripts/analyze_song.py:1Low confidence
- Executable script in prose of a file that runsmotion-design/scripts/audio_template.py:1Low confidence
- Executable script in prose of a file that runsmotion-design/scripts/mcp21_client.py:1Low confidence
- Network access in code of a file that runsmotion-design/scripts/mcp21_client.py:2High confidence
- Network access in code of a file that runsmotion-design/scripts/mcp21_client.py:3High confidence
- Access to secrets in code of a file that runs: a variable, placeholder or call, not a stored valuemotion-design/scripts/mcp21_client.py:3Low confidence
- Network access in code of a file that runsmotion-design/scripts/mcp21_client.py:4High confidence
- Network access in code of a file that runsmotion-design/scripts/mcp21_client.py:14High confidence
- Network access in code of a file that runsmotion-design/scripts/mcp21_client.py:15High confidence
- Network access in code of a file that runsmotion-design/scripts/mcp21_client.py:16High confidence
- Executable script in prose of a file that runsmotion-design/scripts/mixkit_sfx_search.py:1Low confidence
- Network access in code of a file that runsmotion-design/scripts/mixkit_sfx_search.py:2High confidence
- Network access in code of a file that runsmotion-design/scripts/mixkit_sfx_search.py:3High confidence
- Network access in code of a file that runsmotion-design/scripts/mixkit_sfx_search.py:4High confidence
- Network access in prose of documentationmotion-design/scripts/remake/BRIEF_TEMPLATE.md:3Low confidence
- Executable script in a comment of a file that runsmotion-design/scripts/remake/core.js:1Low confidence
- Executable script in prose of a file that runsmotion-design/scripts/remake/remake_analyze.py:1Low confidence
- Executable script in prose of a file that runsmotion-design/scripts/remake/remake_qa.py:1Low confidence
- Executable script in prose of a file that runsmotion-design/scripts/remake/remake_render.py:1Low confidence
- Network access in code of a file that runsmotion-design/scripts/remake/remake_render.py:15High confidence
- Network access in code of a file that runsmotion-design/scripts/remake/remake_render.py:16High confidence
- Network access in code of a file that runsmotion-design/scripts/remake/remake_render.py:17High confidence
- Access to secrets in code of a file that runs: a variable, placeholder or call, not a stored valuemotion-design/scripts/remake/remake_render.py:17Low confidence
- Executable script in code of a file that runsmotion-design/scripts/remake/remake_stub.py:1High confidence
- Executable script in prose of a file that runsmotion-design/scripts/remake/remake_sync.py:1Low confidence
- Executable script in prose of a file that runsmotion-design/scripts/render_template.py:1Low confidence
- Network access in code of a file that runsmotion-design/scripts/render_template.py:16High confidence
- Network access in code of a file that runsmotion-design/scripts/render_template.py:17High confidence
- Network access in code of a file that runsmotion-design/scripts/render_template.py:18High confidence
- Access to secrets in code of a file that runs: a variable, placeholder or call, not a stored valuemotion-design/scripts/render_template.py:23Low confidence
- Executable script in prose of a file that runsmotion-design/scripts/svgl_logos.py:1Low confidence
- Network access in code of a file that runsmotion-design/scripts/svgl_logos.py:9High confidence
- Network access in code of a file that runsmotion-design/scripts/svgl_logos.py:10High confidence
- Network access in code of a file that runsmotion-design/scripts/svgl_logos.py:11High confidence
- Network access in code of a file that runsmotion-design/scripts/svgl_logos.py:15High confidence
- Network access in code of a file that runsmotion-design/scripts/svgl_logos.py:16High confidence
- Network access in code of a file that runsmotion-design/scripts/svgl_logos.py:17High confidence
Works with
| Agent | Status | Evidence | Install to |
|---|---|---|---|
| Claude Code | Compatible | Standard SKILL.md skill/motion-design/SKILL.md | .claude/skills/<skill-name>/ |
| Codex | Compatible | Standard SKILL.md skill/motion-design/SKILL.md | .agents/skills/<skill-name>/ |
| Cursor | Compatible | Standard SKILL.md skill/motion-design/SKILL.md | .cursor/skills/<skill-name>/ |
| Gemini CLI | Compatible | Standard SKILL.md skill/motion-design/SKILL.md | .gemini/skills/<skill-name>/ |
| GitHub Copilot | Compatible | Standard SKILL.md skill/motion-design/SKILL.md | .github/skills/<skill-name>/ |
| OpenCode | Compatible | Standard SKILL.md skill/motion-design/SKILL.md | .opencode/skills/<skill-name>/ |
- Native The repository ships a manifest, folder or frontmatter field for this agent.
- Compatible A standard SKILL.md that this agent can read.
- Unknown No evidence either way.
Derived automatically from paths, manifests and frontmatter. Not tested on each agent.
