Glyph Motion Studio

Create editable SVG illustrations and diagrams with your browser agent. Refine individual elements, then bring the same artwork to life with coordinated animation.

Comment

Inspiration

People can describe the visual they want more easily than they can construct it. A product designer might need an editable illustration, a founder a product explainer, or an educator a diagram showing how a process works. Even a simple delivery story requires a receipt, items, a box, a truck and a doorstep, with many individual details to arrange and revise.

Generating a flattened image does not solve the editing problem. We wanted a browser agent to help create the artwork while leaving the user in control of its structure, appearance and, when useful, motion.

What it does

Glyph Motion Studio is an AI-assisted vector design and animation editor. Describe a composition to your browser agent and it builds editable SVG artwork from shapes, paths and text. Refine individual elements, then optionally animate the same artwork.

  • Create editable compositions: assemble illustrations and diagrams from eight vector primitive types and bundled artwork.
  • Refine specific parts: change geometry, colors, labels, placement and semantic groups, or duplicate and remove objects.
  • Address elements by meaning: names, groups, roles and rotation pivots let the agent work with input cards, a processor ring, a truck body or individual wheels.
  • Add coordinated motion: stage readable sequences, stagger objects, draw paths and revise selected timeline steps.
  • Inspect before accepting: scene and timeline previews are separate from applying changes. Saving to the browser is a further explicit action.
  • Keep manual control: inspect timeline steps, use undo and replay the result. The activity panel makes agent actions visible.

The examples are editable projects, not flattened recordings. Order to Door contains 29 vector primitives and a ten-second, 23-step animation: three items pack into a box, one parcel travels with the truck, the wheels rotate with it, and DELIVERED appears after arrival. Signal Foundry demonstrates a structured process diagram with six inputs, a processor and a verified result. Space Mission coordinates multiple bundled SVG assets.

How we built it

The editor uses SvelteKit and TypeScript, an SVG canvas and a trusted GSAP timeline runtime. The agent works through ten WebMCP tools that expose the scene, editable vector nodes, semantic animation targets, previews, approval, undo and saving.

The AI interprets the user's visual brief, inspects the current composition and proposes structured scene or timeline patches. Glyph validates those patches and renders them through its own code. It does not execute arbitrary agent-generated JavaScript or markup.

Human controls and agent tools share the same validated action layer. Revision checks reject stale changes. Preview identifiers are expiring and single-use. System reduced-motion preferences remain under the app's control.

The browser agent supplies the model. Glyph does not embed a model or require a provider API key. The recorded demonstration uses a Codex browser agent. Codex also assisted development, debugging, tests, deployment preparation and demo production.

Challenges we ran into

A useful design agent needs more than a prompt box. It must know which visual object a request refers to, make a bounded change, and show the result without silently committing it.

We addressed this with semantic targets, explicit rotation pivots, a structured patch format and a shared validation layer. Separating scene creation from timeline authoring lets users approve an illustration before adding movement.

Coordinated animation introduced another challenge: the delivery parcel should follow a continuous journey, not teleport between unrelated scenes. Matching the truck, package and wheel motion required careful timing and target structure.

Accomplishments that we're proud of

The creation and revision workflows operate on real, independently editable vector objects. Agent assistance does not replace the editor or hide its underlying structure.

Judges can immediately replay the bundled examples without configuring an agent. With a compatible WebMCP browser agent, they can create and revise their own compositions using the same tools.

The current source revision passed 52 automated tests, including validation, patch/action-layer behavior and bundled demo-scene checks. The public repository includes setup instructions and an independently deployed working app.

What we learned

The important output is not only the picture or playback. It is the editable structure that makes the next request possible. Clear names, groups, pivots and explicit approval boundaries make iterative agent-assisted design more practical.

We also learned to distinguish SVG creation from file export: the editor creates and edits SVG compositions today, while a dedicated SVG download/export workflow remains planned.

What's next

We want to add SVG download and project import/export, reusable illustration templates and clearer browser-agent onboarding. Later work includes shareable projects, collaboration and video export.

We also want to measure creation time and revision quality against manual vector-design workflows. We are not claiming measured time savings or existing user adoption.

Try it

Live editor: https://glyph-builders.slate-app.online/

Order to Door: https://glyph-builders.slate-app.online/?scene=order-to-door-scene

Signal Foundry: https://glyph-builders.slate-app.online/?scene=signal-foundry-scene

Select a sample and press Play. Inspect its editable elements and timeline. A compatible WebMCP browser agent is needed for natural-language authoring, but not for playing the examples or using the editor manually.

To try creation, select Motion Playground and ask your browser agent to create an editable illustration from primitives, preview it, and wait for your approval. Apply the composition when satisfied, then request an animation if desired. Saving persists the project only in that browser.

To run locally, follow the repository README: Node 20+, pnpm install, then pnpm dev. Run pnpm test, pnpm check and pnpm build for code-level verification.

Public source and setup: https://github.com/varun-a-1010/glyph-motion-studio-ai-builders

Demo video: https://youtu.be/4zqB26TclCc

Presentation deck (PDF and editable PowerPoint): https://github.com/varun-a-1010/glyph-motion-studio-ai-builders/releases/tag/ai-builders-submission-2026

Current scope

Glyph is a local-first, compact vector scene editor. Projects save to local browser storage. AI authoring needs a compatible browser agent. Agent-created scenes are bounded to 60 discoverable vector targets, with up to 24 timeline steps and 12 seconds of animation. Raw SVG import, dedicated SVG/video export, cloud accounts and collaboration are not implemented.

Built With

Share this project:

Updates

Submission history