design:os · SVG Animation Engine & Video Pipeline · v0.2.0
Deterministic vector animation and reference video recreation.
A motion engineering pipeline for Claude Code, Codex, and Antigravity: source-indexed scene analysis, HyperFrames v2 staging, Motion IR, a seekable virtual clock, and review of the encoded video against its reference.
Scene 2 of the 82-second Claude Design promo: orthographic Three.js globe with Great-Circle arcs, live tweak sliders, and deterministic virtual-clock quantizing. Interactive Runner · Compare videos · Download 60fps MP4
shipping build · 60fps recording · HyperFrames v2.0
38-second high-tempo OpenAI Codex App promo featuring native macOS window kinematics, multi-agent streaming execution, tactile code diff inline review, live photobooth drag-and-swap preview, and SVGL brand lockup with spring physics. Interactive Runner · Download 60fps MP4
promo/codex-app/codex-app-promo.mp4 · 1080p 60fps · HyperFrames v2.0
47.5-second recreation of the official Vercel v0 launch video featuring official SVGL vector drawing, dynamic prompt reel cycling, interactive component editing popover, 3D code inspector, and Stealth Mode toggle. Interactive Runner · Download 60fps MP4
promo/v0-generative-ui/v0-generative-ui.mp4 · 1080p 60fps · HyperFrames v2.0
15-second 120 BPM monochrome showreel (50 Shades of Gray + SF Pro Display) transforming a single knife-line into an 18-face 2D dieline, 3D gable carton, 3 prepress plates, and 4 polyhedral cartons with 3-subframe tmix shutter motion blur. Interactive Runner · Download 60fps MP4
30-second promo for DESIGN:OS 3D Blender: keyboard, desktop companion, robot arm, watch winder and ORC builds moving from blueprint lines to clay to the final render, ending on the repo card. 16:9 MP4 · 9:16 MP4
promo/design-os-3d-blender · 1080p 60fps · 4-subframe tmix · window.seek(t)
2:57 tutorial: how the CK-001 keyboard was built A to Z, with a Vietnamese voiceover and bilingual captions. Every command, log line and gate report on screen is copied verbatim from the build record, including what went wrong. 16:9 MP4 · 9:16 MP4
promo/ck-001-tutorial · 1080p 60fps · voiceover + music bed · window.seek(t)
What it is
- Repository
- jangtrinh/
design-os-svg-animation - Requires
- Node.js 22Python 3.10+, Chrome, FFmpeg
- Runtimes
- Browser, R3F, Chromium
- Timing
- Virtual Clockwindow.__seekToTime(t)
- Anti-Flop
- 7 Gates & Pre-FlightGate 0–6 Hotspots, zero emojis
- License
- MIT
Why this engine, compared with the alternatives
What this pipeline delivers that real-time screen capture, Lottie players, and canvas engines do not, or do differently.
Deterministic Virtual Clock
Eliminates dropped frames, timing jitter, and OS lag. Headless Chromium steps through virtual seconds frame by frame.
GPU transforms only
Animate translate3d, scale, rotate, and opacity. No continuous layout-thrashing property changes on DOM nodes.
Formal Motion IR Schema
Storyboards are authored as typed JSON tracks with kinematic anchors, independent of the target CSS or GSAP engine.
7 Anti-Flop & Concentricity Gates
Automated verification rejects raw emojis, unantialiased rendering, broken contrast, unanchored depths, non-deterministic timing, and cursor click eccentricities (Δ > 1.0px).
Mandatory Reduced Motion
Every generated CSS and JS animation provides accessible static fallbacks for prefers-reduced-motion: reduce users.
Where Lottie wins: Native iOS and Android apps requiring self-contained JSON assets inside a mobile binary. Where Design OS wins: AI coding agents compiling deterministic 1080p 60fps MP4 launch videos and browser code with zero runtime overhead.
Install once
Node.js 22 and Python 3.10+ are supported. Clone the repository, then install project dependencies from the repository root.
git clone https://github.com/jangtrinh/design-os-svg-animation.git
cd design-os-svg-animation
npm installConfirm that Google Chrome and FFmpeg are present on your system path:
which ffmpeg
python3 -c "import urllib.request; print('Python ready')"First safe use
- Run the proactive Pre-Flight Guard and 6-Gate Anti-Flop audit.
npm run guard && npm run audit:anti-flop - Compile a sample Motion IR storyboard to CSS keyframes and GSAP timeline.
npx tsx scripts/motion-ir-compiler-demo.ts - Render the promo video into a broadcast 1080p MP4.
python3 scripts/export-promo-video.py
Read the terminal output before proceeding: pre-flight checks and all anti-flop gates must exit with code 0 before publishing motion video.
A practical loop
scripts/motion-preflight-guard.py
Proactive pre-flight quality guard and self-healer. Audits SVG stroke boundaries, button glyphs, DOM camera decoupling, and spring physics.
scripts/anti-flop-gate.py
Verifies 0 raw emojis, anti-aliased font smoothing, 8pt modular grid, reduced-motion fallbacks, and determinism.
scripts/export-promo-video.py
Spawns headless Chromium, quantizes time through window.__seekToTime(t), and pipes frames to FFmpeg.
scripts/jev-svg-auditor.py
Audits SVG paths and vector trees for animatability, coordinate safety, and sub-pixel precision.
schemas/motion-ir.schema.json
Canonical JSON schema governing keyframe tracks, easing curves, and element bindings.
promo/claude-design/claude-design-promo.html
Standalone 82-second interactive promo featuring 3D globe, Great-Circle arcs, inline editing, and 16-project vector gallery montage outro.
promo/codex-app/codex-app-promo.html
Standalone 38-second high-tempo promo featuring macOS dark window morph, multi-agent streaming execution, interactive code diff resolution, live photobooth preview, and organic outro spring bounce.
promo/v0-generative-ui/v0-generative-ui.html
Standalone 47.5-second recreation of Vercel v0: Generative UI launch video featuring wireframe SVGL drawing, dark prompt bar, component popover edit, 3D code inspector, and Vercel outro lockup.
Hairline Engine · 2:1 Isometric Kinematics
Vector CAD precision meets 60fps tactile physics. Interactive 2:1 isometric vector engine with meaningful physical kinematics — card insertion, tactile button depression, and lead screw clamping.
Specimen 1: Payment Terminal (playground/case-terminal.html). Meaningful POS machine kinematics — EMV chip card smoothly slides along -Y into the reader slot on approach; 12 tactile keys depress -1.4mm with spring return and semantic .hi accent transfer. Interactive Player
Specimen 2: Machine Vise (playground/vise-sol.html). Kinematic linkage benchmark — constrained lead screw turns offset crank while translating sliding jaw against stationary anvil under real-world mechanical limits. Interactive Player
Specimen 3: Grade 1 Elementary Math (playground/math-grade1.html). 10 interactive manipulatives in 2:1 axonometric projection covering counting sticks bundle, balance comparison, ten-frame decomposition, unit blocks, number line hops, ruler & pencil measurement, teaching clock, 3D solids, fraction pie, and bead strings. Interactive Suite
Specimen 4: Interactive Physics Suite (playground/physics.html). 5 kinematic physics models in 2:1 axonometric projection demonstrating Archimedes' lever rule, harmonic pendulum energy exchange, Hooke's spring dynamometer, inclined plane friction threshold, and knife-switch electric circuit activation. Interactive Suite
Specimen 5: Interactive Chemistry Suite (playground/chemistry.html). 5 experimental chemistry models in 2:1 axonometric projection illustrating acid-base titration buret neutralisation, alcohol burner thermal decomposition, FCC NaCl crystal lattice Coulomb equilibrium, Liebig condenser distillation, and universal pH indicator scale. Interactive Suite
Specimen 6: Interactive Physical Education & Olympic Sports Suite (playground/pe.html). 5 kinematic athletic models in 2:1 axonometric projection demonstrating sprint timing mechanics, Olympic barbell squat load deflection, 4x100m blind relay takeover zone rules, track hurdle safety release counterweights, and FIBA basketball breakaway rim spring damping. Interactive Suite
playground/pe.html · Physical Education Suite
5-model Olympic athletics laboratory: Sports mechanical stopwatch, barbell squat deflection, 4x100m relay exchange zone, WA safety track hurdle, and FIBA basketball breakaway rim. Interactive Suite
playground/chemistry.html · Chemistry Suite
5-model experimental chemistry laboratory: Acid-base buret titration, burner heating & decomposition, NaCl crystal lattice, Liebig condenser distillation, and universal pH testing strip. Interactive Suite
playground/physics.html · Physics Suite
5-model physics laboratory: Archimedes' lever, harmonic pendulum, Hooke's spring dynamometer, inclined plane friction, and knife-switch electric circuit with illuminated bulb. Interactive Suite
playground/math-grade1.html · Grade 1 Math Suite
Complete 10-figure elementary math laboratory: counting sticks bundle (tens & units), balance scale, ten-frame, block towers, number line hops, ruler & pencil measurement, teaching clock, 3D solids & footprints, fraction pie, and bead string. Interactive Suite
scripts/create-hairline-figure.mjs
Universal pipeline tool: build (compiles JS to self-contained HTML), validate (enforces the 10 Hairline rules), and capture (headless visual verification).
hairline-solid-workflow.html · Workflow Guide
5-step authoring guide: Solid geometry first, pointer projection in world coords, spring kinetics, and dynamic SVG depth sorting. Read Guide
art-direction.html · Art Direction Spec
Canonical design standards: 2:1 isometric projection, monochrome technical ink, chamfered silhouettes, and semantic accent hierarchy. Read Spec
playground/design-vault.html · Design Vault
Discrete array archetype: 9-station modular vault grid with coordinate tracking and floating accent pedestals. Interactive Player
Showcase builds
Interactive motion builds, a traced line-art 404 page, and a reference recreation study. The Astra study remains open for visual review.
Example 1: 82-second master promo for Claude Design featuring orthographic Three.js globe, Great-Circle arcs, live tweak sliders, and 16-project vector gallery outro. Interactive Runner · Download 60fps MP4 (13MB)
promo/claude-design/claude-design-promo.html · 1080p 60fps
Example 2: 38-second high-tempo OpenAI Codex App promo featuring native macOS window kinematics, multi-agent streaming execution, tactile code diff inline review, live photobooth drag-and-swap preview, and SVGL brand lockup with spring physics. Interactive Runner · Download 60fps MP4 (10MB)
promo/codex-app/codex-app-promo.html · 1080p 60fps
Example 3: 47.5-second recreation of the official Vercel v0 launch video ("Introducing v0: Generative UI") featuring official SVGL vector drawing, dynamic prompt reel, interactive component editing popover, 3D code inspector, and Stealth Mode toggle. Interactive Runner · Download 60fps MP4
promo/v0-generative-ui/v0-generative-ui.html · 1080p 60fps
Example 4: a black-and-white 404 page built from one continuous-line drawing. The strokes are traced from the reference's pixels (99.7% of the reference ink within 2 px). A simulated flight controller flies it: the drone tilts before it moves, settles after a small counter-swing, and wobbles gently while hovering. It watches your pointer, dodges when you get close, and lights up the button you hover. Open the live page · Download 60fps MP4
promo/drone-404/drone-404.html · line-art trace · flight-controller motion · 1080p 60fps
Astra for Law: a 77.6-second reference recreation study using source-indexed scene and transition analysis, HyperFrames timing presets, Motion IR, and deterministic browser playback. Visual review is still open; partner logos are declared SVGL stand-ins. Open interactive player · Read the recreation contract
Work in progress · browser player · 1080p 30fpsReference and Recreation Comparison
Compare the original launch videos with the recreated motion output side by side. Review scene timing, camera motion, transitions, type and assets against the source; technical export checks alone do not establish visual similarity.
FAQ
How does deterministic virtual clock recording work?
Instead of screen recording with dropped frames, headless Chromium advances time via window.__seekToTime(t) in exact 1/60s increments, capturing full-raster raw frames for FFmpeg encoding.
Why are raw Unicode emojis strictly banned?
System emojis render inconsistently across platforms, break geometry matching, and flag anti-flop gates. All iconography must use official Phosphor regular vectors.
Which coding agents are supported?
Claude Code, Codex Native, and Antigravity. Portable skills map directly to each harness’s toolchain.
Does this require a paid GPU or cloud rendering farm?
No. Rendering runs locally on macOS or Linux using headless Chromium hardware acceleration and FFmpeg libx264.
Can it compile Motion IR directly to CSS and GSAP?
Yes. The motion-ir compiler converts storyboard tracks into pure CSS transform keyframes and GSAP timelines.
What is the Hairline Engine and how does it handle vector kinematics?
The Hairline Engine is an interactive 2:1 isometric vector engine in Design OS. It computes dynamic SVG depth sorting, pointer projection in world coordinates, and 60fps spring physics under real-world mechanical constraints without exploded CAD slop.
DESIGN:OS Ecosystem
Modular toolchain for AI coding agents: from interface CLI to deterministic animation, 3D CAD and robotics.