Motion Graphics Skill Pack

20 skills for directing and building professional motion graphics and video editing with Claude Code. Every frame is code.

Website  ·  Install  ·  See it work  ·  The skills  ·  How they fit  ·  The Fleet  ·  Prompts  ·  Author

This pack directs and builds code-driven motion graphics without requiring After Effects. It covers brand films, event promos, explainers, kinetic typography, editorial collage, charts, title sequences, product launches, 2D, 2.5D and true 3D. Claude Code or Codex can author the composition, while HyperFrames can provide the reusable runtime, validation, preview, audio and rendering layers instead of rebuilding them.

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.

git clone https://github.com/imMamdouhaboammar/motion-graphics-skills.git

mkdir -p ~/.claude/skills
for skill in motion-graphics-skills/skills/*; do
  [ -f "$skill/SKILL.md" ] || continue
  destination="$HOME/.claude/skills/$(basename "$skill")"
  if [ -e "$destination" ]; then
    printf 'Preserved existing skill: %s\n' "$destination"
  else
    cp -R "$skill" "$destination"
  fi
done

zip -r brand-intake.skill brand-intake

test -d motion-graphics-skills/skills || { printf 'Missing source skills folder\n'; exit 1; }
mkdir -p .agents/skills || exit 1
for skill in motion-graphics-skills/skills/*; do
  [ -f "$skill/SKILL.md" ] || continue
  name="$(basename "$skill")"
  destination=".agents/skills/$name"
  if [ -e "$destination" ] || [ -L "$destination" ]; then
    printf 'Preserved existing skill: %s\n' "$destination"
  else
    cp -R "$skill" "$destination" || exit 1
  fi
done

See it work

TEOLA Product Launch ▶ Play Full Video (TEOLA-ad.mp4) Full product launch commercial built completely with code and motion direction. Deep blue glass, glow transitions, and every word from an approved fact list.

Four Steps Events Motion Final ▶ Play Full Video (Four-Steps-Events-Motion-Final-v2.mp4) Bilingual event promo with Arabic typography, custom brand cutouts, synchronized voiceover, and kinetic typography.

Start here: one line, 60 seconds

Motion Director

Before touching any specialist skill, paste this into Claude Code (Opus 5.5) or Codex: copy Make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are. Go all out. Then direct the cut like a lead designer giving real notes: "Slow down the second scene." "Swap the text for mine: [your words]." "Use my brand colours: [hex codes]." "Make it 1080 x 1350 for LinkedIn."

When you want a specific job done properly, pick a skill below.

The skills

Twenty skills, with motion-director as the broad creative front door. Type the line on the right into Claude Code and the right skill picks it up.

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."
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-director<br/>concept · art direction · runtime routing · QA"]
  B["brand-intake<br/>brand.md + MOTION.md"]
  P["motion-brief-writer"]
  M["mix-and-match<br/>reference 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

Why do we dream? And then someone suddenly wakes up, zooms out of the eye, and goes into outer space. There are neural networks of interconnectivity to convey the brain.

Prompts

Every prompt from the edition, ready to paste, one file per job. Each one says when to use it.

npx skills add emilkowalski/skills --skill apple-design

Add this rule to CLAUDE.md: whenever I paste a component prompt or third-party component code, treat it as a structural donor only. Keep its engineering. Replace its demo copy with my real copy, and translate every colour, border, shadow, font and timing to MOTION.md.

[!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:

1. Current project primitives
2. A specialist skill already in this pack
3. HyperFrames workflow, registry block, adapter, CLI, media, or audio capability
4. Native HTML, CSS, SVG, Canvas, Web Audio, or WebGL
5. GSAP for complex seekable choreography
6. Three.js when the shot truly needs 3D geometry, occlusion, lighting, or camera depth
7. 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 20 skills:

Lead Director motion-director Master creative direction, art notes, and timeline flow.

Camera Drone title-sequence-3d Cinematic orbits, camera tracking, and depth sweeps.

Terminal Rig brand-intake Code foundations, design tokens, and motion config.

Social Spark reel-export Vertical cuts, looping covers, and viral promos.

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 (c) 2026 Mamdouh Aboammar. All rights reserved. Strictly prohibited to copy, distribute, modify, reverse engineer, or commercially exploit without explicit written permission.