Web Animation Engine — Development skill for Claude Code

web-animation-engine (retired)

[!IMPORTANT] **This project is retired and the repo is archived.** Use the `fig` plugin instead: `/plugin marketplace add smk-labs/claude-plugins` then `/plugin install fig@smk`.

fig replaced this by subtraction. Both make an idea move; fig does it as one self-contained HTML file with a looping SVG and no runtime at all, where this needed a ~700-line React engine on a CDN. Nothing here is broken, the code stays for reference, but the simpler shape won.

Original README

web-animation-engine

Animated explainers as code: `Stage`, `Sprite`, playhead. Claude-skill ready.

A Claude skill and ~700-line React + SVG runtime for composing animated web scenes, explainers, and motion graphics. CDN-only, no npm, no build step.

What's in here

SKILL.md                          The skill (loaded into Claude's context on trigger)
references/
  motion-principles.md            Tech-agnostic motion theory: easing as emotion, rhythm, performance, a11y
  engine-api.md                   Stage / Sprite / hooks / Easing / interpolate / animate
  scene-patterns.md               Five thinking patterns (no code templates)
assets/
  animations.jsx                  The runtime — drop into your project unmodified
  starter.html                    Minimal CDN React + Babel wrapper

Install

Claude Code

git clone https://github.com/SMKeramati/web-animation-engine.git \
  ~/.claude/skills/web-animation-engine

The skill auto-loads on next session.

Claude.ai customize

Download a release zip (or `git archive HEAD --format=zip --prefix=web-animation-engine/ -o web-animation-engine.zip`), then:

Settings → Customize → Skills → "+" → upload the `.zip`

Requires Pro/Max/Team/Enterprise with code execution enabled.

Cowork desktop

Same zip; upload via Customize → Skills.

How it works

1. Script first. A 15-second piece is 3–6 sentences describing what happens, in order. Don't