@pixerate/editor 0.223.4 → 0.223.6

package/dist/tools/skill-evals.d.cts

@@ -20,7 +20,7 @@ export interface SkillEvalCheck extends SkillEvalToolCall {
 }
 export interface SkillEval {
     prompt: string;
-    fixture: SpreadsheetEvalFixture | ImageEvalFixture | VectorEvalFixture | PaintEvalFixture | VideoEvalFixture | ChartEvalFixture | DiagramEvalFixture;
+    fixture: SpreadsheetEvalFixture | ImageEvalFixture | VectorEvalFixture | PaintEvalFixture | VideoEvalFixture | ChartEvalFixture | DiagramEvalFixture | RichTextEvalFixture | AnimationEvalFixture;
     checks: SkillEvalCheck[];
     solution: SkillEvalToolCall[];
 }
@@ -77,6 +77,16 @@ export interface DiagramEvalFixture {
     /** Tool calls that build the starting diagram (`load_diagram_mermaid`), run in order. */
     setup?: SkillEvalToolCall[];
 }
+export interface RichTextEvalFixture {
+    editor: 'rich-text';
+    /** The starting document as HTML. */
+    html: string;
+}
+export interface AnimationEvalFixture {
+    editor: 'animation';
+    /** Tool calls that build the starting scene (`set_animation_artwork_svg`, `insert_shots`), run in order. */
+    setup?: SkillEvalToolCall[];
+}
 /** One eval file of a skill. */
 export interface SkillEvalFile {
     skill: string;

package/dist/tools/skill-evals.d.ts

@@ -20,7 +20,7 @@ export interface SkillEvalCheck extends SkillEvalToolCall {
 }
 export interface SkillEval {
     prompt: string;
-    fixture: SpreadsheetEvalFixture | ImageEvalFixture | VectorEvalFixture | PaintEvalFixture | VideoEvalFixture | ChartEvalFixture | DiagramEvalFixture;
+    fixture: SpreadsheetEvalFixture | ImageEvalFixture | VectorEvalFixture | PaintEvalFixture | VideoEvalFixture | ChartEvalFixture | DiagramEvalFixture | RichTextEvalFixture | AnimationEvalFixture;
     checks: SkillEvalCheck[];
     solution: SkillEvalToolCall[];
 }
@@ -77,6 +77,16 @@ export interface DiagramEvalFixture {
     /** Tool calls that build the starting diagram (`load_diagram_mermaid`), run in order. */
     setup?: SkillEvalToolCall[];
 }
+export interface RichTextEvalFixture {
+    editor: 'rich-text';
+    /** The starting document as HTML. */
+    html: string;
+}
+export interface AnimationEvalFixture {
+    editor: 'animation';
+    /** Tool calls that build the starting scene (`set_animation_artwork_svg`, `insert_shots`), run in order. */
+    setup?: SkillEvalToolCall[];
+}
 /** One eval file of a skill. */
 export interface SkillEvalFile {
     skill: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor",
-  "version": "0.223.4",
+  "version": "0.223.6",
   "description": "UI-agnostic rich text and media editing core library",
   "author": "Pixerate",
   "license": "MIT",

package/skills/README.md

@@ -61,6 +61,8 @@ request like "clean up this export" finds it.
 | [`pixerate-diagram-architecture`](pixerate-diagram-architecture/SKILL.md) | Diagram (`pixerate-diagram`) | Systems at one level of detail, store shapes, tiers and trust boundaries, flows labelled with protocols. |
 | [`pixerate-rich-text-report`](pixerate-rich-text-report/SKILL.md) | Rich text (`pixerate-rich-text`) | Reports with one title and a heading hierarchy, lists, tables and charts, and a consistency pass. |
 | [`pixerate-rich-text-revise`](pixerate-rich-text-revise/SKILL.md) | Rich text (`pixerate-rich-text`) | Proofreading, renaming terms with exceptions and tightening, as minimal targeted edits. |
+| [`pixerate-animation-motion-graphics`](pixerate-animation-motion-graphics/SKILL.md) | Animation (`pixerate-animation-editor`) | One idea per shot, staggered entrances, natural easing, holds to read, fitting a length, checks and export. |
+| [`pixerate-animation-logo-reveal`](pixerate-animation-logo-reveal/SKILL.md) | Animation (`pixerate-animation-editor`) | A short reveal built from the logo's parts, landing on the beat and ending on the held, finished logo. |
 | [`pixerate-talking-head-edit`](pixerate-talking-head-edit/SKILL.md) | Video (`pixerate-video-editor`) | Talking-head cleanup by transcript: fillers, long pauses and stutters found in one pass and cut as one plan reviewed before it applies. Owns the dialogue tools. |
 | [`pixerate-bgm-alignment`](pixerate-bgm-alignment/SKILL.md) | Video (`pixerate-video-editor`) | Background music: beats and cuts on the beat, ducking under speech, loudness in LUFS. Owns the music tools. |
 
@@ -127,7 +129,8 @@ same change.
   "vector", "width", "height", "setup" }` with commands that draw the starting art, 
   `{ "editor": "paint", "width", "height", "setup" }` `{ "editor": "video", "setup" }` or `{ "editor":
   "chart", "setup" }` `{ "editor": "diagram", "setup" }` with tool calls,
-  or `{ "editor": "rich-text", "html" }`), `checks` (a read-only
+  `{ "editor": "rich-text", "html" }`, or
+  `{ "editor": "animation", "setup" }`), `checks` (a read-only
   tool, or `run_command` with a read-only command such as `vector.list`, its `args`, what its result must match in `expect`, and `why`) and a `solution` (the
   tool calls an expert would make). The test proves each eval: some check fails on the fixture,
   and all pass after the solution. A model harness runs the same file with the model in place

package/skills/pixerate-animation-editor/SKILL.md

@@ -21,6 +21,14 @@ For errors, namespaced tool names and the generic command tools, see `pixerate-a
 The full command vocabulary (every type, option and default) is in
 [references/commands.md](references/commands.md).
 
+## Workflow skills
+
+For these jobs, load the workflow skill too: it has the method, the checks between steps and
+the pitfalls, and uses the tools below.
+
+- `pixerate-animation-motion-graphics`: shots, staggered entrances, easing, holds, fitting a length.
+- `pixerate-animation-logo-reveal`: a short reveal from the logo's parts, on the beat, ending held.
+
 ## Working method
 
 1. **Read.** `get_animation` for elements, shots with timing, clips, drivers and issues. If

package/skills/pixerate-animation-logo-reveal/SKILL.md

@@ -0,0 +1,103 @@
+---
+name: pixerate-animation-logo-reveal
+description: The logo reveal workflow in the Pixerate animation editor - a short branded intro or sting (two to four seconds) built from the logo's own parts - drawing or building the mark, bringing in the wordmark, landing beats on the music, ending on the complete logo held long enough to read, and exporting for video, web or Lottie. Use when asked to animate a logo, make a logo reveal, intro, outro, sting, bumper, brand animation or animated signature, sync a logo to music, or make a logo animation end cleanly, or when set_animation_artwork_svg, insert_shots, set_animation_settings or export_lottie are available. Load with pixerate-animation-editor, which lists every tool.
+metadata:
+  kind: workflow
+  reference: pixerate-animation-editor
+---
+
+# Animating a logo reveal
+
+A logo reveal is short and has one job: the viewer remembers the logo. It builds the logo
+from its own parts (the mark, then the wordmark, or the reverse), moves in a way that suits the
+brand, and ends on the complete, still logo long enough to read. Everything else is
+decoration and should be cut if the reveal runs long.
+
+This skill is the method. `pixerate-animation-editor` has the full tool reference and
+`references/commands.md` every command.
+
+## Goal and quality bar
+
+- Two to four seconds in total (`get_animation` `duration`), unless the brief says otherwise.
+- The logo is built from its parts in a clear order: the mark first (drawn on, popped or
+  assembled), then the wordmark.
+- It ends on the finished logo, exactly as in the brand artwork, held at least 0.5 s
+  (about 1 s for video).
+- The motion suits the brand: calm brands ease smoothly, playful ones can spring.
+- With music, the key moments land on beats.
+- `check_animation` shows no errors or warnings.
+
+## Inputs to confirm
+
+- **The logo artwork** (SVG with ids on the mark, the wordmark and any parts that move
+  separately).
+- **Length, use and music:** a video intro, a web header loop, an outro; the tempo if there
+  is music.
+- **Character:** calm, confident, playful, technical.
+
+## Working method
+
+1. **Read the artwork.** `get_animation` elements; if the logo is not loaded,
+   `set_animation_artwork_svg` with ids on its parts (outline text first; `get_text_layout`
+   shows letter units).
+   **Check:** every part you will animate has an id.
+2. **Plan the build** in two or three beats: the mark arrives, the wordmark follows, the logo
+   settles.
+3. **Write the reveal** as one or two shots with `insert_shots`: `enter` `style: "draw"` for an
+   outlined mark (or `pop`, `grow`, `iris`), then `enter` the wordmark (`slide`, `fade`, a
+   `wipe`, or `split: "letter"` for outlined text); `hold` at the end.
+   **Check:** `get_animation`: the mark's command starts before the wordmark's; the last shot
+   ends with a hold.
+4. **Hit the music.** `set_animation_settings` `beat` with the `bpm`; `get_timing_grid` lists the
+   beats (counted from 0 at the start: at 120 BPM beat 4 is at 2000 ms, the downbeat of bar 2);
+   give the wordmark's shot `at: { beat }`.
+   **Check:** the shot's `start` in `get_animation` is the beat's time.
+5. **Length and hold.** `fit_animation` with `seconds` and `keep` for the final hold, or
+   `update_shot` `hold` on the last shot.
+   **Check:** `duration` in range; the hold after the last command is long enough.
+6. **Check and export.** `check_animation`; `render_animation_frame` at the end (`shot`, `at:
+   "end"`) to see the finished logo; `export_lottie` for the web.
+
+## Decision table
+
+| Mark | Entrance |
+| --- | --- |
+| An outline or line mark | `enter` `style: "draw"` (outline, then fill) |
+| A solid, simple shape | `pop` or `grow`, `ease-out-back` |
+| A mark made of parts | `enter` parts with `stagger`, or `match` into place |
+| Outlined text wordmark | `enter` with `split: "letter"` |
+| A wordmark beside the mark | `slide` away from the mark, or `wipe` |
+| A calm brand | `fade`, `rise`, `ease-out`; no springs |
+| A playful brand | `pop`, springs, a small `pulse` on landing |
+
+## Recipes
+
+**Draw then word.** `insert_shots` `[{ id: "reveal", run: [{ type: "enter", targets: ["mark"],
+style: "draw" }, { type: "enter", targets: ["wordmark"], style: "slide", direction: "right" }],
+hold: 700 }]`.
+
+**Hold the end.** `update_shot` `{ shot: "reveal", set: { hold: 1000 } }`.
+
+**On beat 4 at 120 BPM.** `set_animation_settings` `{ beat: { bpm: 120 } }` → `update_shot`
+`{ shot: "word", set: { at: { beat: 4 } } }`.
+
+## Pitfalls
+
+- **Too long.** A reveal over four seconds loses the viewer; cut decoration first.
+- **Ending in motion.** The logo must be still and complete at the end; hold it.
+- **Distorting the logo** (stretching, recolouring) in the final frame; end on the brand
+  artwork.
+- **Live text** in the artwork may render with a fallback font; outline it first.
+- **Off-beat landings** with music feel wrong; cue shots to beats.
+- **Too many effects** compete with the logo; one entrance per part.
+
+## Tools used
+
+- `get_animation`, `get_text_layout`, `find_animation_elements`: read the logo's parts
+- `set_animation_artwork_svg`: load the logo with ids
+- `insert_shots`, `update_shot`, `add_commands`, `update_command`: build the reveal
+- `set_animation_settings`, `get_timing_grid`: music tempo and beats
+- `fit_animation`: hit the length
+- `check_animation`, `render_animation_frame`: check and look at the end frame
+- `export_lottie`, `export_flair_motion`: deliver
+- `undo_animation`: take back a step

package/skills/pixerate-animation-logo-reveal/evals/draw-then-word.json

@@ -0,0 +1,77 @@
+{
+	"prompt": "Make a logo reveal under three seconds: draw the circle mark on, then bring in the wordmark, and end holding the full logo for at least half a second.",
+	"fixture": {
+		"editor": "animation",
+		"setup": [
+			{
+				"tool": "set_animation_artwork_svg",
+				"args": {
+					"svg": "<svg viewBox=\"0 0 240 100\"><circle id=\"mark\" cx=\"50\" cy=\"50\" r=\"30\" fill=\"none\" stroke=\"#1d3557\" stroke-width=\"6\"/><rect id=\"wordmark\" x=\"100\" y=\"40\" width=\"120\" height=\"20\" fill=\"#1d3557\"/></svg>"
+				}
+			}
+		]
+	},
+	"checks": [
+		{
+			"why": "the mark is drawn on before the wordmark arrives",
+			"tool": "get_animation",
+			"expect": {
+				"$expr": "(() => { const cs = v.shots.flatMap((s) => s.commands); const m = cs.find((c) => c.targets.includes('mark') && (c.type === 'draw' || (c.type === 'enter' && c.style === 'draw'))); const w = cs.find((c) => c.targets.includes('wordmark') && c.type === 'enter'); return !!m && !!w && m.start < w.start; })()"
+			}
+		},
+		{
+			"why": "under three seconds, ending on a hold of at least half a second",
+			"tool": "get_animation",
+			"expect": {
+				"duration": {
+					"$max": 3000
+				},
+				"shots": {
+					"$expr": "(() => { const s = v[v.length - 1]; return s.end - Math.max(...s.commands.map((c) => c.end)) >= 500; })()"
+				}
+			}
+		},
+		{
+			"why": "no errors or warnings in the check",
+			"tool": "check_animation",
+			"expect": {
+				"errors": 0,
+				"warnings": 0
+			}
+		}
+	],
+	"solution": [
+		{
+			"tool": "insert_shots",
+			"args": {
+				"shots": [
+					{
+						"id": "reveal",
+						"label": "Logo reveal",
+						"run": [
+							{
+								"type": "enter",
+								"targets": [
+									"mark"
+								],
+								"style": "draw"
+							},
+							{
+								"type": "enter",
+								"targets": [
+									"wordmark"
+								],
+								"style": "slide",
+								"direction": "right"
+							}
+						],
+						"hold": 700
+					}
+				]
+			}
+		},
+		{
+			"tool": "check_animation"
+		}
+	]
+}

package/skills/pixerate-animation-logo-reveal/evals/hold-the-end.json

@@ -0,0 +1,76 @@
+{
+	"prompt": "The reveal ends too abruptly. Hold the finished logo on screen for about a second at the end.",
+	"fixture": {
+		"editor": "animation",
+		"setup": [
+			{
+				"tool": "set_animation_artwork_svg",
+				"args": {
+					"svg": "<svg viewBox=\"0 0 240 100\"><circle id=\"mark\" cx=\"50\" cy=\"50\" r=\"30\" fill=\"none\" stroke=\"#1d3557\" stroke-width=\"6\"/><rect id=\"wordmark\" x=\"100\" y=\"40\" width=\"120\" height=\"20\" fill=\"#1d3557\"/></svg>"
+				}
+			},
+			{
+				"tool": "insert_shots",
+				"args": {
+					"shots": [
+						{
+							"id": "reveal",
+							"run": [
+								{
+									"type": "enter",
+									"targets": [
+										"mark"
+									],
+									"style": "draw"
+								},
+								{
+									"type": "enter",
+									"targets": [
+										"wordmark"
+									]
+								}
+							],
+							"hold": 0
+						}
+					]
+				}
+			}
+		]
+	},
+	"checks": [
+		{
+			"why": "the last shot holds about a second after its last command",
+			"tool": "get_animation",
+			"expect": {
+				"shots": {
+					"$expr": "(() => { const s = v[v.length - 1]; const h = s.end - Math.max(...s.commands.map((c) => c.end)); return h >= 800 && h <= 1500; })()"
+				}
+			}
+		},
+		{
+			"why": "the reveal itself is unchanged",
+			"tool": "get_animation",
+			"expect": {
+				"shots": {
+					"$some": {
+						"id": "reveal",
+						"commands": {
+							"$length": 2
+						}
+					}
+				}
+			}
+		}
+	],
+	"solution": [
+		{
+			"tool": "update_shot",
+			"args": {
+				"shot": "reveal",
+				"set": {
+					"hold": 1000
+				}
+			}
+		}
+	]
+}

package/skills/pixerate-animation-logo-reveal/evals/on-the-beat.json

@@ -0,0 +1,106 @@
+{
+	"prompt": "The sting music is 120 BPM. Make the wordmark land on beat 4: its shot should start on that beat.",
+	"fixture": {
+		"editor": "animation",
+		"setup": [
+			{
+				"tool": "set_animation_artwork_svg",
+				"args": {
+					"svg": "<svg viewBox=\"0 0 240 100\"><circle id=\"mark\" cx=\"50\" cy=\"50\" r=\"30\" fill=\"none\" stroke=\"#1d3557\" stroke-width=\"6\"/><rect id=\"wordmark\" x=\"100\" y=\"40\" width=\"120\" height=\"20\" fill=\"#1d3557\"/></svg>"
+				}
+			},
+			{
+				"tool": "insert_shots",
+				"args": {
+					"shots": [
+						{
+							"id": "mark",
+							"run": [
+								{
+									"type": "enter",
+									"targets": [
+										"mark"
+									],
+									"style": "draw"
+								}
+							],
+							"hold": 0
+						},
+						{
+							"id": "word",
+							"run": [
+								{
+									"type": "enter",
+									"targets": [
+										"wordmark"
+									]
+								}
+							],
+							"hold": 800
+						}
+					]
+				}
+			}
+		]
+	},
+	"checks": [
+		{
+			"why": "a 120 BPM beat grid",
+			"tool": "get_timing_grid",
+			"expect": {
+				"grid": {
+					"bpm": 120
+				}
+			}
+		},
+		{
+			"why": "the wordmark's shot starts on beat 4",
+			"tool": "get_animation",
+			"expect": {
+				"shots": {
+					"$some": {
+						"id": "word",
+						"start": {
+							"$in": [
+								1500,
+								2000
+							]
+						}
+					}
+				}
+			}
+		},
+		{
+			"why": "no errors or warnings in the check",
+			"tool": "check_animation",
+			"expect": {
+				"errors": 0,
+				"warnings": 0
+			}
+		}
+	],
+	"solution": [
+		{
+			"tool": "set_animation_settings",
+			"args": {
+				"beat": {
+					"bpm": 120
+				}
+			}
+		},
+		{
+			"tool": "update_shot",
+			"args": {
+				"shot": "word",
+				"set": {
+					"at": {
+						"beat": 4
+					}
+				}
+			}
+		},
+		{
+			"tool": "check_animation"
+		}
+	]
+}

package/skills/pixerate-animation-motion-graphics/SKILL.md

@@ -0,0 +1,100 @@
+---
+name: pixerate-animation-motion-graphics
+description: The motion graphics workflow in the Pixerate animation editor - planning one idea per shot, staggered entrances, easing and springs that feel natural, timing and holds that let the viewer read, fitting a target length, syncing to music, checking for issues and exporting to Lottie or Flair. Use when asked to animate, add motion to, make an explainer, a title sequence, an animated infographic, a UI or icon animation, staggered or sequenced entrances, smoother or snappier motion, or to fit an animation to a length, or when insert_shots, add_commands, fit_animation or check_animation are available. Load with pixerate-animation-editor, which lists every tool.
+metadata:
+  kind: workflow
+  reference: pixerate-animation-editor
+---
+
+# Making motion graphics
+
+Motion graphics direct attention: each shot shows one idea, things enter in the order they
+should be read, motion eases the way real objects move, and the viewer gets time to read
+before the next change. Write whole shots at once, let the default durations set the pace, and
+change timing by shot (holds, speed, `fit_animation`) rather than nudging every command.
+
+This skill is the method. `pixerate-animation-editor` has the full tool reference and
+`references/commands.md` every command.
+
+## Goal and quality bar
+
+- One idea per shot, with a `label` saying what it shows.
+- Related elements enter in reading order with a short stagger (60-200 ms between them), not
+  all at once and not one long queue.
+- Every move and entrance eases (`ease-out` for things arriving, `ease-in` for leaving,
+  `ease-in-out` for moves, springs for playful motion); `linear` only for continuous motion
+  such as a rotation or a ticker.
+- Holds give the viewer time to read: about 0.5 s plus 0.3 s per short line of text.
+- The length fits the brief (`fit_animation`), and `check_animation` shows no errors or
+  warnings.
+
+## Inputs to confirm
+
+- **The message and order** the viewer should see things in.
+- **Length** and **where it plays** (a loop on a site, an ad slot, a video).
+- **Style:** calm and smooth, or snappy and playful; music and its tempo, if any.
+
+## Working method
+
+1. **Read.** `get_animation` for elements (ids, bounds), shots and issues. If there is no
+   artwork, `set_animation_artwork_svg` with an id on every element you will animate.
+2. **Plan the shots** in words: what enters, moves or changes in each, and in what order.
+3. **Write whole shots** with `insert_shots`: a `run` of commands with `targets`, `style`,
+   `stagger`, `ease`; leave `duration` out unless the pace must change; set `hold`.
+   **Check:** `get_animation`: each command's `start` and `end` are in the order you planned.
+4. **Stagger and ease.** One `enter` with several `targets` and a `stagger` for a group; `ease`
+   presets or springs on moves (`update_command` `set: { ease }` to fix one).
+   **Check:** per-target starts differ by the stagger; no move left `linear` unless meant.
+5. **Fit and cue.** `fit_animation` with `seconds` (and `keep` for shots whose pace matters,
+   such as a final hold); with music, `set_animation_settings` `beat` and shots `at: { beat }`
+   (see `pixerate-animation-logo-reveal`).
+   **Check:** `get_animation` `duration`.
+6. **Check.** `check_animation`: fix `too-fast`, `overlap`, `out-of-frame`, `enter-visible` and
+   the rest. `get_motion_path` for spacing and arcs.
+7. **Look and export.** `render_animation_frame` with `times` for a contact sheet; export with
+   `export_lottie` or `export_flair_motion` when asked.
+
+## Decision table
+
+| Want | Command and settings |
+| --- | --- |
+| A group appears in reading order | `enter` with several `targets`, `stagger` 60-200 |
+| Something arrives | `enter` (`fade`, `rise`, `slide`, `pop`), `ease-out` |
+| Something leaves | `exit`, `ease-in`, shorter than its entrance |
+| A position change | `move` with `by` or `to`, `ease-in-out` |
+| Playful, bouncy | `ease` `spring-bouncy` or `ease-out-back` |
+| Draw a line or outline | `draw`, or `enter` `style: "draw"` |
+| Attention on one element | `pulse`, `shake`, `wiggle` (sparingly) |
+| A set length | `fit_animation` with `seconds`, `keep` for fixed shots |
+
+## Recipes
+
+**Staggered entrance.** `insert_shots` `[{ id: "bars", label: "Bars enter", run: [{ type:
+"enter", targets: ["bar1", "bar2", "bar3"], style: "rise", stagger: 120 }], hold: 800 }]`.
+
+**Natural move.** `update_command` `{ shot, command, set: { ease: "ease-in-out" } }`.
+
+**Exactly four seconds.** `fit_animation` `{ seconds: 4 }`; then `check_animation` for
+`too-fast` if shots were compressed a lot.
+
+## Pitfalls
+
+- **Everything at once.** Simultaneous entrances give the eye nowhere to start.
+- **Linear moves** look mechanical; ease them.
+- **Hand-set durations everywhere** make pacing inconsistent; keep the defaults and change pace
+  per shot.
+- **No hold** at the end of a shot: the viewer cannot read it before it changes.
+- **Overlapping commands** on one element fight each other (`overlap` in `check_animation`).
+- **Elements without ids** in the artwork cannot be animated; add ids before importing.
+
+## Tools used
+
+- `get_animation`, `get_shot`, `find_animation_elements`, `describe_animation_command`: read scenes, elements and command fields
+- `set_animation_artwork_svg`: the artwork with ids
+- `insert_shots`, `update_shot`, `delete_shots`, `move_shot`: whole shots
+- `add_commands`, `update_command`, `delete_commands`, `move_command`: refine commands
+- `edit_animation`: several edits as one undo step
+- `fit_animation`, `set_animation_settings`, `get_timing_grid`: length, settings and cues
+- `check_animation`, `get_motion_path`, `render_animation_frame`: check and look
+- `export_lottie`, `export_flair_motion`: deliver
+- `undo_animation`: take back a step

package/skills/pixerate-animation-motion-graphics/evals/fit-length.json

@@ -0,0 +1,109 @@
+{
+	"prompt": "This animation needs to be exactly 4 seconds long for the ad slot. Keep the pacing natural.",
+	"fixture": {
+		"editor": "animation",
+		"setup": [
+			{
+				"tool": "set_animation_artwork_svg",
+				"args": {
+					"svg": "<svg viewBox=\"0 0 200 100\"><rect id=\"bar1\" x=\"20\" y=\"20\" width=\"20\" height=\"60\"/><rect id=\"bar2\" x=\"60\" y=\"20\" width=\"20\" height=\"60\"/><rect id=\"bar3\" x=\"100\" y=\"20\" width=\"20\" height=\"60\"/></svg>"
+				}
+			},
+			{
+				"tool": "insert_shots",
+				"args": {
+					"shots": [
+						{
+							"id": "intro",
+							"run": [
+								{
+									"type": "enter",
+									"targets": [
+										"bar1",
+										"bar2",
+										"bar3"
+									],
+									"stagger": 200
+								}
+							],
+							"hold": 600
+						},
+						{
+							"id": "middle",
+							"run": [
+								{
+									"type": "move",
+									"targets": [
+										"bar2"
+									],
+									"by": {
+										"x": 0,
+										"y": -20
+									}
+								}
+							],
+							"hold": 1500
+						},
+						{
+							"id": "end",
+							"run": [
+								{
+									"type": "exit",
+									"targets": [
+										"bar1",
+										"bar2",
+										"bar3"
+									]
+								}
+							],
+							"hold": 1000
+						}
+					]
+				}
+			}
+		]
+	},
+	"checks": [
+		{
+			"why": "exactly 4 seconds",
+			"tool": "get_animation",
+			"expect": {
+				"duration": {
+					"$min": 3980,
+					"$max": 4020
+				}
+			}
+		},
+		{
+			"why": "the same shots, in order",
+			"tool": "get_animation",
+			"expect": {
+				"shots": {
+					"$expr": "v.map((s) => s.id).join() === 'intro,middle,end'"
+				}
+			}
+		},
+		{
+			"why": "no errors or warnings in the check",
+			"tool": "check_animation",
+			"expect": {
+				"errors": 0,
+				"warnings": 0
+			}
+		}
+	],
+	"solution": [
+		{
+			"tool": "get_animation"
+		},
+		{
+			"tool": "fit_animation",
+			"args": {
+				"seconds": 4
+			}
+		},
+		{
+			"tool": "check_animation"
+		}
+	]
+}

package/skills/pixerate-animation-motion-graphics/evals/natural-easing.json

@@ -0,0 +1,96 @@
+{
+	"prompt": "The bar's slide across looks mechanical. Make the movement feel natural.",
+	"fixture": {
+		"editor": "animation",
+		"setup": [
+			{
+				"tool": "set_animation_artwork_svg",
+				"args": {
+					"svg": "<svg viewBox=\"0 0 200 100\"><rect id=\"bar1\" x=\"20\" y=\"20\" width=\"20\" height=\"60\"/><rect id=\"bar2\" x=\"60\" y=\"20\" width=\"20\" height=\"60\"/><rect id=\"bar3\" x=\"100\" y=\"20\" width=\"20\" height=\"60\"/></svg>"
+				}
+			},
+			{
+				"tool": "insert_shots",
+				"args": {
+					"shots": [
+						{
+							"id": "slide",
+							"run": [
+								{
+									"type": "move",
+									"targets": [
+										"bar1"
+									],
+									"by": {
+										"x": 60,
+										"y": 0
+									},
+									"ease": "linear"
+								}
+							]
+						}
+					]
+				}
+			}
+		]
+	},
+	"checks": [
+		{
+			"why": "the move eases instead of running at constant speed",
+			"tool": "get_animation",
+			"expect": {
+				"shots": {
+					"$some": {
+						"id": "slide",
+						"commands": {
+							"$some": {
+								"type": "move",
+								"$expr": "v.ease !== 'linear'"
+							}
+						}
+					}
+				}
+			}
+		},
+		{
+			"why": "it still slides the same distance",
+			"tool": "get_animation",
+			"expect": {
+				"shots": {
+					"$some": {
+						"id": "slide",
+						"commands": {
+							"$some": {
+								"type": "move",
+								"by": {
+									"x": 60,
+									"y": 0
+								}
+							}
+						}
+					}
+				}
+			}
+		},
+		{
+			"why": "no errors or warnings in the check",
+			"tool": "check_animation",
+			"expect": {
+				"errors": 0,
+				"warnings": 0
+			}
+		}
+	],
+	"solution": [
+		{
+			"tool": "update_command",
+			"args": {
+				"shot": "slide",
+				"command": 0,
+				"set": {
+					"ease": "ease-in-out"
+				}
+			}
+		}
+	]
+}

package/skills/pixerate-animation-motion-graphics/evals/staggered-entrance.json

@@ -0,0 +1,69 @@
+{
+	"prompt": "Animate the three bars coming in one after another with a short, snappy stagger, then hold on all three.",
+	"fixture": {
+		"editor": "animation",
+		"setup": [
+			{
+				"tool": "set_animation_artwork_svg",
+				"args": {
+					"svg": "<svg viewBox=\"0 0 200 100\"><rect id=\"bar1\" x=\"20\" y=\"20\" width=\"20\" height=\"60\"/><rect id=\"bar2\" x=\"60\" y=\"20\" width=\"20\" height=\"60\"/><rect id=\"bar3\" x=\"100\" y=\"20\" width=\"20\" height=\"60\"/></svg>"
+				}
+			}
+		]
+	},
+	"checks": [
+		{
+			"why": "each bar enters, at a different time, within about half a second of each other",
+			"tool": "get_animation",
+			"expect": {
+				"$expr": "(() => { const starts = {}; for (const s of v.shots) for (const c of s.commands) if (c.type === 'enter') c.targets.forEach((t, i) => { starts[t] = c.start + (c.delay || 0) + i * (c.stagger || 0); }); const xs = ['bar1', 'bar2', 'bar3'].map((b) => starts[b]); return xs.every((x) => x !== undefined) && new Set(xs).size === 3 && Math.max(...xs) - Math.min(...xs) <= 600; })()"
+			}
+		},
+		{
+			"why": "it ends holding on the bars",
+			"tool": "get_animation",
+			"expect": {
+				"shots": {
+					"$expr": "(() => { const s = v[v.length - 1]; return s.end - Math.max(...s.commands.map((c) => c.end)) >= 300; })()"
+				}
+			}
+		},
+		{
+			"why": "no errors or warnings in the check",
+			"tool": "check_animation",
+			"expect": {
+				"errors": 0,
+				"warnings": 0
+			}
+		}
+	],
+	"solution": [
+		{
+			"tool": "insert_shots",
+			"args": {
+				"shots": [
+					{
+						"id": "bars",
+						"label": "Bars enter",
+						"run": [
+							{
+								"type": "enter",
+								"targets": [
+									"bar1",
+									"bar2",
+									"bar3"
+								],
+								"style": "rise",
+								"stagger": 120
+							}
+						],
+						"hold": 800
+					}
+				]
+			}
+		},
+		{
+			"tool": "check_animation"
+		}
+	]
+}