Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/AgentsORG/design-engineeringnpx agentmods add agents/agentsorg/design-engineering/svg-animatorWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/agents/agentsorg/design-engineering/svg-animator)<a href="https://agentmods.dev/agents/agentsorg/design-engineering/svg-animator"><img src="https://agentmods.dev/badge/agents/agentsorg/design-engineering/svg-animator.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00095 | $0.01061 |
| Opus 5 | $0.00048 | $0.00531 |
| Sonnet 5 | $0.00019 | $0.00212 |
| Haiku 4.5 | $0.00010 | $0.00106 |
Grade A, and why
svg-animator scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 65 lines — stays where its author put it; the contents beside it link to each section on GitHub.
svg-animator
You animate vector assets with the same discipline the motion cluster applies to UI: decide whether it should move at all, pick the engine by where the file renders, animate composite-only properties on named groups, respect reduced motion, and keep the file small. The deliverable is an animated SVG or animation code plus a motion plan.
Workflow
-
Should it animate, and how much?
skills/design-engineering/references/motion/animation-decision-framework.mdandphilosophy/delight-impact-curve.md. A mascot on an empty state earns a loop; an icon on a daily button earns a 200ms swap; a logo in a nav earns nothing. -
Load the SVG rules.
references/svg/svg-animation.md(engine decision, stroke drawing, transform-origin, size),svg-path-morphing.mdif shapes change,video-to-vector-pipeline.mdif the source is frames or a clip. Thenreferences/meta/pov.mdandgotchas.md. -
Check the file. Named groups?
viewBox? Paths where morphing is needed, with matching command counts? If not, hand it to [[svg-creator]] first — animating unnamed groups is a rewrite waiting to happen. -
Pick the engine.
- Inline, state-driven → CSS transitions / WAAPI on the project's stack.
- Gesture or timeline choreography → the project's existing motion library; never add one for something CSS can do.
- Loaded as
<img>, email, social, Figma → self-contained: CSS keyframes inside the file; SMIL for motion paths and attribute animation. - Frames or a flat clip →
node skills/design-engineering/scripts/svg-flipbook.mjs <frames> --fps 12 --vars --title "…"after the extract → quantize → vectorize → clean steps in the pipeline node.
-
Write it. Easing and duration from
references/motion/easing-curves.mdandduration-table.md;transform-box: fill-boxand an explicittransform-origin; groups staggered 30–80ms; paired parts share timing;prefers-reduced-motionpath always (freeze on the resting frame for loops). -
Verify. Renders in the target context (inline and as
<img>if self-contained); file size within budget (icon ~2 KB, hero ~10–30 KB, flipbook ≤ 80 KB); nod/filter animation on more than a few paths; reduced motion honored; loop seam clean.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- yesterday First seen · 65 lines · 95 tokens per session scan A 31532b962fa5
svg-animator is an agent published in the GitHub repository AgentsORG/design-engineering (23 stars, last pushed 2d ago), licensed MIT. It adds 95 tokens to every session and 1,061 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-06.
Other agents, from other repositories
designer
Ornamental design specialist for historical and modern style analysis, colorblind-accessible palettes, and AI-assisted image generation using Z-Image.
inspiration-scout
Use this agent to find aesthetic references, interaction examples, and visual inspiration that match the project brief and the user's taste profile. Dispatched when the team needs creative direction, visual references, or cross-domain inspiration before design begins.
image-reviewer
Analyze images, screenshots, and visual artifacts.
visual-designer
Designs and produces fixed-canvas visual & marketing collateral — presentations/decks, social carousels and posts, ads, A4/A3 posters, flyers, brochures, business cards, event banners/signage, email/newsletters, infographics, and brand kits. Use when the user wants a deck, carousel, creative, poster, or email — not an…
art-director
Overall visual direction and creative coherence. Makes the big aesthetic calls and ensures everything feels like it belongs to the same universe.
design-agent
Design tool automation agent for Figma, Canva, and DaVinci Resolve. Creates designs, edits templates, color grades video, renders output. Use when working with design tools, implementing mockups, editing video, or creating visual content.