Felipeex

Motion Skill — Design skill for Claude Code

Design community

Agent Skill for motion design videos with canvas + Web Audio → MP4 (Claude Code, Codex, Cursor, Gemini CLI…).

How to install Motion Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open Felipeex/motion-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Motion Skill does

Agent Skill for motion design videos with canvas + Web Audio → MP4 (Claude Code, Codex, Cursor, Gemini CLI…).

Alternatives in Design

Huashu Design — Huashu Design · HTML-native design skill for Claude Code · Claude Code 里 HTML 原生的设计 skill · 高保真原型 / 幻灯片 / 动画 + 23.6k ★
CloudCLI — 8,400+ Free open-source web/mobile UI for Claude Code, Cursor CLI, and Codex 8.7k ★
NotebookLM Automation — Complete programmatic access to Google NotebookLM—including capabilities not exposed in the web UI 6.8k ★

README

motion — Agent Skill

[English](#english) · [Português (BR)](#português-br)

English

An [Agent Skill](https://agentskills.io) for creating **motion design videos** of any kind — vignettes, intros, animated explainers, kinetic text — rendered with **canvas + Web Audio** and exported to **MP4**.

Any format: 9:16 (Reels/Stories/Shorts), 4:5, 1:1, 16:9
With or without voice-over (silence trimming, loudness normalization, word-level timing via Whisper)
Any brand or subject: colors and fonts come from the user's brand
Synthesized soundtrack and sound effects (whooshes, pops, ticks) through Web Audio
Deterministic rendering: render(t) always produces the same frame for the same t
Review frames before export, then validate the MP4 (ffprobe, ebur128 ≈ -14 LUFS)

Examples

Upholstery cleaning ad	SaaS ad	Solar panel cleaning ad

Click a preview to watch the full MP4 with sound (9:16, ~35s, in Portuguese).

How it works

File	Role
`trim-audio.mjs`	(Voice-over only) trims silences → normalized `voice.wav` + `timings.json`
`video.html`	The animation: `render(t)` on a canvas + music/effects in Web Audio. Opens in Chrome as a live preview
`export.mjs`	Headless Chrome draws each frame → ffmpeg → MP4. `--quadros 0.2,9.5,…` only captures review stills
`assets/`	Images used by the video (logo, screenshots, photos)