DESIGN:OS SVG Animation Engine (design-os-svg-animation)

Deterministic vector motion engine, virtual-clock studio player, and 1080p 60fps MP4/WebM launch-video compiler for AI agents.

Author frame-exact UI walkthroughs, decoupled camera/pointer choreography, and 2:1 axonometric vector animations governed by a 10-gate Anti-Flop verification suite.

design-os-svg-animation is free to use and modify. Source-available under PolyForm Shield 1.0.0. Works with Claude Code, Codex, Gemini CLI and Antigravity.

Quickstart · What it makes · Install · How it works · Commands · Limits

Why this exists

When AI agents generate SVG animations or promo videos freehand, they produce jittery CSS keyframes, drifting cursor tips, fake emoji icons, and non-deterministic frame timing. design-os-svg-animation enforces a virtual clock (window.__seekToTime), decoupled camera/cursor kinematics, authentic Phosphor/SVGL vectors, and a 10-gate Anti-Flop verifier.

Quickstart

1. Install the plugin or CLI

In Claude Code:

/plugin marketplace add jangtrinh/design-os-svg-animation
/plugin install design-os-svg-animation@design-os-svg-animation

Or from your terminal (Codex, Gemini CLI, Antigravity, OpenCode, or standalone CLI):

git clone https://github.com/jangtrinh/design-os-svg-animation.git
cd design-os-svg-animation
python3 scripts/anti-flop-gate.py

2. Ask in plain English

Open your project in your AI coding agent and describe what you need:

"Create a 60fps SaaS product launch walkthrough with decoupled camera punch-ins, concentric cursor click ripples, and StudioPlayer controls."

"Compile our SVG motion timeline into a self-contained HTML deliverable and run the 10-gate anti-flop verification audit."

"Verify that all cursor click hotspots align within <= 1.0px of target interactive bounds across 16:9 and 9:16 safe zones."

3. Verify your setup

python3 scripts/self_check.py

What it makes

Every deliverable produced by design-os-svg-animation is backed by a deterministic verification gate rather than freehand AI guesswork.

_{Prompt: "Create a 60fps SaaS product launch walkthrough with decoupled camera punch-ins, concentric cursor click ripples, and StudioPlayer controls."}

Featured Showreel & Interactive Suites

_{Tutorials built with the engine: DC-01 desk robot, 5:34 (9:16) · CK-001 keyboard, 2:57 (9:16) · DESIGN:OS 3D Blender promo, 30 s (9:16) · workflow: docs/tutorial-video-workflow.md}

_{DESIGN:OS Origami CAD (15s · 120 BPM · 60fps 3x tmix · B&W + 50 Shades of Gray · SF Pro Display) — Download 1080p 60fps MP4 · Open Pure-Time window.seek(t) HTML}

Installation

Choose the setup that matches your AI coding agent. Every option installs the same canonical skill (skills/line-art-motion/SKILL.md) and /doctor diagnostic suite.

Claude Code

Run these two commands inside Claude Code:

/plugin marketplace add jangtrinh/design-os-svg-animation
/plugin install design-os-svg-animation@design-os-svg-animation

OpenAI Codex

Install to your personal Codex skills directory:

git clone https://github.com/jangtrinh/design-os-svg-animation.git /tmp/design-os-svg-animation
mkdir -p ~/.codex/skills/line-art-motion ~/.codex/prompts
cp -R /tmp/design-os-svg-animation/skills/line-art-motion/* ~/.codex/skills/line-art-motion/
cp /tmp/design-os-svg-animation/prompts/doctor.md ~/.codex/prompts/line-art-motion-doctor.md
rm -rf /tmp/design-os-svg-animation

Gemini CLI & Google Antigravity

git clone https://github.com/jangtrinh/design-os-svg-animation.git /tmp/design-os-svg-animation
mkdir -p ~/.gemini/skills/line-art-motion
cp -R /tmp/design-os-svg-animation/skills/line-art-motion/* ~/.gemini/skills/line-art-motion/
rm -rf /tmp/design-os-svg-animation

OpenCode, Cursor, Windsurf & Other Agent Harnesses

git clone https://github.com/jangtrinh/design-os-svg-animation.git /tmp/design-os-svg-animation
mkdir -p ~/.agents/skills/line-art-motion
cp -R /tmp/design-os-svg-animation/skills/line-art-motion/* ~/.agents/skills/line-art-motion/
rm -rf /tmp/design-os-svg-animation

Verify installation:

python3 scripts/self_check.py

Or run /doctor inside Claude Code / Codex to inspect installed skill paths, plugin manifests, and gate health.

Uninstall:

rm -rf ~/.claude/skills/line-art-motion ~/.codex/skills/line-art-motion ~/.gemini/skills/line-art-motion ~/.agents/skills/line-art-motion

Usage & Prompt Cookbook

Once installed, skills/line-art-motion/SKILL.md activates automatically when your prompt matches its domain triggers. Browse docs/cookbook.md for copy-paste prompt recipes.

Generate & Scaffold

"Create a 60fps SaaS product launch walkthrough with decoupled camera punch-ins, concentric cursor click ripples, and StudioPlayer controls."

Audit & Verify

"Compile our SVG motion timeline into a self-contained HTML deliverable and run the 10-gate anti-flop verification audit."

Export & Automate

"Verify that all cursor click hotspots align within <= 1.0px of target interactive bounds across 16:9 and 9:16 safe zones."

Commands & Diagnostics

How it works

1. Intent Routing — Your AI agent matches your request against skills/line-art-motion/SKILL.md frontmatter triggers.
2. Progressive Context Loading — Only the entry-point SKILL.md router loads initially; detailed recipes and scripts load on demand.
3. Deterministic Execution — Domain scripts and contracts execute locally with reproducible inputs and outputs.
4. Gate Verification — scripts/self_check.py and domain verifiers (python3 scripts/anti-flop-gate.py) validate the artifact before completion.
5. Zero-Telemetry Delivery — Verified files are written directly to your workspace with zero external network calls.

User Prompt / CLI Invocation
            │
            ▼
┌───────────────────────────────────────────────┐
│ skills/line-art-motion/SKILL.md
│ Progressive disclosure router & hard rules    │
└───────────┬───────────────────────────────────┘
            │ loads on demand
            ▼
┌───────────────────────────────────────────────┐
│ python3 scripts/anti-flop-gate.py
│ Deterministic build & contract enforcement    │
└───────────┬───────────────────────────────────┘
            │ verifies
            ▼
┌───────────────────────────────────────────────┐
│ python3 scripts/self_check.py + /doctor       │
│ Zero-telemetry local verification gate        │
└───────────────────────────────────────────────┘

What loads when

design-os-svg-animation uses progressive context disclosure so your agent's context window stays fast and focused:

File structure

design-os-svg-animation/
├── .claude-plugin/
│   ├── plugin.json                 # Claude Code plugin manifest
│   └── marketplace.json            # Claude Code marketplace catalog
├── .codex-plugin/
│   └── plugin.json                 # OpenAI Codex plugin & interface manifest
├── .agents/
│   └── plugins/marketplace.json    # Cross-agent local plugin registry
├── .factory-plugin/
│   ├── plugin.json                 # Factory / Droid plugin manifest
│   └── marketplace.json            # Factory marketplace metadata
├── skills/
│   └── line-art-motion/
│       └── SKILL.md                # Canonical agent skill entrypoint
├── commands/
│   └── doctor.md                   # /doctor diagnostic slash command
├── prompts/
│   └── doctor.md                   # Codex diagnostic prompt mirror
├── scripts/
│   └── self_check.py               # Deterministic repository & skill self-check
├── docs/
│   ├── cookbook.md                 # Copy-paste prompt recipes by job
│   └── llms.txt                    # GEO / LLM discovery index
├── PRIVACY.md                      # Zero-telemetry & local-first privacy commitment
├── SECURITY.md                     # Vulnerability disclosure & security policy
├── CONTRIBUTING.md                 # Contribution workflow & verification rules
├── CODE_OF_CONDUCT.md              # Contributor Covenant code of conduct
├── CHANGELOG.md                    # Release history
├── llms.txt                        # Root LLM indexing manifest
├── LICENSE                         # PolyForm Shield 1.0.0
└── README.md

Quality bar & Limitations

It's working if...

• python3 scripts/self_check.py prints ok: design-os-svg-animation self-check passed (line-art-motion) and exits 0.
• python3 scripts/anti-flop-gate.py passes with zero contract or test regressions.
• Your AI coding agent loads skills/line-art-motion/SKILL.md automatically when given any prompt from docs/cookbook.md.
• Network traffic during execution remains zero (guaranteed by PRIVACY.md).

When not to use

• Photorealistic 3D rigid-body simulations or CAD mechanical assemblies (use design-os-3d-blender).
• Static packaging dielines and print PDFs (use design-os-origami).
• Quick one-line CSS hover transitions that do not require timeline choreography or video export.

DESIGN:OS Ecosystem

design-os-svg-animation is one of the 13 source-available engines in the DESIGN:OS ecosystem:

Contributing, Governance & License

• Contributing: See CONTRIBUTING.md for pull request guidelines and verification gates (python3 scripts/self_check.py).
• Code of Conduct: Governed by CODE_OF_CONDUCT.md.
• Security & Privacy: Zero telemetry — see SECURITY.md and PRIVACY.md.
• Changelog & LLM Index: Track releases in CHANGELOG.md and machine-readable index in llms.txt.
• License: PolyForm Shield 1.0.0 © Jang Trinh. Free to use and modify, including for paid client work; you may not resell it or build a competing product from it.

If design-os-svg-animation saves you time, a star on GitHub helps other engineers and AI agents find it.