# Svg Mascot Animator

> >-

- **Type:** Skill
- **Install:** `agentstack add skill-immamdouhaboammar-vibe-svgs-svg-mascot-animator`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [imMamdouhaboammar](https://agentstack.voostack.com/s/immamdouhaboammar)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [imMamdouhaboammar](https://github.com/imMamdouhaboammar)
- **Source:** https://github.com/imMamdouhaboammar/vibe-svgs/tree/main/svg-mascot-animator

## Install

```sh
agentstack add skill-immamdouhaboammar-vibe-svgs-svg-mascot-animator
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# SVG Mascot Animator

Static SVG in, animation out, with the timing coming from equations and solvers rather than
from nudged keyframes. Anime.js v4 is the default engine. Where JavaScript cannot run, the
same Anime.js solvers are sampled ahead of time and baked into CSS keyframes, so both
versions of an asset share one motion identity.

What separates convincing motion from generic motion is not more keyframes. It is that the
timing comes from somewhere real: a parabola carried by a motion path, a pendulum whose
period follows from its length, a spring whose settling duration is computed by a solver
rather than picked by feel.

## Setup

Install the engine first, before writing any animation code:

```bash
bash scripts/setup.sh          # npm install animejs, verifies the version and exports
```

In a browser without a build step, import pinned so a future release cannot change the
motion under the user:

```js
import { animate, createTimeline, spring, svg, utils } from 'https://esm.sh/animejs@4.5.0';
```

The API moved substantially at v4 and keeps growing, so confirm the installed surface rather
than trusting a remembered snippet. `setup.sh` prints it, and `node scripts/bake.mjs list`
prints the easing names.

## Pick the track first

**Runtime track — Anime.js drives the page.** Docs sites, landing pages, product UI,
artifacts, demos, anything reacting to scroll, hover, pointer, or state. Timelines, springs,
motion paths, drawables, morphs, stagger, draggables. Start from
`assets/runtime-scene.html`.

**Static track — baked CSS inside a self-contained SVG.** README images, badges, anything
loaded through ``, where scripting never executes. Anime.js still designs the motion;
`scripts/bake.mjs` samples its easings and spring solver in Node and emits the keyframes.

Ask which one the asset is for. When the answer is both, design the timeline once on the
runtime track, then bake it, since going the other direction loses the interactivity that
made the runtime version worth building.

## Workflow

### 1. Read the source and find the rig

```bash
python3 scripts/inspect_svg.py 
```

Reports the viewBox, the bounding box, how many separately addressable shapes exist, and the
pivot translations to use when normalizing.

**A single path cannot articulate.** If the mascot is one path, limbs and eyes cannot move
independently and every idea has to live at body level: squash, stretch, arcs, rotation, and
secondary elements drawn outside the path. Say this early rather than promising a walk cycle
you cannot deliver, and offer the split as an option, since separating the parts unlocks gait
and reactions.

### 2. Pick stories, one physical domain each

A collection reads as a collection when the pieces do not repeat the same trick.

| Domain | Feels like | Story hooks | Anime.js |
|---|---|---|---|
| Projectile + restitution | committed, weighty | shipping, deploying, jumping a gap | `svg.createMotionPath` then `spring()` on landing |
| Pendulum | rhythmic, hypnotic | swinging between branches, hanging | `ease:'inOutSine'`, `alternate:true` |
| Damped spring | comic, reactive | load, pressure, overflow | `spring({stiffness, damping, mass})` |
| Free fall + stacking | escalating | queue building, backlog, tokens piling | `ease:'inQuad'` + `stagger()` |
| Hop cycle + treadmill | patient, looping | long build, endless progress | looping timeline, ground offset matched to stride |
| Orbit + drift | calm, ambient | idle, thinking, waiting | `createTimer` or a sine-eased loop |
| Inertia drag | mechanical | being pushed, dragging weight | `createDraggable` with `releaseEase: spring()` |
| Reveal / construction | deliberate | building, compiling, assembling | `svg.createDrawable` with `draw:['0 0','0 1']` |
| Transformation | surprising | switching modes, evolving | `svg.morphTo` |

Propose three with one-line stories and let the user pick or redirect. Serious brands may
want the calm end of that table rather than the comic end.

Read `references/animejs.md` for the API and `references/physics.md` for the equations,
easing map, and timing values before writing anything.

### 3. Rig the transform stack

Normalize the artwork once in `` so the origin sits at the natural pivot, then nest one
transform per concern, outermost first: horizontal position, vertical position, rotation,
scale. Mixing two concerns in one group forces hand-tuning, because CSS `transform` and
Anime.js both replace the whole value rather than composing it.

The rig is identical on both tracks. That is deliberate: it is what lets one motion design
ship twice.

`references/rigging.md` covers `transform-box`, the origin traps that silently break scaling,
splitting a path for articulation, and reduced-motion poses.

### 4. Build the timeline

On the runtime track, `createTimeline` with explicit positions. The positions carry the
performance: `'` and `` wired through `aria-labelledby`
- every `id` and every keyframe name prefixed with the filename stem, so several assets can
  be inlined on one page without collisions
- a reduced-motion path: `@media (prefers-reduced-motion:reduce)` on the static track, a
  `matchMedia` guard that seeks the timeline to its payoff on the runtime track
- a dark variant for neutral colours, with brand colours left alone
- static track only: zero JavaScript, zero external references, zero web fonts

### 7. Verify before delivering

```bash
python3 scripts/check_asset.py               # static track
python3 scripts/check_asset.py --runtime     # runtime track
```

Fix everything it reports, then deliver and explain the physics behind each piece: the
constants, why that easing, what the secondary motion is doing. The explanation is part of
the deliverable, since it is what lets the user judge and adjust the result.

## Output conventions

Name files `-`, lowercase and hyphenated: `claudecode-ship-it.svg`. Loops run
3 to 6 seconds; shorter becomes irritating on a page someone is reading, longer means most
viewers never see the payoff. When a scene cannot loop positionally, fade the actor across
the last few percent and reset its position while it is invisible.

Keep each scene in a viewBox sized to its content, typically 320 to 480 units wide.

## Reference files

- `references/animejs.md` — v4 API surface, install, physics-to-feature mapping, springs,
  SVG helpers, baking, and the version traps. Read this before writing engine code.
- `references/physics.md` — equations, easing map, timing tables, secondary motion.
- `references/rigging.md` — transform stack, `transform-box`, origin traps, articulation.
- `references/contract.md` — accessibility, namespacing, `` limits, QA checklist.
- `scripts/setup.sh` — installs Anime.js and prints the installed export surface.
- `scripts/bake.mjs` — samples Anime.js easings and springs into CSS keyframes.
- `scripts/physics.py` — closed-form generators for ballistics and oscillation without Node.
- `scripts/inspect_svg.py` — geometry and riggability report for a source file.
- `scripts/check_asset.py` — contract validator for both tracks.
- `assets/runtime-scene.html` — working starting point for the runtime track.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [imMamdouhaboammar](https://github.com/imMamdouhaboammar)
- **Source:** [imMamdouhaboammar/vibe-svgs](https://github.com/imMamdouhaboammar/vibe-svgs)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-immamdouhaboammar-vibe-svgs-svg-mascot-animator
- Seller: https://agentstack.voostack.com/s/immamdouhaboammar
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.