immamdouhaboammar/motion-graphics-skills
Developer toolsMotion graphics for AI agents. Creative direction + production skills for Claude Code & Codex, powered by HyperFrames. Build brand films, kinetic type, 2D/3D and programmatic video.
Overview
53 agent skills for motion design, animation, video editing, creative direction and production ChatGPT · Claude Code · Codex · HyperFrames Every frame is code Website · Watch the work · Install · Skills · Workflow · Prompts · Author Creative direction and code-driven motion production without requiring After Effects. Build brand films, event promos, explainers, kinetic typography, product launch films, editorial motion and 2D/3D sequences. Use the pack for direction and craft; use HyperFrames for reusable runtime, validation, audio and render workflows. Seven films with original audio. The six promos below use native GitHub attachment players with timeline seeking and fullscreen support. The Egyptian cartoon opens its full committed MP4 from the linked preview. Original master renders and project sources (where provided) are available below each film. 26.6 seconds · Arabic voice-over · 1080 × 1920 · 30 fps https://github.
README
Motion Graphics Skill Pack
53 agent skills for motion design, animation, video editing, creative direction and production ChatGPT · Claude Code · Codex · HyperFrames Every frame is code
Website · Watch the work · Install · Skills · Workflow · Prompts · Author
Creative direction and code-driven motion production without requiring After Effects. Build brand films, event promos, explainers, kinetic typography, product launch films, editorial motion and 2D/3D sequences. Use the pack for direction and craft; use HyperFrames for reusable runtime, validation, audio and render workflows.
Watch the work
Seven films with original audio. The six promos below use native GitHub attachment players with timeline seeking and fullscreen support. The Egyptian cartoon opens its full committed MP4 from the linked preview. Original master renders and project sources (where provided) are available below each film.
Motion Graphics Skills | Arabic promo
26.6 seconds · Arabic voice-over · 1080 × 1920 · 30 fps
https://github.com/user-attachments/assets/908e651d-f5f5-431c-afaa-ac5dd38100d4
Full-length original MP4 · Project source
The Curve | English promo
31 seconds · English voice-over · 1080 × 1920 · 30 fps
https://github.com/user-attachments/assets/7bd0ed81-8612-4a2e-bae6-dfad2a4f0897
Full-length original MP4 · Project source
5 Skills Countdown | English promo
52 seconds · Music and sound effects · 1080 × 1920 · 30 fps
https://github.com/user-attachments/assets/899f4294-689e-4c1c-877c-3623a8faa39a
Full-length original MP4 · Project source
TEOLA | Product Launch
Final product-launch film
https://github.com/user-attachments/assets/6a9d2ff2-4e78-42c1-b8a7-3051579b451d
Four Steps | Events
Arabic · Vertical event promo · Voice-over
https://github.com/user-attachments/assets/1434eb2f-b280-4272-9cd3-b9f8107fb747
Full-length original MP4 · Project source
JEDAR | ليش مجاني؟
59 seconds · Arabic voice-over · 1080 × 1920 · 30 fps
https://github.com/user-attachments/assets/592daa6c-5ce0-4cef-ad3e-40e976729066
Full-length original MP4 · Project source
متلبس بالشطارة | Egyptian satirical cartoon
112.3 seconds · Original Egyptian Arabic narration · 1920 × 1080 · 30 fps
Watch the full film / download MP4 · Editable project and original art · Storyboard, motion proofs and QA
The thumbnail opens the committed full video. A native in-README attachment player has not been uploaded for this film.
ChatGPT and Codex plugin
The pack also supports a skills-only plugin with 50 domain specialists plus three host helpers. Start with motion-studio to route a task according to the tools available in your session.
See plugin installation, the complete 53-skill and 36-module catalog, and the runtime and engine guide. Planning, storyboards and review can run without a media-provider account. Rendering requires an execution-capable host and working dependencies.
Build a private import archive from a checkout:
python3 tools/build_plugin.py /absolute/path/motion-graphics-skills-1.2.0.zip
Install
One line, about 30 seconds:
npx skills add imMamdouhaboammar/motion-graphics-skills
Then open Claude Code, pick Opus 5.5 with /model, and run brand-intake first.
Start here: one line, 60 seconds
When you want a specific job done properly, pick a skill below.
Engines and production routes
Video Style Cloner adds reference analysis, approved storyboards, style-specific production and independent review. Its 36 nested modules include painted animation, anime cel, pixel art, crayon storybook, paper cutout, whiteboard, explainers, product promos, music videos, captions and HyperFrames guidance. These are supporting modules within one imported skill. The optional Rust CLI coordinates project-provided render/review adapters. Its current style-cloning track is 2D.
See the engine and runtime matrix for prerequisites, the optional Rust contract and the bundled Blender guide’s routing limit.
The skills
53 installed skill folders are available in skills/. The table below highlights 22 motion-production skills; the remaining folders cover supporting workflows and design, audio and runtime tooling. Start with motion-director for broad creative work.
| Stage | Skill | What you get | Say this |
|---|---|---|---|
| Direct | motion-director | Master creative direction, concept, craft, HyperFrames routing, review, and production for broad motion work. | “Direct this motion film from reference to final render.” |
| Mix | mix-and-match | Cross-pollinates multiple references into an original concept direction with wildcard discovery and creative-distance checks. | “Mix these references into one original direction.” |
| Set up | brand-intake | Builds brand.md and MOTION.md. Every other skill reads them first. | “Set up my brand for motion. Here are five frames I like.” |
| Plan | motion-brief-writer | Turns a rough idea into a precise build brief in your brand. | “Write me a motion brief for my next milestone post.” |
| Edit | jump-cut-pacing | Silence removal, breath padding, and face-guarded alternating zooms for talking-head video. | “Cut the silences and tighten this talking head video.” |
| Edit | speaker-cutout | Segment presenter, swap backdrops, slide into PiP cards, and place graphics behind the speaker. | “Cut me out of the video and put graphics behind me.” |
| Edit | video-spotlight | Selective lighting, area dimming, desaturation beats, and brand accent focus highlights. | “Put a spotlight on this product and dim the rest.” |
| Edit | paper-cut-motion | 12 fps stop-motion paper-cut animation, tactile torn edges, drop shadows, and collage boards. | “Make an investigative paper-cut stop-motion video.” |
| Launch | launch-video | A 30 to 45 second launch for a product, offer or cohort. | “Make a launch video for my new cohort.” |
| Launch | apple-launch-film | A Mac-style launch film. Menu bar, notch and widgets, all code. | “Make it look like an Apple keynote launch.” |
| Explain | vox-explainer | A 30 to 60 second documentary explainer. | “Make a Vox-style video: why do we dream?” |
| Explain | animated-chart | A looping chart. Every value stays exactly as you give it. | “Animate my chart. Here are my numbers.” |
| Explain | milestone-reveal | A night sky of points that pulls into your real number. | “Make a milestone video for my follower count.” |
| Explain | motion-effects | 16 premium effects in your brand, as 8-second loops. | “Build the search-to-results effect in my brand.” |
| Open | title-sequence-3d | An 8 to 15 second 3D opener that stops the scroll. | “Make a cinematic 3D intro for my next video.” |
| Compare | model-showdown | One brief, three AI models, stacked into one video. | “Same prompt, three AIs. Make a model showdown.” |
| Promote | newsletter-promo | A 12 to 20 second promo that sends people to an edition. | “Make a promo for this week’s newsletter.” |
| Promote | loop-cover | Your newsletter cover as a seamless looping GIF. | “Make my newsletter cover a looping GIF.” |
| Promote | reel-export | Any video as a clean 1080 x 1920 Reel or TikTok. | “Make this a reel for Instagram.” |
| Audio | sfx-picker | Select and integrate curated SFX assets into motion graphics and video editing timelines. | “Pick sound effects for this animation sequence.” |
| Audio | tonejs | Tone.js audio generation, GSAP timeline sync via Tone.Draw, audio-reactive animation and effects. | “Generate sound effects with Tone.js and sync with GSAP.” |
| Review | video-review-loop | Pre-delivery technical and motion gates, timecoded defect logs, frozen frame, and audio checks. | “Review this rendered video cut by timecode.” |
See each skill’s SKILL.md for its trigger phrases, the inputs it asks for and what it learned the hard way.
How they fit together
Use motion-director for broad motion work and brand-intake once per brand. brand-intake writes brand.md (who you are, what you sell, your assets) and MOTION.md (your colours, type, timing and motion rules), and adds a rule to CLAUDE.md so Claude reads both before it animates anything. Every other skill reads those two files first. Without them, a skill asks for your hex codes, font and logo, and never calls its result on-brand.
flowchart TD
D["motion-directorconcept · art direction · runtime routing · QA"]
B["brand-intakebrand.md + MOTION.md"]
P["motion-brief-writer"]
M["mix-and-matchreference genes · wildcards · creative distance"]
V["jump-cut-pacing · speaker-cutout · video-spotlight · paper-cut-motion"]
L["launch-video · apple-launch-film"]
E["vox-explainer · animated-chart · milestone-reveal · motion-effects"]
O["title-sequence-3d"]
X["model-showdown"]
R["newsletter-promo · loop-cover · reel-export"]
Q["video-review-loop"]
D --> B
D --> P
D --> M
D --> V
D --> L
D --> E
D --> O
D --> X
D --> R
D --> Q
B --> P
Use it
For broad motion work, start with motion-director. Run brand-intake once per brand when brand.md and MOTION.md do not already exist. Narrow requests can route directly to a specialist:
"Direct this motion film" → motion-director
"Review this motion cut by timecode" → video-review-loop
"Set up my brand" → brand-intake
"Brief this animation" → motion-brief-writer
"Mix these references into one original direction" → mix-and-match
"Cut the silences and tighten my video" → jump-cut-pacing
"Put graphics behind me" → speaker-cutout
"Spotlight this product and dim background" → video-spotlight
"Make an investigative paper-cut video" → paper-cut-motion
"Make a launch video for my coaching programme" → launch-video
"Make an Apple-style launch for my app" → apple-launch-film
"Why does every logo look the same now?" → vox-explainer
"Animate my Q3 chart" → animated-chart
"Celebrate 10,000 subscribers" → milestone-reveal
"Build the chart morph with my numbers" → motion-effects
"Make a button that turns into a video player" → motion-effects
"Give me a cinematic opener" → title-sequence-3d
"Same prompt, three AIs" → model-showdown
"Promo for this edition" → newsletter-promo
"Make my cover move" → loop-cover
"Make this a reel" → reel-export
Prompts
Every prompt from the edition, ready to paste, one file per job. Each one says when to use it.
| File | What is in it |
|---|---|
| start-here.md | The one-line starter, the edit-by-describing lines and what to do tonight |
| brand-design-system.md | The MOTION.md prompt and the CLAUDE.md read-first block |
| briefs.md | The “Why do we dream?” brief and the real designer notes I gave |
| polish.md | The Apple motion audit, the real-components rule and the fix-one-thing prompt |
| effects.md | 16 prompts, one per effect, each built from scratch in your brand |
[!NOTE] One honest limit: a photoreal human face. Code draws motion, type and UI brilliantly, but a lifelike person still needs an image model (for now).
Runtime philosophy
For new code-driven motion projects, HyperFrames is the preferred production infrastructure. Motion Director owns the creative decisions while HyperFrames owns the production mechanics it already provides.
The pack uses a reuse-first ladder:
- Current project primitives
- A specialist skill already in this pack
- HyperFrames workflow, registry block, adapter, CLI, media, or audio capability
- Native HTML, CSS, SVG, Canvas, Web Audio, or WebGL
- GSAP for complex seekable choreography
- Three.js when the shot truly needs 3D geometry, occlusion, lighting, or camera depth
- Custom infrastructure only when the earlier layers do not solve the problem
For a fresh HyperFrames project, install its current skills with:
npx skills add heygen-com/hyperframes
The master skill adds creative direction, narrative, typography, composition, motion craft, Arabic RTL guidance, reference analysis, and visual QA. HyperFrames is expected to handle the renderable project contract, reusable registry, supported adapters, diagnostics, preview, rendering, batch variants, and audio relationships for greenfield projects. The pack does not copy HyperFrames’ renderer or rebuild its engine.
Meet the Motion Director Crew
Every frame is code, and every cut has a specialist. These retro cyberpunk pixel art mascots were crafted with the Sprite Fusion API to personify the creative roles across the skills:
Explore the full 12-sprite pixel catalog and manifests in assets/sprites/.
Contributing
Found a way to improve a skill? Open an issue.
Before debugging a render, a clipped word or a broken transition, check Failure-lessons. It records what already went wrong on real films, how it was proven, and the rule that now prevents it.
Run bash validate-skills.sh before you submit. It checks every skill’s frontmatter, that the name matches the folder, the description length, and the house style across every skill, its reference files and the prompts folder.
Author and Ownership
Licence
Proprietary (All Rights Reserved). Copyright © 2026 Mamdouh Aboammar. All rights reserved. Strictly prohibited to copy, distribute, modify, reverse engineer, or commercially exploit without explicit written permission.
Recommended Tools
Try a different keyword or remove a filter.
Install
npx skillfish add immamdouhaboammar/motion-graphics-skills