HyperCodeMotion MCP

io.github.jasp402由 GitHub 账号 jasp402 发布v0.9.0更新于 Nov 3, 2026

验证AI制作的动态图形，并将其打包为可编辑的HyperCodeMotion项目。

AI 翻译由 AI 模型根据下方的原文描述翻译，可能有误。

原文描述

Validate AI-made motion graphics and package them as editable HyperCodeMotion projects.

已验证Streamable HTTP可网页运行开发者工具媒体与设计

概览

HyperCodeMotion 的托管 MCP 服务（mcp.hypercodemotion.com）；无需登录；Streamable HTTP；10 个工具。

暂无 AI 概览：以下信息来自注册中心条目和服务本身。

端点
mcp.hypercodemotion.com
最近检查

安装

在 SourceWeft 中

  1. 打开 控制台中的 HyperCodeMotion MCP，将其添加到工作区。
  2. 为需要使用其工具的对话启用该服务。

Web executable，通过 Streamable HTTP。 远程服务在工作区中配置后即可从网页运行时运行。

交给智能体安装

把这段提示词粘贴到 Claude Code、Codex、Cursor 等智能体，或 SourceWeft 对话中。智能体会读取该服务器的安装指南，先向你展示发布者、端点和登录方式，经你同意后再把它添加到你的客户端。密钥不会写进任何命令。

阅读 https://sourceweft.com/mcp/io.github.jasp402%2Fhypercodemotion-mcp/install.md，并按其中说明把这个 MCP 服务器接入我的客户端。修改任何配置之前，先告诉我它的发布者、端点和登录方式，等我确认。不要把 API 密钥写进命令或我会提交的文件；问我密钥应从哪里获取。

查看智能体所依据的安装指南

其他 MCP 客户端

把它添加到你客户端的 mcpServers 配置中。

{
  "mcpServers": {
    "hypercodemotion": {
      "type": "http",
      "url": "https://mcp.hypercodemotion.com/mcp"
    }
  }
}

README

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):

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

  • By hand (clone or download this repository):

    bash
    mkdir -p ~/.claude/skillscp -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

bash
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

ToolWhat it doesAnnotations
get_capabilitiesLists the formats, layer types, layer properties and effect presets that Studio supports, how to reference files the user keeps in Studio (photos, logo, video clips) by id, the screen rule that decides type size, a runtime layer that keeps an existing Lottie, glTF or GSAP file and seeks it, the scene transitions (transitions: types, dur, dir, ease), a short start guide (start), the names code layers and components must not redeclare (reservedCodeNames) and the Studio revision they come from.read-only
get_motion_recipeOn demand: real, validated JSON/HTML/CSS patterns for looks the basics do not give. Without name it returns the index; with one, a recipe: riso (print, overprint, grain), choreography (keyframes, springs, easings), audio, camera, code-texture, ui-mockup (the 11 ui kinds), scene-bg (a background per scene), looks (the 13 looks in one table) and look:<id> (one look in full). Plain text result; it stores nothing.read-only
create_hcmotionValidates a finished composition and packages it as a .hcmotion file. Invalid input returns created: false with the errors to fix and stores nothing. Valid input returns open and download links (24 h).write (creates a temporary file), not destructive
get_templateReturns the full design of a Studio gallery template by its id and format (brief, scenes, HTML scene documents and layers), to use as a design reference.read-only
validate_jsonChecks a composition, design or improvement patch and returns errors and warnings. Rejects measurable text that cannot fit the canvas and line-height below 1. Warns (RESERVED_NAME_DECLARED) when a code layer or component declares a name the engine already provides (S, H, ctx, t, w, h, helpers such as range). It does not prove a correct render.read-only
get_recreation_briefTakes the link of a public motion video (prompt-motion.com or oneshotted.io) and a moderator code (only moderators make gallery templates), plus the video file, prompt, title and author that Claude reads on that page (the source sites often refuse servers), and returns its source details, its published prompt when available, the brief to recreate it as a gallery template and reference frames of the original video (extracted once per video; the first call may answer that they are being prepared). prompt-motion.com refuses every server, so for its videos the brief returns a short script that Claude runs in its own code tool (or the same steps in a browser tool) to download the video and send it here in parts.write (starts the frame extraction), not destructive
propose_templateSubmits the recreation (three compositions and the gallery card), with the moderator code. Checks the source, the compositions and the card; when accepted, renders the composition in the original's format with the Studio engine and compares it with the original frame by frame. Send fixes with the same code (up to 3 comparisons). Returns a tracking code.write, not destructive
get_proposal_statusReturns the status of a proposal by its tracking code: comparing, review (with the comparison sheet: original and recreation side by side), rendering, published (with its gallery id, branch and commit), failed (with the reason) or retired.read-only
publish_templatePublishes a compared proposal as an official Studio template, with the moderator code and notes on what is consciously different from the original: the Studio workflow renders its gallery media and commits it to the Studio code (TEMPLATE_BRANCH).write, not destructive

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 private Vercel Blob store. Anyone with the link can download it until it expires after 24 hours; a daily job deletes expired files (at most about 48 hours after creation).
  • No accounts, cookies, tracking or AI training on your content.

Gallery templates (setup)

A moderator sends Claude the link of a prompt-motion.com or oneshotted.io video and their moderator code; that is enough for Claude to recreate it, compare it and publish it. The Studio repository's community-render workflow extracts the reference frames, renders the comparisons (sheet and comparacion.mp4, readable by a moderator at GET /api/community?op=compare&id=c-…&file=comparacion.mp4 with their code as bearer) and, on publication (kind: official), renders the gallery media, commits the template to apps/studio/public on its own branch plantilla/<slug> and opens a pull request against TEMPLATE_BRANCH (default template), so each template has its own preview to approve or discard: plantillas/<slug>-<variant>.json, bienvenida/ejemplos/<slug>-<ratio>.{mp4,jpg} and its card in the gallery. Environment variables in this Vercel project: GITHUB_DISPATCH_TOKEN (fine-grained token with Contents: read and write on jasp402/HyperCodeMotion, used only to start that workflow), no shared secret with the workflow: its callbacks carry GitHub's OIDC token (audience hypercodemotion-mcp, repository RENDER_REPO, default jasp402/HyperCodeMotion), checked here against GitHub's keys (COMMUNITY_RENDER_SECRET is still accepted while set), TEMPLATE_ADMIN_CODES or COMMUNITY_ADMIN_SECRET (moderator codes: one code, or name:code, name:code; codes shorter than 6 characters are ignored) and optionally TEMPLATE_BRANCH.

Full details: Privacy Policy · Terms of Service · Support

Support

Email [email protected] (also [email protected]) or open a GitHub issue. Issues are public: never post passwords, tokens or confidential project content.

For developers

Protocol

The server speaks JSON-RPC 2.0 over HTTP POST (initialize, ping, tools/list, tools/call). A GET on the endpoint returns 405 with a short explanation, which is expected. Request bodies are limited to 4 MB.

.hcmotion layout

OffsetSizeContent
03HCM (ASCII)
31format version (1)
41flags (bit 0: gzip)
53reserved (0)
84JSON size, uncompressed (u32 LE)
124data size (u32 LE)
1632SHA-256 of the data
48ncomposition JSON, gzip

It is not encrypted: the SHA-256 only detects truncated or edited files. Studio implements the same layout in packages/core/src/hcmotion.ts.

Files are served at https://mcp.hypercodemotion.com/d/<id> and open in Studio at https://app.hypercodemotion.com/?p=<id>. After 24 hours the link returns 410.

Deployment settings

  • A private Blob store connected to the Vercel project. It authenticates through OIDC (BLOB_STORE_ID + the project's OIDC token); a BLOB_READ_WRITE_TOKEN also works.
  • CRON_SECRET so only Vercel Cron can call /api/cleanup.
  • Optional PUBLIC_URL / STUDIO_URL (default https://mcp.hypercodemotion.com / https://app.hypercodemotion.com).

Testing

bash
npm test          # unit and integration testsnpm run test:live # smoke test against productionnpm run build:skill # builds dist/hypercodemotion-skill.zip

GitHub Actions runs both. Neither guarantees full Studio rendering compatibility.

Motion recipes and self-review

src/recipes.js builds every recipe from a composition fragment (layers, docs, scenes, audio); the text a model reads is generated from that same fragment, and tests/recipes.test.js runs each one through validateJson and checkComposition (no error and no warning other than CONTRACT_NOT_CHECKED). src/looks.js holds the 13 looks and their deco code, copied from Studio packages/core/src/looks.ts (contract c75a0b3); refresh it when the Studio looks change. Nothing in a recipe is part of the fixed tool/instruction load: only its on-demand result.

validate_json (and create_hcmotion when it creates the file) returns a short checklist for compositions that are valid; it is never sent next to errors. New warnings: TEXT_OVERLAP (two different static texts on the same spot at the same time; echoes, rotated or animated blocks are exempt), UNKNOWN_EASE (keyframe ease, keyframe spring mode and animEase names Studio would silently replace) and TEXT_FIT_UNEVALUATED (text that is an expression). Keyframed text is now measured on every value instead of its default (the old TEXT_DOES_NOT_FIT false positive).

Capabilities snapshot

The catalog is derived from Studio source files (packages/core/src/schema.ts, packages/core/src/presets.ts) and must be reviewed when Studio changes.

HyperCodeMotion Creative Skill

The repository also contains the HyperCodeMotion Agent Skill, which guides AI assistants from brief to art direction, scenes, editable JSON and the .hcmotion handoff. It is distributed separately from the connector and does not activate just because the connector is connected: see Install the skill. validate_json also warns about reserved names declared in code layers (RESERVED_NAME_DECLARED: top-level const, let, var, function, class, catch or destructuring of S, H, ctx, the scope variables or a helper; Studio tolerates it, but the original name is hidden) and about scene and transition mistakes (SCENE* and TRANSITION_* codes: unknown type, first scene, missing dur, overlap).

License

Source code: Apache License 2.0. The hosted service is subject to the Terms of Service. HyperCodeMotion names and logos are not licensed by the software license.

来源：README.md，提交 769d2c0

工具

10

get_capabilities

HyperCodeMotion Capabilities

List the HyperCodeMotion JSON formats, layer types and properties, and effect presets that HyperCodeMotion Studio supports, how to reference files the user keeps in Studio by id, the screen rule that decides type size (field screen: the canvas wins over a requested size), a runtime layer that keeps an existing Lottie, glTF or GSAP file and seeks it, scene transitions (field transitions), a short start guide (field start), the names code layers and components must not redeclare (field reservedCodeNames), and the Studio contract revision they come from. Call it before designing.

无需输入参数。

get_motion_recipe

Get motion recipe

Real, validated JSON/HTML/CSS patterns for looks the basics do not give: riso print, choreography, audio, camera, code textures, UI mockups, per-scene backgrounds, 13 style looks, professional glitch. Without name: the index.

输入参数name

create_hcmotion

Create HyperCodeMotion project file

Validate a finished HyperCodeMotion composition and package it as a .hcmotion project file, the format HyperCodeMotion Studio opens. If the composition has problems, returns created: false with the errors to fix and stores nothing. On success, stores the file temporarily and returns an `open` link (opens the project in HyperCodeMotion Studio) and a `download` link; both expire 24 hours after creation. Pass the user's images, videos and audio in `media` (public https links, or files sent with start_media_upload) and they travel inside the file, so the project opens complete. It does not render video or generate media.

输入参数json必填namemedia

start_media_upload

Send files for a project

Open an upload for the user's own images, videos, audio or fonts that are not at a public https link (attachments, files in your sandbox), so create_hcmotion can pack them inside the .hcmotion (binary, max 150 MB per file, 200 MB per project). Takes the files' ids (the ones layers will use as props.asset) and returns: script, a shell function to send each file in parts with curl (needs network access to mcp.hypercodemotion.com); part and done, the endpoints it uses (POST raw bytes of up to partBytes per part, then done); page, a link where the user drops the files in a browser; and upload, the code to put in create_hcmotion media as {id, upload}. Try the script first; if your shell cannot reach the host, give the user page and wait until they say the files are in. The upload lasts 24 hours.

输入参数files必填

get_template

Get HyperCodeMotion template

Return the full design of a template from the HyperCodeMotion Studio gallery, by its id and format: brief (palette, fonts, frame, rhythm), scenes with timings, and the composition with its HTML scene documents and layers. Use it as the design reference when asked to follow a template; it does not create or store anything.

输入参数formattemplate必填

validate_json

Validate HyperCodeMotion JSON

Check a composition (layers), design (elements), or improvement patch (add/change/remove/sfx) and return actionable errors and warnings. Rejects measurable text that cannot fit the canvas safe area, text that crosses the canvas, and line-height below 1. Warns when a code layer or component declares a name the engine already provides (RESERVED_NAME_DECLARED). This is not proof of a successful render.

输入参数json必填composition

get_recreation_brief

Get template recreation brief

Start turning a public motion video into an official HyperCodeMotion Studio gallery template. Use it whenever the user sends the link of a prompt-motion.com or oneshotted.io video together with a moderator code, with or without other words: that means publish it as a template. Takes that link and code (adminCode) and what that page shows (its video file, prompt, title and author, read by the caller, since the source sites often refuse this server) and returns the source details (title, author, and the published prompt when the page shows it), the brief (how to recreate it in three formats with the HyperCodeMotion signature, and the gallery card to fill in) and reference frames of the original video as images, labelled with their times. The first call starts extracting those frames and may answer reference.status: preparing; call it again until it is ready, and do not build before seeing them. When it answers reference.status: upload (prompt-motion.com refuses servers), run upload.script in a code or shell tool to send the video, then call it again. If the video is already a template, says so with its status instead; an unfinished proposal left idle for 20 minutes (another session) is discarded and the brief starts over (field restarted). Without a valid moderator code it answers needsCode.

输入参数url必填titlevideoauthorpromptadminCode必填authorUrl

propose_template

Propose a gallery template

Submit a recreated video as an official HyperCodeMotion Studio gallery template, with the moderator code: the source link, its three compositions (cuadrado 1080×1080, vertical 1080×1920, horizontal 1920×1080) and the gallery card. It checks the source, the compositions and the card; if anything fails it returns accepted: false with the errors to fix and keeps it as a draft with a code, to be fixed with patch (estimated text overflows are only warnings). Do not call validate_json first: this runs the same checks. When accepted, the composition in the original's format is rendered with the Studio engine and compared with the original frame by frame; get_proposal_status returns that comparison. To send fixes after a comparison, call it again with the same code (up to 3 comparisons): send only patch (the changes, applied to the stored compositions; card may be left out) instead of the three full compositions, unless you are redesigning. Nothing is published until publish_template. A video that is already a template is not stored twice.

输入参数url必填cardcodepatchadminCode必填compositions

get_proposal_status

Get template status

Return the status of a gallery template proposal by the tracking code propose_template gave: comparing (it waits a little while the comparison renders), review (with the comparison sheet as an image: original and recreation side by side at the same moments), rendering (its media are rendered and it is being committed to the Studio code), published (with its template id and the link of its pull request, whose preview shows it in the gallery), failed (with the reason) or retired.

输入参数code必填

publish_template

Publish a gallery template

Publish a compared template as an official HyperCodeMotion Studio gallery template once its comparison with the original looks faithful. Takes the tracking code, the moderator code and notes on what is consciously different from the original and why. Its gallery videos are rendered and the template is committed to the Studio code on its own branch, with a pull request whose preview shows it in the gallery: a moderator approves (merges) or discards it there. get_proposal_status gives the pull request link.

输入参数code必填notes必填adminCode必填

版本历史

9
  1. v0.9.0最新Nov 3, 2026
  2. v0.8.0Oct 21, 2026
  3. v0.7.1Oct 21, 2026
  4. v0.7.0Oct 20, 2026
  5. v0.6.2Oct 19, 2026
  6. v0.6.1Oct 19, 2026
  7. v0.4.0Oct 18, 2026
  8. v0.3.0Oct 17, 2026
  9. v0.2.0Oct 14, 2026

评分

已满足适用检查项的 100%

该评分衡量此收录条目的完整程度，依据注册中心条目、端点与公开来源计算得出。它不是对服务器本身的评价，也不表示服务器安全或当前可用：可连通性是带日期的检查结果，评分也不包含安装量或用户评价。

  • 近 30 天内可连通必需25 分
  • 已声明认证方式必需10 分
  • 已列出工具必需15 分
  • 描述必需15 分
  • 图标10 分
  • 文档15 分
  • 许可证10 分