Motion graphics skills for AI coding agents
56 open-source skills in 19 packs that teach Claude Code, Cursor, Codex and 40+ agents how a professional builds motion. MIT licensed.
short-form-video
The hook → retention → loop grammar of vertical 9:16 video — hooks, pattern interrupts, pacing, and repeatable templates.
caption-animation
Word-timed, karaoke-style captions from a transcript or voiceover — per-word pop, active-word highlight, safe-area placement.
countdown-video
Frame-accurate, drift-free countdown timers with digit flip/roll motion and a configurable duration.
lower-thirds
Clean, branded name/role lower thirds with staged enter/exit animation — templated across a whole roster.
text-message-animation
Animate a chat conversation — bubbles pop in one at a time, typing indicators pulse, sounds land on send, the thread auto-scrolls — across iMessage/WhatsApp/SMS, rendered from a script or CSV so one template prints endless videos.
audiogram
Turn a podcast clip, voiceover, or quote into a captioned waveform video for Reels, TikTok, Shorts, and feed posts.
youtube-intro-outro
Build a 3-5s branded intro sting and a 20s end-screen outro that respects YouTube's clickable element zones.
product-demo-video
Turn static product/app screenshots into a polished animated demo — device frames, synthetic cursor + click, zoom-to-region, feature captions.
promo-video
Punchy 6–15s sale spot — discount reveal, was→now price strike-through, promo code, countdown, CTA, batched across many products.
photo-slideshow
Turn a folder of photos into a finished video — per-photo Ken Burns motion, beat-synced transitions, mixed aspect ratios, captions.
ad-creative-video
One data-driven ad template × a CSV = N message-matched variants, exported to every placement aspect for A/B testing.
launch-video
High-energy product launch / hype films: hook → tease → reveal → feature montage → end-card CTA, cut to the beat.
testimonial-video
Animated quote / review clips with staggered line reveals, key-phrase emphasis, fractional star ratings, and an author block.
chart-animation
Turn a dataset into an animated chart — bar chart race, line/area reveal, count-up tickers, and batch render one template across many CSVs.
animated-infographic
Build a designed infographic — icons, key numbers, connectors — and reveal it in a staggered cascade.
presentation-video
Rebuild a slide deck as a narrated, auto-advancing video with build reveals timed to the voiceover.
explainer-video
Turn one message into a paced, narrated 30–90s short — script → storyboard → scene build → narration/caption sync → edit → polish.
wrapped-video
Build "Spotify Wrapped"-style recaps: one template × a data table → many personalized 9:16 videos.
diagram-animation
Reveal diagrams and charts over time — progressive node/edge reveals, flowing connectors, growing bars, count-ups.
whiteboard-animation
Draw-on "VideoScribe"-style explainers — a hand sketches illustrations and handwriting onto a board, stroke by stroke, paced to narration.
isometric-animation
Isometric / 2.5D scenes — stacked layers, extruded blocks, exploded diagrams, and isometric grids with staggered reveals and camera drift.
map-animation
Animate maps — camera zoom/orbit/pan, pins, drawn-on routes, region highlights, and labels, via Google Earth Studio → After Effects or code-renderable GeoJSON/SVG vector maps driven from a coordinates array.
gsap-web
Code-driven web motion with GSAP — timelines, ScrollTrigger, SplitText, Flip, and Lenis smooth-scroll sync.
60fps-animation
Hit 60/120fps by animating only `transform`/`opacity` and killing layout thrash.
page-transition-animation
Enter/exit page transitions in the Next.js App Router, plus the AnimatePresence exit fix.
accessible-animation
Tiered `prefers-reduced-motion` handling that degrades gracefully instead of nuking motion.
micro-interaction
Hover/press feedback, toggles, toasts, drawers, and list/layout motion with Framer Motion and CSS.
glassmorphism
Frosted-glass / Apple "Liquid Glass" UI — backdrop-filter panels, edge highlights, refraction, and animated specular sweeps, with reduced-transparency fallbacks.
svg-animation
Stroke draw-on, path morphing, motion-along-path, and animated icons/gradients/filters.
lottie-animation
Integrate, control, theme, and export Lottie/dotLottie across web, iOS, Android, and React Native.
ascii-animation
Generative ASCII fields and image/video/3D-to-ASCII for terminals, canvas, and Three.js.
animation-principles
Tech-agnostic timing, easing, and the 12 principles for natural-feeling motion.
color-motion
Palettes, gradients, perceptual interpolation (OKLCH/Lab), grading, and render color management.
shot-composition
Grids, safe areas, focal hierarchy, and 2D/3D camera framing across aspect ratios.
motion-art-direction
Senior creative direction — motion language, tone, pacing, hierarchy, and restraint.
after-effects
AE expressions, rigging, export recipes, performance triage, and project hygiene.
beat-sync-editing
Cut to the beat — editing rhythm, transitions, retiming, and speed ramps.
remotion-video
Programmatic, data-driven video in React rendered to MP4/GIF via CLI or renderer.
logo-animation
Logo reveals, stingers, splash screens, and loaders for web, video, and app.
motion-background
Mesh gradients, shader auroras, particle constellations, and subtle looping backgrounds.
kinetic-typography
Animate text — character/word/line staggers, split-text reveals, variable-font weight transitions, text on a path, and lyric/title cards across CSS, GSAP SplitText, Framer Motion, and Remotion.
creative-brief
Turn a fuzzy client ask into a structured, sign-off-ready motion brief plus the exact clarifying questions to send back.
motion-pricing
Pick a pricing model, run the day-rate math, account for cost drivers, and output a clean line-itemed quote.
client-revisions
Cap revision rounds, write SOW language, translate vague feedback, and decline out-of-scope work as a change order.
video-delivery-specs
Per-platform spec sheets, a cutdown matrix, caption/accessibility notes, and a pre-delivery QC checklist.
brand-motion-guidelines
Author a brand motion system with easing/timing tokens, a motion library, logo rules, and accessibility standards.
shader-glsl
Write GLSL fragment shaders — gradients, noise/fbm, SDFs, domain warping, image transitions, and Three.js ShaderMaterial wiring.
threejs-animation
Build web 3D motion — scenes, camera moves, GLTF clips, instancing, scroll-linked 3D, React Three Fiber, and leak-free GPU disposal.
particle-system
Drive emergent motion — confetti/snow/smoke/sparks, flow fields, curl noise, connected-dot networks, and GPU `Points` shaders.
manim
Build math/physics/CS animations in Python with Manim CE — Scenes & Mobjects, animations, LaTeX/MathTex equation morphs, graphs & updaters (ValueTracker), 3D & moving camera, and CLI rendering to MP4/GIF with a render-a-frame-first verify loop.
generative-illustration
Generate isolated illustration assets with AI, composite them as sprites, and animate them frame-accurately into poetic, concept-driven motion. Covers asset prompting, background-stripping, a deterministic seek-harness render, and the craft (causality, restraint, rhythm).
javascript-animation-skills
Every frame drawn in JavaScript: zero-asset canvas films + code-made music · 2 skills
Or make it in iArtjavascript-animation
Short animated films computed on an HTML canvas: stories, explainers, loops, picture books from your photos. A drawing library (hand-drawn ink, picture-book illustration, spot-color print, single-line engraving, words as shapes, marker fills), a seek-and-render harness to MP4, contact sheets, and a zero-asset audit.
soundtrack
Music written in code with Web Audio for each film, living inside the same page and rendered offline to WAV. Two templates (a groove with four instrument kits, a music box) only when you ask for them. A tempo map lands every scene cut on a downbeat, marked by harmony rather than volume. A sync check fails the render if a cut misses the beat or the music jumps loud enough to startle. Also works with AI-generated or your own music.
lower-thirds-skills
Streamers, podcasters & editors: transparent lower thirds for OBS, Premiere, Resolve · 1 skill
Or make it in iArtlower-thirds
Animated lower thirds with a real transparent background, drawn in JavaScript on a canvas and rendered to WebM with alpha for OBS, or ProRes 4444 for Premiere, Resolve and Final Cut.
b-roll-skills
YouTubers, course creators & editors: b-roll motion graphics for talking-head videos, drawn from what is said · 1 skill
Or make it in iArttalking-head-b-roll
Transcribes a talking-head recording, decides line by line when to show the speaker or a graphic, draws every graphic from what is said, and renders the finished MP4.
talking-head-skills
Creators & educators: generate talking-head footage from photos and a voice, then combine it with narration and motion graphics · 1 skill
Or make it in iArttalking-head
Makes AI talking-head shots from your photos and voice for a new script, with narration and editable motion graphics.
Or let iArt run the whole pipeline
These skills are the craft inside iArt: the strongest DeepSeek animation agent and the cheapest Claude animation agent. On Claude, prebuilt scaffolding, context design and tool design reach the same quality at about a fifth of the cost of running the model yourself.
- Cost at the same quality
- 1/5
- of the cost on Claude, at the same quality
- Ablation runs
- 10,000+
- ablation runs on Claude behind that number
Questions
What is a skill?
A self-contained folder (SKILL.md plus references) that teaches an AI coding agent one motion-graphics workflow, such as kinetic typography, beat-synced cuts or frame-accurate data charts. No fine-tuning and no plugin runtime: just the know-how, in a format every major agent already reads.
Which agents can use them?
Claude Code, Cursor, Codex and 40+ other agents. Install a pack with npx skills add, or add it to Claude Code as a plugin marketplace.
How do the skills check their own work?
Skills that produce a visual ship a deliver-and-verify loop and a small scripts toolkit: freeze a frame, tile a contact sheet, probe the encoded MP4. The agent inspects its own output instead of hoping. Web skills render a standalone HTML page; video skills render with Remotion or Manim.
Are they free to use?
Yes. Every pack is MIT licensed, for personal and commercial work.
How is this different from iArt?
The skills are the open-source craft inside iArt. iArt runs the whole pipeline for you: prebuilt scaffolding, context design and tool design reach the same quality at about 1/5 of the cost of running the model yourself, averaged over 10,000+ ablation runs on Claude.
All 19 packs, one hub
Each pack installs on its own. The hub lists them all and gets every new one first.
Star the hub on GitHub