Browser Motion Proof — Cursor plugin

This plugin adds a small MCP tool that opens a web address in Chromium (via Playwright) and saves a short video (WebM, about 1–10 seconds) of what happens on the page. That helps an AI (or you) judge motion: scrolling, CSS animations, marquees, and transitions—things a single screenshot cannot show.

It also includes a Skill so Cursor’s agent knows when to call the tool and how to use the resulting file.

Whole page vs part of the page

The MCP tool can record:

• The whole browser window (default)—like a normal screen recording of the page at a chosen size.
• A rectangular area you describe with page coordinates (x, y, width, height from the top of the document)—useful when you only care about one band or column.
• One HTML element you point to with a CSS selector (for example a chart, hero, or component)—the video is cropped to that element (plus a little padding).

The Skill explains focusMode (viewport, region, element) for the AI.

What you need installed

1. Node.js (LTS is fine)—https://nodejs.org

2. Playwright’s Chromium browser (one-time download, not the same as “having Chrome installed”):

   Open a terminal, go to the server folder inside this plugin, then run:

   npx playwright install chromium

   You only need to do this again if you reinstall the plugin on a new machine or delete Playwright’s browser cache.

Try the plugin on your computer (local install)

Cursor loads local plugins from a folder under your user profile.

1. Copy this whole plugin folder or create a shortcut/symlink so it appears under:

   • Windows (typical): C:\Users\<YourName>\.cursor\plugins\local\browser-motion-proof\
   • macOS/Linux (typical): ~/.cursor/plugins/local/browser-motion-proof/

   The inner folder name can be anything; what matters is that plugin.json lives at .cursor-plugin/plugin.json inside that folder (this repo is already laid out that way).

2. Build the server once (so the dist folder exists):

   cd server
   npm install
   npm run build

3. Restart Cursor or reload the window so it picks up the plugin.

4. In Cursor, check Settings → Features → MCP (or your MCP list). You should see the server from this plugin’s mcp.json.

If MCP does not start (path issues)

Some setups resolve paths differently. In that case you can publish the server to npm and point mcp.json at npx instead of a local node path—see “Advanced: npx fallback” below.

Submitting to the Cursor Marketplace

1. Put this project in a public GitHub repository.
2. Open https://cursor.com/marketplace/publish and submit your repo link.
3. Cursor reviews plugins manually; follow their checklist (manifest, README, etc.).

repository and homepage in .cursor-plugin/plugin.json point at https://github.com/dusa89/cursor-browser-motion-plugin — change them if you fork or rename the repo.

Security and trust

The tool opens whatever URL you give it in a real browser. Use it for trusted sites and your own local dev servers (http://localhost…). Do not point it at unknown or malicious pages.

Repository layout

• .cursor-plugin/plugin.json — plugin manifest
• mcp.json — registers the MCP server
• skills/browser-motion-proof/ — agent skill
• server/ — TypeScript MCP server (build with npm run build in server/)

Advanced: npx fallback (after npm publish)

If you publish the server package to npm (for example cursor-browser-motion-mcp), you can replace the local command/args in mcp.json with:

"command": "npx",
"args": ["-y", "your-package-name-on-npm"]

That avoids depending on a built dist folder inside the plugin folder. Document the package name in your README after you publish.

License

MIT — see LICENSE.