mcp-motion

AI-native MCP server for animated educational content. Any LLM (Claude, GPT, Gemini, open-weight) can create 3Blue1Brown-style math animations through simple tool calls — write LaTeX, plot functions, highlight answers, draw shapes.

Live web viewer included. Embed in your frontend via iframe.

Install

npm install -g @ahmeterdempmk/mcp-motion

Or use directly with npx:

npx @ahmeterdempmk/mcp-motion

Use with Claude Code

claude mcp add mcp-motion npx @ahmeterdempmk/mcp-motion

Then ask Claude anything:

"Plot f(x) = sin(x) and explain its properties" "Solve x² - 5x + 6 = 0 step by step" "Prove the Pythagorean theorem visually"

Browser opens automatically at localhost:3030 showing the live animated canvas.

Use with Claude Desktop

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "mcp-motion": {
      "command": "npx",
      "args": ["-y", "@ahmeterdempmk/mcp-motion"]
    }
  }
}

Tools

Writing:

• write_tex — write LaTeX math
• display_text — plain text labels/titles

Graphing:

• draw_coordinate_system — x/y axes with grid
• plot_function — function curve (any JS math expression)
• plot_line — line through points
• add_dots — colored dots/points
• draw_shape — rectangles, ellipses, polygons

Annotations:

• highlight_text — highlight question text
• crossout_text — cross out wrong answers
• circle_text — circle correct answer
• finalize_answer — for multiple choice

Flow:

• canvas_create — new session with question/OCR context
• page_switch — new page
• clear_canvas — clear all
• get_canvas — current state

Plus 15 advanced scene-graph tools for complex animations using the Motion Graph Protocol IR.

Embed in your frontend

<iframe
  src="http://localhost:3030/embed"
  style="width:100%;height:600px;border:none;border-radius:12px"
></iframe>

<script>
  const canvas = document.querySelector('iframe');
  canvas.contentWindow.postMessage({
    type: 'commands',
    commands: [
      { command: 'write_tex', latex: 'E = mc^2', index: '001', duration: 2, voice: '' },
      { command: 'plot_function', expression: 'Math.sin(x)', x_range: [-6, 6], index: '002', duration: 2, voice: '' }
    ]
  }, '*');
</script>

Output

Every tool call returns:

• SVG image — inline rendering in Claude Code terminal
• AnimationJSON — full command list (compatible with MotionShark frontend renderer)
• Live web viewer update — localhost:3030 shows real-time animations

License

Apache-2.0