---
name: svgator-motion-design
description: >
  Art-direct substantial SVGator asset creation or revision when composition, motion language,
  choreography, or interaction quality materially matters. Use alongside svgator-animate for creative
  authoring of standalone SVG assets. Do not use for connection setup, read-only audits, export-only work,
  trivial metadata edits, or application and framework UI motion.
license: MIT
metadata:
  author: "SVGator; adapted by CFMoon Software"
  version: "3.0.0-cfmoon.1"
  upstream_commit: "9257ee3d92e89cc95244e1ae879422551b98897b"
---

# SVGator Motion Design

This is CFMoon Software's adaptation of SVGator's MIT-licensed motion-design
skill. The pinned upstream source remains under `vendor/svgator-skills`; see
`THIRD_PARTY_NOTICES.md` at the plugin root for provenance and license terms.

Use this skill as the creative layer and `svgator-animate` as the operational
layer. This guidance does not authorize creating, duplicating, editing,
rendering, or exporting a project beyond the user's request. Brand assets,
supplied geometry, accessibility requirements, and an intentionally restrained
brief outrank the general craft heuristics below.

You are the designer and motion director, not the tweening engine. The job is to decide what the piece looks like, what moves and why it feels right, and how it answers the user if it's interactive — then let the animation carry a bit of story, weight, and life. This skill is the craft layer — taste and direction; the SVGator MCP's tools do the building. It works in three phases: **design the still, direct the motion, wire the interaction.**

**Reach for this when** the deliverable is a self-contained SVG asset and the
request needs meaningful art direction: an animated icon, logo reveal, loader,
illustration, sticker, explainer beat, hero loop, or interactive asset. Read
only the references relevant to the brief. Interactivity is a property of the
asset, delivered by SVGator's own triggers and Player API →
[director/interactivity.md](director/interactivity.md).

**Reach elsewhere when** the request is connection setup, an evidence-only
audit, a pure export, a simple edit that does not need art direction, or live
application UI behavior such as React state, CSS transitions, or page routing.

## Inside the SVGator MCP

This is the craft half of the toolset; `describe_shape` and the authoring tools are the mechanics half. They hand off in one direction:

**Check actual capabilities first.** If the connected server exposes
`list_templates`, it can be useful for a generic brief. If it is absent, skip
template discovery without simulating a result. A template is read-only, so
edit only a user-authorized duplicate returned by `duplicate_project`. Author
from scratch when the brief is specific to the user or no suitable supported
template path exists.

1. **Design the still** — if you're drawing the artwork (not animating supplied art), get composition, color, and form right first (everything under "Design the still frame first" below). A weak drawing can't be saved by motion.
2. **Decide the motion** — the read, the personality, the one move, the timing (everything below).
3. **Decide the interaction** — if the piece responds to input, choose the trigger and the response alongside the motion → [director/interactivity.md](director/interactivity.md).
4. **Confirm exact shapes** — call `describe_shape` for any element or channel before you write it; never guess field names.
5. **Author only within scope** — use `create_project` or `edit_part` through
   the operational workflow in `svgator-animate`, with animators nested by
   group → channel and unrelated content preserved.
6. **Wire a requested trigger** — interactivity ships at export, not in the
   project JSON. Use the live `export_project` schema rather than remembered
   fields. → [reference/interactivity.md](reference/interactivity.md).
7. **Verify proportionately** — re-read the saved structure and animation
   settings. Render or export only when requested or explicitly justified for
   delivery, after checking the account's limits. Never claim visual playback
   was reviewed from structure alone.

Design first, build second. A technically valid animation with no craft — or motion laid over a generic, badly-composed drawing — is the exact failure this skill exists to prevent.

## Design the still frame first

If you're drawing the artwork — not animating something supplied — the still
has to work before it moves. Motion amplifies both strengths and weaknesses.
Run a **visual-specificity check** on the frozen frame: does it express this
brief and brand, or could it belong to almost any generated composition? Fix
generic hierarchy, palette, or form before keyframing.

Three things carry the still:
- **Composition** — one clear hero, hierarchy that survives the squint test, generous negative space, off-center balance over the dead-center reflex. → [design/composition.md](design/composition.md)
- **Color** — a committed palette grounded in the supplied brand and brief;
  avoid reflexive generated-tech palettes unless they are genuinely the right
  choice, and use black, white, gradients, or accents according to context and
  contrast needs. → [design/color.md](design/color.md)
- **Form & lettering** — one shape language (corners, stroke weight), quiet tinted depth over generic drop-shadows, non-reflex type set with real hierarchy. → [design/form-and-type.md](design/form-and-type.md)

Skip this phase when the artwork is provided and only motion (or interactivity) is asked for.

## Your instrument — what SVG motion is actually made of

Good motion design starts from knowing your medium's real expressive range. In SVGator, these are the strings you play. Choose the one that *carries the meaning*, not just the one that happens to move.

| The move | What it says | Reach for it when |
|----------|--------------|-------------------|
| `transform.translate` / `scale` / `rotate` | arrival, importance, energy, life | entrances, emphasis, spin, bounce |
| `transform.origin` | *where* a thing pivots and grows from | always set it to the visual center before you scale or rotate |
| `stroke.dashOffset` (+ `dashArray`) | a line drawing itself — handwriting, building, self-assembly | logo strokes, signatures, outlined icons, connectors |
| `shape.path` morph | one thing becoming another | icon-to-icon, liquid blobs, a shape that transforms |
| `fill.paint` / gradient drift | state, mood, warmth, a light moving through | success/error color, ambient atmosphere |
| `compositing.opacity` | presence and absence | fades — but never carrying a moment alone |

One primary channel and one supporting channel are often enough; simpler or
richer briefs may call for fewer or more. A move only lands if its easing has
feeling — which SVGator gives you per keyframe, with an unbounded curve you can
push past 1 to spring into place with no extra keyframes. That single detail is
where a lot of the craft lives → [reference/timing-easing.md](reference/timing-easing.md).

## Name the piece before you touch a keyframe

Each kind of piece has its own clock, its reason to move, and its way to fail. Pin the type and half the decisions settle themselves — how long, loop or land, which channels do the talking, where the craft has to be flawless.

→ **[reference/output-types.md](reference/output-types.md)** — icon, logo reveal, loader, illustration, sticker, explainer, data viz, hero loop: the durations, channels, signature move, and trap for each.

## The read — decide it before you build it

0. **Does the artwork exist, or must I design it?** If you're drawing it, make the still frame good first — composition, color, form (→ "Design the still frame first" above). If it's supplied, skip to step 1.
1. **What is it, really?** One shape or a whole scene? That sets the type above, and the scale of everything after.
2. **What should it make someone feel?** Joy, calm, precision, energy. The feeling picks the easing, the pace, the amplitude — before any channel does. → [director/emotion-mapping.md](director/emotion-mapping.md)
3. **What's its personality?** Playful, Premium, Corporate, Energetic — read it off the artwork and the brand, then hold it consistently. → [director/motion-personality.md](director/motion-personality.md)
4. **What's the tiny story?** Setup → action → resolution, even inside 800ms. Does it land or loop? → [director/narrative-structure.md](director/narrative-structure.md)
5. **What's the one move that carries it?** Pick the channel that means what you're saying, add one to support it. → [reference/property-meaning.md](reference/property-meaning.md)
6. **How is it timed and eased?** Duration from the piece type; a felt curve on every move. → [reference/timing-easing.md](reference/timing-easing.md)
7. **Would a supporting layer improve the read?** Add secondary or ambient
   motion only when it strengthens the piece. → below.
8. **Does it respond to input?** If hover/click/scroll/Player API drives it, decide the trigger and the response alongside the motion. → [director/interactivity.md](director/interactivity.md)

> Stuck on step one? [director/decision-framework.md](director/decision-framework.md) walks it from purpose to move.

## Layer motion according to the piece

Richer pieces often benefit from coordinated layers. Small icons, restrained
brands, and short interaction feedback may intentionally use fewer. Add only
the layers that make the brief clearer:

- **Primary** — the one move the eye follows. Full amplitude.
- **Secondary** — the supporting cast that makes it believable: a shadow reacting, a trailing part, an offset stroke. 30–50%, and it arrives 50–150ms *late* — that lag is what sells it.
- **Ambient** — the life underneath: a slow drift, a breath, a gradient shifting. 10–20%, never asking for attention.

A logo mark might scale in (primary), its wordmark strokes draw on behind it
(secondary), and a soft glow breathe under the whole thing (ambient). Use that
depth when the brief calls for richness; a restrained mark may need only the
primary move. → [director/core-philosophy.md](director/core-philosophy.md)

## Craft heuristics — adapt them to the brief

1. **Use linear easing deliberately.** It fits continuous spin and progress;
   spatial entrances usually benefit from a purposeful curve.
2. **Give important fades physical context when useful.** Pair opacity with a
   subtle move or scale when the moment needs weight; preserve a simple fade
   when restraint or accessibility calls for it.
3. **Pivot before you scale or rotate.** Set `transform.origin` at the visual center, or the element swings from its corner.
4. **Use supporting layers proportionately.** Primary motion may stand alone
   for a tiny or intentionally minimal asset; richer scenes usually need a
   secondary response or ambient layer.
5. **Loops are judged on their worst repeat.** Match the first and last pose so the seam is invisible (or ping-pong it), and leave nothing clipping at the edge when it springs or floats.
6. **The still stands on its own.** If you drew the artwork, it must pass the
   visual-specificity check before a single keyframe.
7. **An interactive piece acknowledges every input** — and its exit is usually its entrance reversed, not a second animation.

→ Full gate: [reference/quality-checklist.md](reference/quality-checklist.md) · When it moves but looks wrong: [reference/troubleshooting.md](reference/troubleshooting.md)

## Personality at a glance

Pick one and commit — a consistent signature is what makes a set of animations feel like one hand made them.

| | Beats run | Signature curve | Spring (bezier y past 1) |
|--|-----------|-----------------|---------------------------|
| **Playful** | 200–350ms | ease-out-back | ~1.2–1.4 |
| **Premium** | 350–700ms | (0.4, 0, 0.2, 1) | none — clean, no bounce |
| **Corporate** | 200–400ms | (0.2, 0, 0, 1) | ≤ ~1.05, barely there |
| **Energetic** | 100–250ms | ease-out-expo | ~1.4–1.55 |

→ [director/motion-personality.md](director/motion-personality.md) · overshoot budget in [reference/timing-easing.md](reference/timing-easing.md)

## Choreography — when more than one thing moves

- **Lead with the hero.** One element enters first or biggest; the eye needs somewhere to land.
- **Give long traversals internal shape.** A keyframe that changes direction,
  speed, or arc can keep movement across much of the canvas from feeling flat.
- **Stage crowds for legibility.** Stagger groups when simultaneous motion
  muddies the read; keep the overall cadence appropriate to the piece.
- **Counter-motion and follow-through** are where scenes come alive: the hero lifts, the shadow drops and softens.

→ [director/choreography.md](director/choreography.md)

## Where the deeper craft lives

**Design** (`design/`) — the still frame, before it moves
- [composition.md](design/composition.md) — hierarchy, the squint test, negative space, asymmetry, optical alignment
- [color.md](design/color.md) — committed palettes, OKLCH thinking, tinted neutrals, the banned AI palettes
- [form-and-type.md](design/form-and-type.md) — shape language, materiality, generic-treatment checks, display lettering

**Direction** (`director/`) — the thinking
- [core-philosophy.md](director/core-philosophy.md) — layers, attention, the anti-flat rules
- [decision-framework.md](director/decision-framework.md) — from purpose to the actual move
- [disney-principles.md](director/disney-principles.md) — the twelve, tuned for SVG
- [motion-personality.md](director/motion-personality.md) — the four archetypes + a brand's motion signature
- [emotion-mapping.md](director/emotion-mapping.md) — feeling → motion, and color's role
- [choreography.md](director/choreography.md) — coordinating a cast
- [narrative-structure.md](director/narrative-structure.md) — setup → action → resolution
- [context-adaptation.md](director/context-adaptation.md) — where the piece lives and ships (embed, loop, reduced-motion, export target)
- [interactivity.md](director/interactivity.md) — designing motion that answers to input: affordance, feedback, hover-reveal / toggle / scroll-scrub

**Patterns** (`patterns/`) — the moves, worked out
- [entrance-exit.md](patterns/entrance-exit.md) · [state-feedback.md](patterns/state-feedback.md) · [ambient-continuous.md](patterns/ambient-continuous.md) · [multi-element.md](patterns/multi-element.md) · [signature-effects.md](patterns/signature-effects.md)

**Reference** (`reference/`) — the lookups
- [output-types.md](reference/output-types.md) — the piece-type playbook
- [property-meaning.md](reference/property-meaning.md) — what each channel connotes
- [timing-easing.md](reference/timing-easing.md) — durations, curves, the overshoot trick
- [interactivity.md](reference/interactivity.md) — SVGator triggers, actions, and the Player API: how interactivity ships
- [quality-checklist.md](reference/quality-checklist.md) · [troubleshooting.md](reference/troubleshooting.md)