HyperCodeMotion MCP

HyperCodeMotion MCP

Connect Claude to HyperCodeMotion, an editor for data-driven motion graphics. Claude designs the animation; this connector checks it and turns it into a .hcmotion project you open in HyperCodeMotion Studio, where you change texts, colors, timing and order yourself instead of asking the AI to regenerate everything.

• MCP endpoint: https://mcp.hypercodemotion.com/mcp (remote, streamable HTTP)
• Authentication: none. The service has no accounts and reads no data from your Claude account.
• Studio: app.hypercodemotion.com

Use it in Claude

1. In Claude, open Settings → Connectors and choose Add custom connector.
2. Name it HyperCodeMotion and paste https://mcp.hypercodemotion.com/mcp.
3. In a chat, turn the connector on from the tools menu.
4. Ask for an animation, or paste a prompt copied from HyperCodeMotion Studio («Crear con IA» → «Generar prompt»).
5. Claude replies with two links:

• Open: opens the project directly in HyperCodeMotion Studio.
• Download: the .hcmotion file, which you can also open from the Studio home screen («Cargar proyecto»).

Both links expire 24 hours after they are created. Save the project from Studio (Archivo → Guardar proyecto) to keep it.

Example prompts

• *“Create a 15-second vertical launch video for Nimbus, a note-taking app with AI, and give me the HyperCodeMotion project.”*
• *“Make a 10-second explainer with three steps for brewing pour-over coffee, 16:9, and package it for HyperCodeMotion.”*
• *“Which layer types and effects does HyperCodeMotion support?”*

Install the skill (recommended)

The connector only checks and packages a project. The HyperCodeMotion skill is what makes Claude ask for the canvas size, plan scenes and transitions, and follow the design guidance (typography, HTML scenes, motion, validation). A skill is a separate install: connecting the connector does not add it, and the connector cannot install it for you. Install both.

Download: hypercodemotion-skill.zip (a rolling release, rebuilt from main by .github/workflows/release-skill.yml; its SHA256SUMS is next to it), or build it yourself from this repository (see Build the ZIP).

claude.ai (web) and Claude Desktop

1. Turn on Code execution and file creation in Settings → Capabilities (skills need it; the setting is called *Create and edit files* in the newer layout).
2. Open Customize → Skills, click +, then + Create skill, then Upload a skill.
3. Choose hypercodemotion-skill.zip. The skill appears in the list; make sure its toggle is on.
4. In a new chat, turn on the HyperCodeMotion connector as well and ask for a video. Claude should ask for the canvas size first (1080×1920, 1080×1080, 1080×1350, 1920×1080 or custom).

Requirements Anthropic documents for the ZIP: the skill folder is the ZIP root (hypercodemotion/SKILL.md, not loose files), the folder name equals the skill name, description is at most 200 characters. npm run build:skill checks all three.

Free accounts: Anthropic's Help Center (*Use skills in Claude* and *How to create custom skills*, read on 2026-10-24) states that skills are available on Free, Pro, Max, Team and Enterprise plans, and that on Free, Pro and Max you upload your own in Customize → Skills. On Team and Enterprise an owner can disable user-created skills. Other Anthropic pages have worded the plan list differently over time; if Customize → Skills is missing or greyed out, code execution is off (or your organization turned skills off), which is the case the Help Center describes. We have not tried an upload on a Free account ourselves. A skill uploaded on claude.ai does not appear in the API; each surface keeps its own skills.

Claude Desktop uses the same Claude account and the same Customize → Skills screen as claude.ai. Anthropic's article does not describe a Desktop-specific route and we did not click through the Desktop UI, so treat the steps above as the expected route there.

Claude Code

Any of these puts the skill folder in ~/.claude/skills/hypercodemotion/SKILL.md:

• One command (verified: installs to ~/.claude/skills/hypercodemotion; needs Node 22.20 or newer):

  npx skills add jasp402/HyperCodeMotion-MCP --skill hypercodemotion -a claude-code -g -y

• By hand (clone or download this repository):

  mkdir -p ~/.claude/skills

cp -r skills/hypercodemotion ~/.claude/skills/

Use .claude/skills/ inside a project to install it for that project only.

• Through your account: Claude Code v2.1.273 or newer syncs the skills you enabled on claude.ai when you sign in with that same account (not with an API key). Run /skills to see them under *claude.ai sync*.

Then add the connector: claude mcp add --transport http hypercodemotion https://mcp.hypercodemotion.com/mcp.

Restart the session and run /skills to confirm hypercodemotion is listed. We did not run Claude Code itself for this document: the install paths above were checked on disk and against Anthropic's documentation. We do not ship a Claude Code plugin or marketplace manifest.

Build the ZIP

npm run build:skill        # writes dist/hypercodemotion-skill.zip (Node only, no zip binary needed)

The script packs skills/hypercodemotion with the folder as ZIP root, in a reproducible order, and fails if SKILL.md would be rejected (name not equal to the folder name, description over 200 characters). npm test rebuilds the archive and reads it back with an independent ZIP reader (every file, size and CRC-32).

What you lose with the connector alone

With only the connector, Claude still validates and packages projects, but the guidance that lives in the skill is missing: no canvas-size question (it may pick a format for you), no art-direction, typography or HTML-scene guidance, no motion and transition vocabulary beyond what get_capabilities returns, and no checklist before delivery.

To keep that loss small, get_capabilities returns a short start guide (ask the canvas size, one scene per beat joined with transitions, deliver only the links) and the transition contract (transitions). Claude calls it before designing, and its result is text Claude always receives. We did not rely on the server instructions string returned by initialize: per community reports in anthropics/claude-ai-mcp#93 claude.ai does not pass it to the model (Claude Code does), and in #1105 a reporter saw custom-connector tools reach the model as bare names until a tool search. These are third-party reports, not Anthropic documentation, and we have not reproduced them ourselves.

Bigger options, not implemented (each adds always-loaded tokens or needs a decision): a get_guide(topic) tool that returns the skill's reference pages on demand, an MCP *prompt* the user picks from the menu, or MCP *resources* for the references. See docs/CAPABILITY-GAP-AUDIT.md.

Tools

The recreation itself happens in the user's own Claude conversation; the connector gives the brief and the reference frames, and returns the comparison with the original. It does not render video for users, generate images, audio or video with AI models, or access anything outside the request it receives.

Data and privacy

• get_capabilities, get_motion_recipe, get_template, validate_json and get_proposal_status store nothing.
• get_recreation_brief stores reference frames of the public source video in the private store (never published), so the recreation can be compared with it.
• propose_template stores the proposal, its card and its source link (no personal data) until a moderator publishes it, which commits it to the Studio code. A salted hash of the moderator's name is kept for one day to limit proposals to 20 a day per moderator.
• create_hcmotion stores the generated file in a