KineticFlow: AI Motion Design Studio

An agent native motion design workspace bridging visual timeline editing with WebMCP driven key-framing, SVG orchestration, and real-time animation.

Comment

Inspiration

Motion design tools are powerful, but even small animation changes often require repetitive timeline editing, precise layer targeting, and multiple export steps. Browser agents usually struggle with these tools because they must guess what the user selected and interact through fragile screen coordinates.

I built KineticFlow to explore a better model: the designer points to what they mean, while the AI agent handles the structured motion work. WebMCP makes this possible by giving agents direct, typed access to the application’s canvas and timeline state.

What it does

KineticFlow is a browser-native vector motion design studio where humans and AI agents work on the same canvas.

A designer can select a layer and ask an agent to:

  • Inspect the complete scene and current human selection
  • Add rectangles, circles, hearts, stars, and sparkles
  • Refine a layer’s position, size, color, rotation, scale, or opacity
  • Generate multi-track animation keyframes
  • Apply easing curves and spring physics
  • Load polished motion presets
  • Play, pause, or seek the live preview
  • Export the animation as CSS, animated SVG, or Lottie JSON

Every operation appears in a live Tool Stream with its inputs, structured result, status, and execution time.

Designers can continue editing manually, drag objects, adjust properties and keyframes, or undo an agent’s changes.

When WebMCP is unavailable, an in-page co-pilot and manual tool tester use the same underlying handlers, making the complete experience accessible in standard browsers.

How I built it

KineticFlow is built with:

  • React
  • TypeScript
  • Vite
  • Zustand
  • Tailwind CSS
  • SVG
  • Netlify

The WebMCP integration registers seven imperative tools through document.modelContext.registerTool().

Each tool includes:

  • A focused name and human-readable title
  • A natural-language description
  • A strict JSON Schema inputSchema
  • Input validation
  • Structured return values
  • Cancellation-signal support
  • Read-only annotations where appropriate

The main architectural component is a shared Zustand editor store. The canvas, timeline, property controls, in-page co-pilot, and browser agent all read and update the same state.

The getCanvasScene tool returns more than a scene snapshot. It also provides:

  • The layer selected by the human
  • The current playhead position
  • Playback status
  • Loop state

This enables natural handoffs such as:

Make this coral, add a spring pulse, and play it.

The user does not need to find or provide an internal layer ID.

A requestAnimationFrame loop drives the live preview, while a custom interpolation engine evaluates position, scale, rotation, opacity, width, and height tracks.

The exporter compiles the shared scene into reusable CSS and HTML, standalone animated SVG, or Lottie JSON.

The application is deployed on Netlify with SPA routing, security headers, asset caching, and an explicit tools=(self) permissions policy.

Challenges I ran into

WebMCP is an emerging specification, so one major challenge was keeping the implementation aligned with the latest API.

Earlier experiments used navigator.modelContext and a parameters field, while the current specification uses document.modelContext and inputSchema. I migrated the primary implementation while retaining a compatibility path for earlier experimental builds.

Another challenge was designing tools that were useful to an agent without removing control from the designer. Small atomic tools were precise, but agents also needed enough context to understand the user’s intent.

Returning the current human selection alongside the scene created a much more natural collaboration model.

I also had to ensure that tool responses reflected the updated state rather than a stale snapshot. Playback and animation handlers now read the store again after mutations before returning structured results.

Finally, animation exports required translating the same internal motion model into three different formats while preserving timing, transforms, opacity, and layer geometry.

Accomplishments that I’m proud of

  • Built a complete motion-design product rather than only a technical proof of concept
  • Implemented seven structured WebMCP tools
  • Created a shared-context workflow between human selection and agent action
  • Added multi-track keyframes, easing curves, and spring-motion interpolation
  • Made agent operations visible through a real-time execution stream
  • Produced CSS, animated SVG, and Lottie exports
  • Added a fallback co-pilot and manual tester powered by the same handlers
  • Created automated smoke tests that register and execute all seven tools
  • Deployed the application publicly with WebMCP-compatible permissions

What I learned

I learned that agent-native applications work best when agents receive semantic actions and meaningful application state—not just access to buttons and screen coordinates.

WebMCP is especially valuable for creative software because human intent is often communicated through selection. A designer clicking a layer is already providing useful context.

Exposing that selection to the agent allows short, natural instructions to become precise structured operations.

I also learned that tool descriptions, schemas, validation, and return values are part of the product experience. Well-designed tools make agents more reliable while making the system easier for humans to understand and trust.

What’s next for KineticFlow: AI Motion Design Studio

Planned improvements include:

  • Agent-generated motion plans that designers can preview before applying
  • Multi-layer selection and batch animation operations
  • Natural-language editing of easing curves and spring parameters
  • SVG import and advanced path manipulation
  • Collaborative history with agent-versus-human change attribution
  • Reusable brand and motion-style systems
  • Additional production exports and framework integrations
  • Declarative WebMCP support as the specification matures

The long-term goal is to make KineticFlow a creative workspace where humans provide taste, direction, and final judgment while agents handle repetitive, structured animation work.

Built With

Share this project:

Updates

Submission history