Glyph Motion Studio for WebMCP

Inspiration

What it does## Overview

Glyph Motion Studio is a visual GSAP editor where users direct vector composition and animation in natural language through their own WebMCP-compatible browser agents.

Instead of generating arbitrary JavaScript or raw SVG, the agent works through ten typed site tools that can inspect semantic animation targets, construct scenes from bounded vector primitives, create and revise timelines, stage previews, apply approved changes, undo edits, switch scenes, and save projects locally.

Glyph keeps the user in control throughout the workflow. Composition and timeline changes first appear as visible previews. Every operation is revision-checked, validated against strict schemas, reflected in the canvas and timeline, and recorded in the Agent Activity panel. The user decides whether to apply, discard, edit, undo, or save the result.

The primary demonstration starts from a blank canvas. A browser agent constructs a complete radar interface from vector primitives, including concentric rings, crosshairs, a centre-pivoted sweep arm, grouped contacts, warning text, and a status indicator. It then creates and iteratively refines a coordinated detection animation.

Additional showcases include a 17-step Glyph brand ident and a 24-step orbital-deployment sequence coordinating four independent SVG assets. These examples demonstrate how WebMCP lets an agent handle complex, repetitive timeline work while Glyph remains the trusted visual editor and the human remains the creative director.

Built With

• github-actions
• gsap
• hetzner
• javascript
• localstorage
• motion-design
• nginx
• svelte
• sveltekit
• svg
• typescript
• vite
• vitest
• webmcp