keithrana/cycle-atlas
1
0 Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Add motion design skills pack

Browse Source 
Installed via npx skills add iart-ai/motion-design-skills. Kept the
project's existing remotion-video skill unchanged.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01E35uEC1pGu95tUpM4b815L
This commit is contained in:
Claude committed 2026-10-18 21:56:31 +00:00
1 parent 0b42fdeae1
commit d4b3cf1b85
46 files changed
+4384
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.agents/skills/motion-art-direction/README.md
View File
Whitespace-only changes.
.agents/skills/motion-art-direction/SKILL.md
+114
View File
@@ -0,0 +1,114 @@
---
name: motion-art-direction
description: 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.
version: 0.1.0
---
# 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 `linear` or `ease`.)
- 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.
.agents/skills/motion-art-direction/references/direction-playbook.md
+184
View File
@@ -0,0 +1,184 @@
# Motion Direction Playbook
Depth behind the SKILL.md frameworks: a brief template, filled motion-language specs for five tone cells, brand→motion translation, a direction-notes template with worked entries, an easing cheat sheet, and a pre-render checklist.
## Creative brief template
Fill before any other decision. One line per row — if a row can't be answered, the piece isn't ready to direct.
```
PIECE: <name / working title>
AUDIENCE: <who, and what they already know>
ONE MESSAGE: <the single thing they remember after watching>
PLATFORM: <YouTube / Reels / in-app / landing hero — sets aspect, sound, duration>
DURATION: <seconds; shorter = fewer ideas, not faster ideas>
MOOD: <exactly 3 adjectives, e.g. "confident, precise, warm">
BRAND CUES: <colors, type, logo motion rules, any existing motion system>
CONSTRAINTS: <must-include / must-avoid; legal supers; localization>
REFERENCE: <1–3 links + one line on WHAT to borrow from each>
```
The 3 adjectives are load-bearing: they resolve every later judgment call. "Confident, precise, warm" rules out bouncy overshoot (not precise) and cold linear snaps (not warm) on its own.
## Filled motion-language specs (five tone cells)
Each is internally consistent — copy the closest one and adjust. Easings are CSS `cubic-bezier`; the same curves map to GSAP eases and Lottie keyframe handles.
### Calm + Soft — luxury / wellness / editorial
| Property | Choice |
|---|---|
| Easing | `cubic-bezier(0.4, 0, 0.2, 1)` in/out, long tails |
| Base unit | 0.6s (micro 0.3s, hero 1.2s) |
| Transition | Slow crossfade + gentle scale; no hard cuts |
| Stagger | 120ms, generous |
| Intensity | Travel ≤ 16px, scale 0.98→1.0, zero overshoot |
| Hold | ≥ 0.6s stillness; let frames breathe |
### Calm + Sharp — premium tech / fintech
| Property | Choice |
|---|---|
| Easing | `cubic-bezier(0.22, 1, 0.36, 1)` decel; exits `cubic-bezier(0.4, 0, 1, 1)` |
| Base unit | 0.4s |
| Transition | Match-cut + crossfade only |
| Stagger | 60ms cascade |
| Intensity | Travel ≤ 24px, scale 0.96→1.0, overshoot ≤ 2% |
| Hold | ≥ 0.3s |
### Kinetic + Sharp — sports / hype / gaming / launch
| Property | Choice |
|---|---|
| Easing | `cubic-bezier(0.16, 1, 0.3, 1)` hard-out; snaps near-instant |
| Base unit | 0.25s (micro 0.12s) |
| Transition | Hard cuts on beats; speed-ramp into drops |
| Stagger | 40ms, tight machine-gun |
| Intensity | Big travel, scale 1.18→1.0 overshoot on impact |
| Hold | ≥ 0.2s, brief — energy over rest |
### Kinetic + Soft — playful / lifestyle / kids
| Property | Choice |
|---|---|
| Easing | Spring / `cubic-bezier(0.34, 1.56, 0.64, 1)` overshoot |
| Base unit | 0.4s, loose |
| Transition | Bouncy pushes, squash-and-stretch wipes |
| Stagger | 80ms, irregular feels human |
| Intensity | Generous bounce, secondary follow-through |
| Hold | ≥ 0.3s |
### Neutral data-story — explainer / dashboard / report
| Property | Choice |
|---|---|
| Easing | `cubic-bezier(0.25, 0.1, 0.25, 1)` calm in/out |
| Base unit | 0.5s; count-ups 0.8–1.2s |
| Transition | Cross-dissolve between data states; never wipe a chart |
| Stagger | 80ms per series/bar |
| Intensity | Number eases to value; axes static; no overshoot on quantities |
| Hold | ≥ 0.5s on each datapoint so it can be read |
## Brand → motion translation
Brands describe themselves in adjectives; direction converts those to motion parameters.
| Brand word | Easing | Timing | Intensity | What to avoid |
|---|---|---|---|---|
| Premium / luxury | Long, soft decel | Slow, generous holds | Minimal travel, no overshoot | Bounce, fast cuts, spins |
| Trustworthy / precise | Clean decel, symmetric | On-grid, multiples of base | Small, controlled | Wobble, irregular stagger |
| Energetic / bold | Hard-out, snappy | Fast, syncopated | Big scale, overshoot on beats | Slow fades, dead air |
| Friendly / human | Slight overshoot/spring | Loose, slightly irregular | Soft bounce, follow-through | Robotic linear, perfect symmetry |
| Innovative / techy | Decel with subtle anticipation | Tight, layered staggers | Crisp, geometric | Skeuomorphic squash, grunge |
Map only the 2–3 strongest brand words. Trying to honor every adjective produces mush.
## Direction-notes template (per shot)
Direct *intent*, not keyframes — let the technique skill choose exact values within the spec.
```
SHOT <n> [t = 0.0–0.0s]
PURPOSE: <why this shot exists — what the viewer should feel/learn>
HERO: <the one element; how it enters and lands>
SUPPORT: <secondary elements; how they yield to the hero>
TEXTURE: <ambient/background behaviour, if any>
TRANSITION IN/OUT: <from the locked transition family only>
BEAT: <audio mark the key move lands on, if scored>
NOTE: <any deliberate break from the spec + the reason>
```
### Worked example (Calm + Sharp, premium tech)
```
SHOT 3 [t = 6.0–9.5s]
PURPOSE: Reveal the dashboard as effortless and accurate.
HERO: Dashboard card scales 0.96→1.0 over 0.8s on the decel ease, soft landing.
SUPPORT: Three metric chips cascade in, 60ms stagger, 0.4s each, eased out so the
eye finishes on the card, not the chips.
TEXTURE: Grid lines drift 2px over 8s, 8% opacity — subliminal only.
TRANSITION IN/OUT: Match-cut from the prior logo mark / crossfade to shot 4.
BEAT: Card lands on the downbeat at 6.4s.
NOTE: No overshoot anywhere — this is financial data; overshoot reads as imprecise.
```
### Worked example (Neutral data-story, count-up)
```
SHOT 5 [t = 12.0–15.0s]
PURPOSE: Land the headline number ($1.4M) so it's read and believed.
HERO: Number eases from 0 to 1,400,000 over 1.1s; decelerates so the final
digits settle slowly and feel exact.
SUPPORT: Caption fades in after the count completes (not during) — don't make
the viewer read while a number is still moving.
TEXTURE: None. The frame holds still for 0.7s after — stillness sells accuracy.
TRANSITION IN/OUT: Cross-dissolve from the bar chart; cross-dissolve out.
NOTE: Hold the final value on screen ≥ 0.5s before any exit.
```
## Easing vocabulary cheat sheet
| Curve | `cubic-bezier` | Feel | Use for |
|---|---|---|---|
| Decelerate (ease-out) | `0, 0, 0.2, 1` | Arrives, settles softly | Entrances, landings — the workhorse |
| Accelerate (ease-in) | `0.4, 0, 1, 1` | Leaves with intent | Exits, things flying off |
| Standard (in-out) | `0.4, 0, 0.2, 1` | Smooth both ends | On-screen repositioning |
| Emphasized decel | `0.22, 1, 0.36, 1` | Confident, premium landing | Hero reveals (calm-sharp) |
| Hard out | `0.16, 1, 0.3, 1` | Snappy, energetic | Kinetic pieces, hype |
| Overshoot | `0.34, 1.56, 0.64, 1` | Springy, playful, alive | Friendly/kinetic-soft only |
Rules of thumb: entrances ease *out* (decelerate in), exits ease *in* (accelerate away). Avoid `linear` except for continuous loops (rotation, marquees, ambient drift). Never ship default `ease` — it's the un-decided curve and reads as unconsidered.
## Pacing map
Sketch energy across the timeline before timing any single move. A typical 30s arc:
```
energy
^ ____ peak (the one "wow")
| / \
| build/ \ settle
| / \____ end card hold
|__/
+----------------------------------> time
open build peak resolve
```
Vary deliberately: a hold after a fast sequence makes the next move hit harder. Density of cuts is a dial — turn it up for tension, down for gravity. Match key landings to audio beats where scored.
## Pre-render direction checklist
- [ ] Brief complete; one message and exactly 3 mood adjectives written down.
- [ ] Tone placed in a single cell of the energy matrix — not straddling two.
- [ ] Motion-language spec filled, every row a single choice.
- [ ] ≤ 2 primary easing curves used across the whole piece.
- [ ] All durations are multiples of the base unit.
- [ ] Only the chosen transition family appears between shots.
- [ ] Stagger rhythm identical across all grouped reveals.
- [ ] Every frame has exactly one hero; support never competes.
- [ ] Restraint pass done — listed what stays static and why.
- [ ] Hold discipline respected; no two moves stacked without rest.
- [ ] Exactly one "wow" moment.
- [ ] Numbers/quantities ease to value, hold ≥ 0.5s, and don't overshoot.
- [ ] Pacing map drawn; key moments land on beats (if scored).
- [ ] Brand cues honored; nothing animated that the brand wouldn't.
---
## Built by the team behind iart.ai
This skill is part of an open motion-graphics collection from iart.ai — the AI motion agent that turns data, scripts, and designs into editable motion graphics (Remotion → MP4). If you'd rather not hand-build this, iart.ai can act as the motion director — apply one consistent motion language and your brand across every shot, then render the piece. → [iart.ai](https://iart.ai/?utm_source=github&utm_medium=reference&utm_campaign=motion-design-skills&utm_content=ref_footer&utm_term=motion-art-direction)