motion-art-direction
This skill should be used when the user asks to "direct a motion graphics video", "do creative/art direction for a video", "define a motion language", "set the tone and pacing", "make the animation feel consistent", "decide what to animate (and what not to)", "turn a brief/brand into motion choices", or needs the senior creative judgment that sits above specific techniques (gsap/lottie/shader). Covers motion language, tone & energy, pacing/rhythm, motion hierarchy, restraint, and cross-shot consistency.
- Installs
- 3.4K
- Last 24h
- +114
- Trending rank
- #1838
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/iart-ai/motion-design-skills --skill motion-art-direction- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads motion-art-direction automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Motion Direction
Make the creative decisions for a motion piece before anyone animates a frame. Direction is the judgment layer: it turns a brief and a brand into a small, repeatable set of motion rules — one easing vocabulary, one timing scale, one transition family — so every shot feels like it came from the same hand. Good direction is mostly subtraction: deciding what NOT to move.
When to use
- Starting any piece — explainer, launch film, UI demo, data story, loop — and the look/feel isn't decided yet.
- Animation feels "busy", "cheap", or "inconsistent" and the cause is decisions, not craft.
- Orchestrating other skills (gsap/lottie/shader/three.js): direction sets the rules they execute.
- Translating a brand or brief into directable, written choices a team (or an agent) can follow.
The one rule
Define the motion language first, then animate to it. A motion language is a short spec — pick one of each: easing family, base timing unit, transition family, stagger rhythm, motion intensity. Everything in the piece obeys it. Consistency reads as confidence; variety reads as noise. When in doubt, reuse, don't invent.
Direction workflow
| Step | Decision | Output |
|---|---|---|
| 1. Brief | Audience, one message, platform, duration, mood (3 adjectives) | One-line creative intent |
| 2. Tone & energy | Where it sits on calm↔kinetic and soft↔sharp | A point on the matrix below |
| 3. Motion language | Lock the spec table | The motion-language spec (filled) |
| 4. Hierarchy | Rank what moves: hero / support / texture | Motion hierarchy list |
| 5. Restraint pass | Cut motion that doesn't carry meaning | List of what stays static |
| 6. Shot direction | Note intent per shot, not keyframes | Direction notes (see template) |
| 7. Consistency check | Audit against the spec | Pass/fail per shot |
Tone & energy matrix
Place the piece on two axes; the cell dictates the motion language defaults.
| Soft (organic, eased) | Sharp (precise, snappy) | |
|---|---|---|
| Calm | Luxury, wellness, editorial — slow, long eases, generous holds, minimal stagger | Premium tech, fintech — deliberate, clean linear-ish moves, tight but unhurried |
| Kinetic | Playful, lifestyle, kids — bouncy/overshoot, springy, loose timing | Sports, hype, gaming — fast cuts, hard snaps, aggressive overshoot on beats |
Pick one cell and commit. Mixing cells within a piece is the most common cause of "inconsistent" motion.
Motion personality (named presets)
The tone matrix tells you where the piece sits; a motion personality is the named, numeric preset you hand to whoever animates. Pick ONE per project and apply it everywhere. This is shared vocabulary — other skills (e.g. gsap-web, micro-interaction, the video packs) can just say "use the Premium personality."
| Personality | Duration | Signature easing | Overshoot | Reads as |
|---|---|---|---|---|
| Playful | 150–300ms | ease-out-back / cubic-bezier(0.34,1.56,0.64,1) | 10–20% | fun, bouncy, whimsical |
| Premium | 350–600ms | cubic-bezier(0.4,0,0.2,1) | 0% | elegant, minimal, luxury |
| Corporate | 200–400ms | cubic-bezier(0.2,0,0,1) | 0–3% | clean, professional, trustworthy |
| Energetic | 100–250ms | ease-out-expo | 15–30% | bold, dynamic, hype |
Default: Corporate for UI/product, Playful for illustration/lifestyle. Maps onto the matrix — Premium≈calm-soft, Corporate≈calm-sharp, Playful≈kinetic-soft, Energetic≈kinetic-sharp. The personality fills the "easing family / base timing unit / motion intensity" rows of the spec below.
The motion-language spec
The core artifact. Fill every row with ONE choice and reuse it everywhere.
| Property | Choose one | Example (calm-sharp / premium tech) |
|---|---|---|
| Easing family | The signature curve for ~90% of moves | cubic-bezier(0.22, 1, 0.36, 1) (decelerate, soft landing) |
| Base timing unit | The atomic duration; build others as multiples | 0.4s (enters 0.4s, big moves 0.8s, micro 0.2s) |
| Transition family | How shots connect | Match-cut + crossfade only; no wipes/spins |
| Stagger rhythm | Delay between grouped elements | 60ms cascade, top-to-bottom |
| Motion intensity | Distance/scale/overshoot budget | Travel ≤ 24px, scale 0.96→1.0, overshoot ≤ 2% |
| Hold discipline | Minimum rest between moves | ≥ 0.3s of stillness after each beat |
Two eases maximum: one "in" (exits) and one "out" (entrances/landings). A third curve must justify its existence.
Motion hierarchy
Not everything earns motion. Rank every element, then animate down the list — and stop early. These three tiers are the universal three motion layers (see animation-principles): Hero = Primary, Support = Secondary, Texture = Ambient.
| Tier | What it is | How it moves |
|---|---|---|
| Hero | The one thing the shot is about | Gets the boldest, slowest, most-eased move; lands on the beat |
| Support | Context that helps the hero land | Smaller, faster, eased out of the way; never competes |
| Texture | Background, grain, ambient drift | Subliminal only — slow loops, low contrast, no hard cuts |
If two elements compete for the eye in one frame, the direction has failed. Demote one to support.
Restraint — what NOT to animate
The senior move. For each element ask: does the motion carry meaning? If not, hold it still.
- Don't animate the entire frame at once — stagger or hold a anchor so the eye has a home.
- Don't transition the transition (no animated wipe and a spin and a fade).
- Don't loop-animate text the viewer is still reading.
- Don't add overshoot to serious/financial content — it reads as toy-like.
- One "wow" moment per piece. A second one cancels the first.
Pacing & rhythm
Pacing is the edit's heartbeat. Vary it on purpose: tension (faster, tighter) → release (a hold). Map energy across the timeline before timing individual moves — most pieces want a low-energy open, a build, a peak, and a settled end card. Cut and land key moments on the audio (see launch-video for beat-syncing); silence and stillness are pacing tools, not gaps to fill.
Consistency check
Before sign-off, audit every shot against the spec table:
- Same easing family on comparable moves? (No stray
linearorease.) - All durations are multiples of the base unit?
- Only the chosen transition family between shots?
- Stagger rhythm identical across grouped reveals?
- Hold discipline respected — no two moves stacked without rest?
- Exactly one hero per frame?
Any "no" is a direction defect, not a craft preference — fix it before polishing.
Reference files
references/direction-playbook.md— worked examples of the motion-language spec for five tone cells, a full brief template, a shot-by-shot direction-notes template with example entries, brand→motion translation tables, an easing-vocabulary cheat sheet, and a complete pre-render direction checklist.
FAQ
What does the motion-art-direction skill do?
This skill should be used when the user asks to "direct a motion graphics video", "do creative/art direction for a video", "define a motion language", "set the tone and pacing", "make the animation feel consistent", "decide what to animate (and what not to)", "turn a brief/brand into motion choices", or needs the senior creative judgment that sits above specific techniques (gsap/lottie/shader). Covers motion language, tone & energy, pacing/rhythm, motion hierarchy, restraint, and cross-shot consistency.
How do I install motion-art-direction?
Run npx skills add https://github.com/iart-ai/motion-design-skills --skill motion-art-direction in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/motion-art-direction/ (personal) or .claude/skills/motion-art-direction/ (project).
Which AI agents can use motion-art-direction?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is motion-art-direction safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains motion-art-direction?
It is published by iart-ai in iart-ai/motion-design-skills. It has 3,443 recorded installs.
More from iart-ai/motion-design-skills
animation-principles
iart-ai/motion-design-skills
This skill should be used when the user asks to "make this animation feel natural", "fix motion that feels stiff/floaty/cheap", "my animation looks robotic", "choose an easing curve", "how do I use the Graph Editor", "add overshoot or bounce", "Easy Ease isn't enough", "make snappy motion", "pick a duration for this transition", "stagger a list animation", "sync animation to a beat", or "review motion for good timing". It is the tech-agnostic foundation for deciding how something should move.
shot-composition
iart-ai/motion-design-skills
This skill should be used when the user asks to "compose a frame", "set up a grid", "plan shot composition", "place the focal point", "decide where elements enter and exit", "add a parallax/camera move", "adapt a layout for 16:9 / 9:16 / 1:1", or "keep content inside safe areas". Covers grids, safe areas, focal hierarchy, and 2D/3D camera framing.
beat-sync-editing
iart-ai/motion-design-skills
This skill should be used when the user asks to "cut to the beat", "fix the pacing", "edit this sequence", "sync cuts to music/BPM", "add a match cut / J-cut / L-cut", "build a speed ramp", or "plan a shot sequence / edit timeline". Covers editing rhythm, transitions, retiming, and translating an edit plan to an NLE or a code timeline (Remotion/AE frames).
color-motion
iart-ai/motion-design-skills
This skill should be used when the user asks to "build a color palette for a motion piece", "make a gradient background", "animate a color transition", "interpolate colors smoothly", "fix muddy/gray gradients", "convert colors to OKLCH", "color-grade a video for mood", "fix washed-out After Effects renders", "gamma shift", "Rec.709 vs sRGB", "colors shifted after rendering", or "match preview to final video". Covers palette construction, gradients, perceptual interpolation (OKLCH/Lab), grading order, and video/render color management.
logo-animation
iart-ai/motion-design-skills
This skill should be used when the user asks to "animate our logo", "make a logo intro/stinger", "build a brand reveal", "create an app splash animation", "loop a loader logo", "draw on our SVG mark", "morph an icon into the wordmark", or "sync the logo to a sound-logo". Covers web (SVG/Lottie), video, and app-splash delivery.
after-effects
iart-ai/motion-design-skills
This skill should be used when the user asks anything about Adobe After Effects — to "write an After Effects expression", "make a wiggle / loopOut / inertial bounce", "rig a control with a slider / null", "build a MOGRT / Essential Graphics template", "export AE to Lottie or Media Encoder"; OR to "export from After Effects", "export with transparency / an alpha channel", "fix a black background on export", "choose ProRes vs H.264", "which codec / what bitrate for 1080p / 4K", "stop H.264 disappearing from the Render Queue"; OR when "After Effects is slow / laggy / crashing / froze", "RAM preview won't play in real time", "AE is using all my memory / render takes forever", "how do I speed up After Effects"; OR to "organize my After Effects project", "relink missing footage", "fix broken links after moving files", "set a folder structure / naming conventions", "batch rename layers", or "write an ExtendScript / .jsx script". Covers expressions & rigging, export recipes, performance triage
Popular media & creative skills
hyperframes
heygen-com/hyperframes
Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.
media-use
heygen-com/hyperframes
Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.
hyperframes-registry
heygen-com/hyperframes
About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.
hyperframes-creative
heygen-com/hyperframes
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.
ai-video-generation
101-skills/superpowers
Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse
ai-image-generation
101-skills/superpowers
Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image