Log inSubmit server
Motionspec logo

Motionspec

by MasterPlayspots

Validates reduced-motion-safe web animation specs and deterministically compiles them into budgeted vanilla-GSAP JavaScript and CSS.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Motionspec

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "masterplayspots-motionspec": {
      "command": "npx",
      "args": [
        "-y",
        "motionspec"
      ]
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

Automated check passed— started and listed 5 tools correctly (18d ago).

Overview

The MasterPlayspots/motionspec MCP server validates structured web-animation specifications against an approved catalog and compiles accepted specs into vanilla-GSAP JavaScript and CSS. Agents can run it locally with `npx motionspec`, while a hosted streamable-HTTP endpoint provides keyless catalog and validation access. The compiler enforces reduced-motion behavior, checks animation budgets, rejects unsafe input, and adds pause-path handling for continuous loops. Reach for it when an AI-generated web interface needs deterministic, accessibility-aware motion output rather than unconstrained animation code.

Use cases

  • Validate AI-authored animation specifications before deployment
  • Compile approved motion specs into GSAP JavaScript and CSS
  • Check web animations for reduced-motion and pause-path requirements
  • Inspect the approved motion primitive catalog
  • Audit motion accessibility for WCAG 2.2.2 and 2.3.3 concerns

Key features

  • Schema validation for motion specifications
  • Allow-listed catalog of 40 motion primitives
  • Deterministic vanilla-GSAP and CSS compilation
  • Enforced reduced-motion fallback
  • Pause-path generation for persistent loops
  • Keyless hosted catalog and validation endpoint

Tools5

What Motionspec lets your agent do. Expand a tool for its parameters.

Verified live~782 tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked Today

Recent health check succeeded.

18/21 checks healthy over the last 78d

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 10d ago via OSV.dev · motionspec (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars1Stargazers on the source repository.
npm downloads1.1kPackage downloads in the last 30 days.
Last commitTodayMost recent push to the default branch.
Availability100%Our rolling endpoint + install checks that succeeded.
Install checkPassedOur sandbox started it and listed its tools.
Tools exposed5Callable tools this server registers over MCP.
Directory activity1 viewsConfig copies, upvotes, and views on AllMCPs.

How Motionspec works

What MasterPlayspots/motionspec does

The MasterPlayspots/motionspec MCP server provides a trust boundary for AI-authored web animation. An LLM produces a schema-validated JSON specification, and the server checks that specification against a controlled catalog before compilation. The supported build target is vanilla-gsap, using GSAP and ScrollTrigger. Output consists of ordinary JavaScript and CSS files that can be included in a web application.

The catalog contains 40 approved primitives. Specifications cannot introduce primitives, parameters, selectors, or trigger values outside the accepted rules. The compiler also applies a performance budget and rejects unsafe or malformed values instead of attempting to repair them silently.

How it works

A request enters the MCP server, where the specification is validated at the trust boundary. Accepted input is passed to a deterministic compiler; identical specifications produce byte-identical output. Reduced-motion protection is enabled by default at compile time, so generated output includes a prefers-reduced-motion guard even when the field is omitted from the specification. Explicitly disabling that behavior produces a diagnostic.

Continuous animations receive additional handling. Loop primitives are required to identify as persistent, and the compiler creates a pause path tied to html[data-ms-paused]. With the default automatic setting, it also emits an accessible pause or stop button with synchronized aria-pressed state, visible focus treatment, and a minimum 24-pixel target. Integrators can instead provide their own control through the API option.

Setup and configuration

Run the local server without a package installation:

Terminal
npx motionspec

An MCP host can register the same command, for example:

Terminal
claude mcp add motionspec -- npx motionspec

The package also exposes a CLI compiler. After installing the package globally, compile a JSON specification with motion compile spec.json; generated files are written to an out directory in the current working directory. The repository is also available as a Claude Code plugin, including the local MCP server and motion authoring and audit skills.

A hosted streamable-HTTP endpoint is available at https://api.motionspec.dev/mcp. Its keyless access covers motion_catalog and motion_validate. The compile, audit, and statistics capabilities are provided through keyed tiers.

Tools and capabilities

The MasterPlayspots/motionspec MCP server exposes five capabilities named motion_catalog, motion_validate, motion_compile, motion_audit, and motion_stats. Local use through npx motionspec bundles all five tools.

Use the catalog capability to inspect approved motion primitives, validation to check a specification, and compilation to produce the supported GSAP-based output. Audit supports motion-accessibility checking, including WCAG 2.2.2 and 2.3.3 concerns. Statistics provide the server's reported metrics capability.

Limitations and notes

Only the vanilla-gsap target is exposed through the CLI and MCP interfaces. A WAAPI/CSS lowering exists internally but has no CLI flag, MCP route, or schema target. The server addresses animation inside web applications; it is not a video-generation system and should not be confused with similarly named mobile or animation libraries.

Schema version 1.0 is the stable public contract, while 0.1 is deprecated. Catalog versions can be pinned for reproducible builds. The core is distributed under the MIT license.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Motionspec

MasterPlayspots/motionspec is an MCP server that connects AI hosts to a validated web-animation catalog and compiler. Its main tools are motion_catalog, motion_validate, motion_compile, motion_audit, and motion_stats. It checks JSON motion specs and can emit deterministic vanilla-GSAP JavaScript and CSS with reduced-motion safeguards.

Run `npx motionspec` to start it without a package installation. You can register that command with an MCP host, such as `claude mcp add motionspec -- npx motionspec`. The npm package can also be installed globally for the separate `motion compile` CLI.

Yes, it works with Claude Code through `claude mcp add motionspec -- npx motionspec`. The repository also includes a Claude Code plugin with the MCP server and motion authoring and audit skills.

It generates vanilla-GSAP JavaScript and CSS for the supported `vanilla-gsap` target. The compiler produces deterministic output, includes reduced-motion handling by default, and adds pause-path behavior for qualifying continuous loops.

Related MCP servers

All in Developer Tools All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewMotionspec AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/masterplayspots-motionspec?style=directory)](https://allmcps.com/mcp/masterplayspots-motionspec)
HTML Embed
<a href="https://allmcps.com/mcp/masterplayspots-motionspec"><img src="https://allmcps.com/api/badge/masterplayspots-motionspec?style=directory" alt="Motionspec on AllMCPs" /></a>