Deterministic vector animation and 1080p 60fps motion video pipeline for AI coding agents.
v0.2.0 — HyperFrames Edition: Automated scene scoring, 50Hz audio envelopes, 20 HyperFrames beats, 1:1 dual-layer split sync, and Gate 6 concentricity.
Live Site: https://jangtrinh.github.io/design-os-svg-animation/
| Metric / Demo | Example 1: Claude Design Master Promo | Example 2: OpenAI Codex App Promo | Example 3: Vercel v0 Generative UI |
|---|---|---|---|
| Preview | |||
| Interactive Runner | 🚀 Launch Web Player (local) | ⚡ Launch Web Player (local) | ▲ Launch Web Player (local) |
| Split comparison | 🪞 Open split view | 🪞 Open split view | 🪞 Open split view |
| Deconstruction Assets | Contact Sheet · Waveform | Contact Sheet · Waveform | Contact Sheet · Waveform |
| Broadcast Video | 🎬 1080p 60fps MP4 (13 MB) | 🎬 1080p 60fps MP4 (10 MB) | 🎬 1080p 60fps MP4 (2.4 MB) |
| Aspect & Duration | 16:9 · 82.0 seconds | 16:9 · 38.0 seconds | 16:9 · 47.5 seconds |
| Key Motion Features | Specular Glossy Pill, 2.5D CSS mini-bars, 3D Globe with Great-Circle arcs, live Tweaks, and audio-reactive aura | Native macOS window kinematics, multi-agent streaming execution, tactile diff review & photobooth preview | Official v0 wireframe drawing, reel prompt cycle, component popover edit, 3D code perspective card, Stealth Mode toggle, Vercel outro |
The interactive player is an in-progress, 77.6-second recreation study of the OpenAI reference video. It uses a seekable virtual clock, Motion IR geometry, HyperFrames timing presets, a procedural starfield, and a reduced-motion fallback. The partner logo identities are deliberate SVGL stand-ins; visual acceptance remains open. Read the reference recreation contract before continuing it. Run the source player locally from the repository root:
python3 -m http.server 3033
# Open http://localhost:3033/promo/astra-law-promo.htmlValidate the player with node scripts/export-astra-law-video.mjs --verify, capture browser frames with --proof, or export a local 1080p/30 fps MP4 with node scripts/export-astra-law-video.mjs. The output goes to ignored .cache/astra-for-law/; the reference video, its soundtrack, and the local MP4 are not published. After player edits, run npm run sync:astra-pages and npm run verify:astra-pages to keep the public browser copy in docs/promo/ aligned. See the recreation record for scene anchors, owner decisions, and open visual gaps. An exported video is not a visual acceptance claim.
The contract requires source-indexed scene and transition analysis, mandatory HyperFrames staging and timing presets, deterministic rendering, and comparison of the encoded export. Cut and waveform tools accelerate ingestion but cannot find every soft transition. Styling techniques and exporter choices depend on the reference; the technical audit does not grade visual similarity.
Read AGENTS.md for repository rules and the reference recreation contract for a video task. The contract owns source evidence, HyperFrames v2, transition and camera analysis, final export review, and acceptance. Consult the Product Designer skill before scene, animation, or UI work.
Use the live Motion IR schema for vector intent and deterministic geometry tooling for paths. Keep timelines seekable and finite, provide reduced-motion content, prefer composited properties, and use approved vector icons and sourced marks. Document and verify source-driven exceptions such as layout sizing for crisp text. npm run audit:all checks technical rules; it does not certify visual similarity.
Use the scripts in package.json and the case-specific exporter identified by the contract. Verify the active runtime's installed commands before invoking a skill or agent; this README does not define a second orchestration or approval process.
npm install- Python 3.10+:
python3 --version - Google Chrome (Headless rendering):
/Applications/Google Chrome.app/Contents/MacOS/Google Chrome - FFmpeg:
which ffmpeg(or/opt/homebrew/bin/ffmpeg)
- For Claude Code / Workspace Agents:
mkdir -p /Users/jang/Products/.agents/skills/product-designer cp skills/product-designer/SKILL.md /Users/jang/Products/.agents/skills/product-designer/SKILL.md mkdir -p /Users/jang/Products/.agents/skills/motion-video-recreation cp skills/motion-video-recreation/SKILL.md /Users/jang/Products/.agents/skills/motion-video-recreation/SKILL.md
- For Antigravity Global Agent:
mkdir -p ~/.gemini/config/skills/ak-product-designer cp skills/product-designer/SKILL.md ~/.gemini/config/skills/ak-product-designer/SKILL.md mkdir -p ~/.gemini/config/skills/ak-motion-video-recreation cp skills/motion-video-recreation/SKILL.md ~/.gemini/config/skills/ak-motion-video-recreation/SKILL.md
- Recreate a reference video: follow the v2 contract from source intake through HyperFrames draft, transition review, final encoded export, and acceptance. Read the Astra lessons for concrete failure cases. Select the case-specific exporter named in that case plan; the Claude, Codex App, v0, and Astra exporters are not interchangeable.
- Compile Motion IR: inspect the live schema, then run
npx tsx scripts/motion-ir-compiler-demo.tsfor the existing compiler demo. The schema and compiler own valid fields and output.
Technical checks use the repository scripts in package.json. Their success does not imply that a recreation matches its source.
design-os-svg-animation/
├── docs/ # Canonical Engineering Specifications
│ ├── motion-video-recreation-workflow-guide.md # Lessons and review examples
│ ├── motion-video-recreation-pipeline.md # Normative recreation contract
│ ├── architecture-overview.md # 7-Stage Hybrid Engine Architecture
│ ├── motion-ir-specification.md # Formal Motion IR Schema Spec
│ └── quality-and-safety-gates.md # JEV System One & A11y Standards
├── plans/journals/ # Engineering Retros & Session History
│ └── 2026-09-22-codex-app-promo-pipeline.md # Codex App Session Retro & Root Cause Analysis
├── skills/ # Universal Portable Agent Skills
│ ├── product-designer/ # EaseUI tactile depth & SVGL brand marks
│ └── motion-video-recreation/ # Multi-agent motion video recreation skill
├── promo/ # Virtual-Clock Engine & Rendered Broadcast Assets
│ ├── claude-design-promo.html # 82s Interactive Web Player (Claude Design + 16-Project Outro Montage)
│ ├── claude-design-promo.mp4 # 1080p 60fps Broadcast Video Output (13 MB)
│ ├── claude-design-engine.js # Deterministic Virtual Clock Engine (Claude Design)
│ ├── claude-design.css # Dynamic dark/light theme & easing tokens
│ ├── codex-app-promo.html # 38s Interactive Web Player (OpenAI Codex App)
│ ├── codex-app-promo.mp4 # 1080p 60fps Broadcast Video Output (10 MB)
│ ├── codex-app-engine.js # High-tempo macOS window & multi-agent engine
│ ├── codex-app.css # macOS Sonoma dark theme & terminal styling
│ ├── v0-generative-ui.html # 47.5s Interactive Web Player (Vercel v0 Generative UI)
│ ├── v0-generative-ui.mp4 # 1080p 60fps Broadcast Video Output (2.4 MB)
│ ├── v0-generative-ui-engine.js # Virtual Camera & Phosphor vector kinetics
│ └── v0-generative-ui.css # Dark skeuomorphic UI styles
├── src/components/ # Production React Three Fiber Suite
│ ├── InteractiveGlobeWorkspace.tsx # 3D Orthographic Globe + Great-Circle Arcs
│ ├── ExpandingInput.tsx # Morphing pill-to-form + Claude star spinner
│ ├── MeditationAppWorkspace.tsx # Pulsing Enso ring timer + iOS device mockup
│ ├── InlineEditingWorkspace.tsx # Guide layout + Typography knobs + Spline chart
│ ├── ExportHandoffModal.tsx # Design-to-code CLI handoff card
│ └── ClaudeDesignShowcase.tsx # Unified master showcase container
├── scripts/ # Deterministic Tooling & Verification Gates
│ ├── motion-preflight-guard.py # Proactive Pre-Flight Quality Guard & Auto-Fix CLI
│ ├── anti-flop-gate.py # 6-Gate automated quality & a11y auditor
│ ├── export-promo-video.py # Headless Chrome + FFmpeg frame capture pipeline
│ ├── jev-svg-auditor.py # SVG AST & animatability auditor
│ └── motion-ir-compiler-demo.ts # Motion IR -> CSS & GSAP prototype compiler
├── schemas/
│ └── motion-ir.schema.json # JSON Schema for motion timeline tracks
└── package.json # Dependencies & verified npm scripts (guard, audit)
| Gate | Target | Pass Condition |
|---|---|---|
| Pre-Flight | Invariant Self-Healing | Stroke boundary |
| Gate 0 | Mandatory Product Designer | Product designer skill verified and active for tactile depth and authentic SVGL marks. |
| Gate 1 | Icon System & Zero Emoji | Official Phosphor / Lucide symbols only in <defs> / <use> / React components. Zero raw emojis allowed. |
| Gate 2 | Typography & Contrast |
-webkit-font-smoothing: antialiased, WCAG 2.2 AA compliant contrast ratios. |
| Gate 3 | Tactile Spatial Depth | 8pt/4pt modular grid, multi-layered diffuse drop shadows. |
| Gate 4 | A11y & Motion Safety |
@media (prefers-reduced-motion: reduce) fallbacks, valid ARIA tags. |
| Gate 5 | Security & Determinism | No XSS strings, no NaN or unclosed coordinates, valid Motion IR syntax. |
- Ecosystem: Design OS
- Target Runtimes: Modern Browsers, React 19 / Three.js / R3F, Headless Chromium, Web Components
- License: MIT