motionprompts MCP is a catalog reader and planning assistant for 259 production-grade GSAP/WebGL motion components, providing prompts, composition guidance, and page plans without generating animations or images.
Plan a page’s information architecture with 10–14 sections, motion coverage, and a recommended motion system.
Suggest mechanics for one section by role, including “nothing fits” answers and token-based recipes for catalog gaps.
Suggest page-level treatments such as smooth scroll, section-edge effects, running backgrounds, cursors, and route transitions.
Search and browse components by free text, facets, and measured motion metadata; list facets, components, and motion systems.
Retrieve component metadata, previews, and build prompts; get verbatim prompts plus motion tokens to adapt yourself.
Build integration contracts for a set of components, including rule violations, warnings, budget, ordered init plan, and motion-coverage audit.
Get section-by-section imagery direction: model routing, transparency recipes, six-cutout sheets, and real logo sourcing from Wikimedia.
Run hosted or locally, with optional Bearer key for paid prompts; it makes no network calls, needs no API key, and generates nothing.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@motionprompts plan a landing page for a new product launch"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
An MCP server over a catalog of 259 production-grade GSAP motion components
(motionprompts.dev). A curated set of components is free with the full
prompt; the rest of the library returns a 12-line preview until you pass a Full Stack key
(Authorization: Bearer mpk_..., from motionprompts.dev/account).
Plans: motionprompts.dev/pricing. It does not generate animations: it hands you the
ones that are already solved and debugged, tells you how to compose them without them fighting each
other, and says so plainly when the catalog does not have what you asked for.
Tool | What for |
| The information architecture of a page: 9–14 sections with their role, their job, and whether they should move. Deliberately returns no components. |
| Mechanics for one section, filtered by the real facets of its role. Knows how to answer that there is nothing. |
| The twin of |
| Repairs, mount order and budget for a set of components. It is what stops two entry veils from coexisting, and — given |
| Image direction section by section: which shot is needed, with which model (people, objects and landscape are not interchangeable), how to get transparency, and where real logos come from. Returns text: it generates nothing. |
| The author's prompt verbatim + the motion-system tokens + the instruction to adapt it yourself. |
| Free-text search with |
| Search by measured motion metadata (trigger, cluster, easing, duration) instead of by looks. |
| Meta, preview, prompt and — where the distribution carries it — source. |
| Vocabulary and tokens. |
| Deprecated; use |
Related MCP server: Ultimate GSAP Master MCP Server
The server runs live at https://motionprompts.dev/mcp (Streamable HTTP, stateless; a Bearer key is optional and unlocks the paid prompts).
Add it to Claude Code with one command and you are done:
claude mcp add --transport http motionprompts https://motionprompts.dev/mcpDiscovery manifest: motionprompts.dev/.well-known/mcp.
Requires Node 20 or newer. No API key and no environment variables for the free set; the local package carries only the free prompts in full (the paid ones as previews), so for the whole library use the hosted endpoint with your key.
The package is on npm as motionprompts-mcp —
no clone needed:
claude mcp add motionprompts -- npx -y motionprompts-mcpOr from a clone:
git clone https://github.com/VanguardiaAI/motionprompts-mcp.git
cd motionprompts-mcp
npm installclaude mcp add motionprompts -- node /absolute/path/to/motionprompts-mcp/mcp/server.mjsIn the client's JSON configuration:
{
"mcpServers": {
"motionprompts": {
"command": "node",
"args": ["/absolute/path/to/motionprompts-mcp/mcp/server.mjs"]
}
}
}Check that it works:
npm run verify # end-to-end battery over the real MCP protocolTo self-host the HTTP endpoint instead of stdio: npm run start:http (defaults to
127.0.0.1:4478; configure with MCP_HTTP_HOST / MCP_HTTP_PORT).
This server uses no key and cannot spend anyone's money. It reads no environment variables, asks for no secrets, and makes not a single network call: it opens files from disk and returns text. It is a catalog reader.
That includes plan_imagery, which talks about image models and transparent backgrounds: it returns
text. It is a recipe, not a generator. It names the three models we use ourselves because that is
the useful information — which one is for what — but it calls none of them, and the writing and
cut-out rules work the same with whatever provider you prefer.
If you came looking for the notice about kie.ai: that key belongs to a separate authoring tool — the one that generated the photography for the example pages — which is not part of this package. It is excluded on purpose, so nothing in here can generate images or bill anyone. If you want photography for your pages, use whatever service you prefer with your own account.
Order matters, and it is the hardest thing to get right:
plan_page first. It returns sections, not components: a page can only be as rich as the
list it is composed from, and composing straight from animation mechanics flattens it to five
sections. Adjust the list to the actual brief before going on.
suggest_mechanics per section, with avoid to exclude what you already used. Without it
you will repeat components: broad roles offer a hundred-plus candidates with tied scores, and
reusing the same need string always returns the same first hit.
avoid is for not repeating yourself, not for animating less. If you discard the #1 because
it is taken, take the #2 — they are tied. A section left static because its first candidate was
already used is the most expensive failure of this flow, and it was literally an if in the
example script.
get_integration_contract with all the slugs at once, before writing a line, and with
moving_sections set: it is the coverage audit.
get_component_prompt per component. Re-dress, don't reimplement: change images, copy,
palette, typography and element counts, and keep the mechanic. Discard a component only if its
MECHANIC does not fit — never on aesthetic taste.
plan_imagery before writing a single image prompt, with the same section list.
Five roles are declared catalog gaps (faq, data, pricing, testimonial, reference):
there is nothing for them among the 259 components. But "no component" does not
mean "this section stays still": they are three to five sections out of a thirteen-section page, and
suggest_mechanics returns for each one a recipe written in the token vocabulary
(hand_written_recipe). For everything else, adopt.
plan_page returns a motion_coverage block with the math done: how many sections should move,
which are covered by adopting and which by recipe. One of them ending up with nothing is a defect of
the page, not a style decision. The mistake people make is not excess: it is spreading four
mechanics across the showy sections and leaving the rest blank. What saves a page from noise is not
scarcity of motion — it is everything moving in the same language, and the motion system already
takes care of that.
With architecture and motion solved, what keeps ringing false is the imagery. plan_imagery
encodes the three measured defects and their remedy:
The image belongs to the industry, not to the section. Competitor test: if the prompt would work unchanged on a competitor's page, it is generic. It must carry a fact that is only true on this page.
Nobody appears. People go to nano-banana-2 and only that one: the other two give them a
recognizable tint or plainly cannot do faces.
Everything is a rectangle with a background. Cut-outs go to gpt-image-2.5 with
background: transparent, which returns real alpha (the magenta chroma key is kept only as a
fallback for old raws). And they are requested in sheets of six — an invisible 3×2 grid —
because a generation costs the same whether it carries one or six. A shot that fails on one
detail is retouched image-to-image from its own raw, not re-rolled.
And logos are never generated: they are looked up on Wikimedia (Wikidata → P154 → Commons). No model draws a real logotype without breaking the letters, and a marquee of invented brands reads as fake instantly.
The source repository contains five complete pages built with this server, each with a README documenting which mechanic was adopted, which was re-dressed and which was discarded and why. Every component in the catalog has a live demo and build notes at motionprompts.dev.
The components' source code. You get the prompts, the metadata, the composition rule engine and
the server. You do not get each piece's index.html / script.js / styles.css.
That is not a gap: it is how these are meant to be used. The prompt is the product — a self-sufficient brief that rebuilds the mechanic from scratch and adapts it to your page, instead of pasting someone else's component into it. The example pages were built exactly that way: adopting mechanics and re-dressing them, not copying code.
get_component with include: ['source'] says so explicitly and returns the live demo and the
prompt URL instead. Everything else — search_components, plan_page, suggest_mechanics,
get_integration_contract, get_component_prompt — works the same.
PolyForm Noncommercial 1.0.0 with mandatory attribution. Noncommercial use allowed; commercial use requires a separate license. Any permitted use must keep the notice and visibly credit motionprompts.dev. See LICENSE.
It is not an OSI-approved license, so npm and GitHub will flag it as non-standard. If you are going to rely on it for anything serious, have a lawyer read it: I am not one.
Fetch one component by slug. include controls the payload: 'meta' (full catalog record), 'preview' (thumbnail + live demo URL), 'prompt' (a self-contained brief to REBUILD it faithfully), 'source' (the actual index.html/styles.css/script.js to copy, plus an integration note). Default: meta + preview + prompt. Add 'source' when you want the real code.
Inputs: slug (required), include.
THE way to get a build prompt. Returns three blocks: (a) the standalone prompt VERBATIM, untouched; (b) the tokens of the requested motion system; (c) an explicit instruction telling you to adapt (a) to (b) YOURSELF, preserving arithmetic relationships — if a duration holds up a sum, a chained sequence or a ScrollTrigger end, recompute the whole set, never a lone value. Replaces render_prompt, which substituted mechanically and produced prompts whose prose contradicted their code (11/30 in judged evaluation). See DECISIONS.md D15 and D18.
Inputs: slug (required), motion_system.
Given the slugs you intend to put on ONE page, returns: rule violations (hard, invalidate the page), warnings, the measured budget (JS gzip / assets / scroll corridor), and an ordered init plan — single Lenis instance, CustomEase registration, entry veil first, one ScrollTrigger.refresh() at the end, WebGL loop gating. Every step cites the evidence it comes from.
Inputs: slugs (required), motion_system, moving_sections.
Full token set of a motion system plus the components that are native to it.
Inputs: name (required).
Browse the whole catalog as a compact list (slug, title, useWhen, mood, useCase, level, perfCost). Use for an overview or when a brief is vague; use search_components when you have a specific brief.
Inputs: limit, offset.
Return the filter vocabulary (mood, useCase, level, perfCost, category, deps) with how many components carry each value. Call this first to learn the exact values search_components accepts.
Inputs: no named parameters.
The 8 motion systems of the library: token sets (ease/duration/stagger/lenis) derived from the measured inventory, not invented. Use this FIRST when composing a page: pick one system and render every component's prompt with it so the page moves coherently.
Inputs: no named parameters.
Qué imagen necesita cada sección, CON QUÉ MODELO se hace y cómo se redacta el prompt. Con la arquitectura y el movimiento resueltos, lo que sigue delatando una página generada son las imágenes: genéricas del sector en vez de específicas de la sección, sin una sola persona, y todas rectángulos con fondo. Esta tool devuelve el enrutado por modelo (personas ≠ objetos ≠ paisaje: no son intercambiables), la receta de transparencia (fondo magenta plano y quitado después, porque ningún modelo devuelve alfa), la de las hojas de seis recortes por generación, y de dónde salen los logotipos reales (Wikimedia, nunca generados). NO genera imágenes, no usa ninguna clave y no hace ninguna llamada de red: devuelve texto. Llámala DESPUÉS de plan_page y ANTES de escribir un solo prompt de imagen.
Inputs: brief, palette, sections, archetype.
Returns the SECTIONS a page of this kind needs — 10 to 14 of them, each with a role, what it has to accomplish, what content it needs, and whether it should move — plus a motion system and its tokens. It returns NO components on purpose: a page can only be as rich as the list it is composed from, and composing from animation mechanics caps every page at five sections. Ask for mechanics afterwards, one section at a time, with suggest_mechanics. It also names the roles the catalog cannot cover, so you write those from the system tokens instead of adopting the least-bad search hit. An optional reference contributes STATIC art direction and biases the motion system — motion is NEVER derived from the reference.
Inputs: brief (required), archetype, reference.
DEPRECATED in favour of get_component_prompt. Mechanical substitution does not fit this corpus: the prompts narrate their own numbers in prose, so replacing only the code values makes prose and code specify different components (judged 11/30). Coverage is deliberately narrow: 164 of 219 components have ZERO substitutable values because their prompts narrate their own numbers in prose ('over 4s', 'durations are 1'), and substituting those would make prose and code contradict each other. For those components this returns the prompt unchanged. See DECISIONS.md D15. Returns the component's build prompt with its motion tokens (ease/duration/stagger) replaced by the chosen motion system's values, so several components share one timing language. Values that are STRUCTURAL to the effect (elastic overshoot, loop cadence, scrub linearity, shader/physics constants) are never substituted — they come back listed under 'Valores no parametrizables'. Omit system to use the component's native one.
Inputs: slug (required), system.
Find the components that best fit a natural-language brief (e.g. "un hero elegante para una marca de lujo", "cartas apiladas al hacer scroll") or a name/alias. Returns a ranked, compact list with a why for each hit. Combine the free-text query with facet filters to narrow. Then call get_component on the chosen slug. Leave query empty to browse purely by filters.
Inputs: deps, mood, level, limit, +5 more.
Filters by the CAPA-1 motion block (trigger, libs, complexity, motion system) rather than by prose. Prefer this over search_components when composing a page: category describes how a component LOOKS, trigger/cluster describe how it MOVES, and they disagree — the slider label alone splits across 3 opposite physics.
Inputs: libs, limit, trigger, category, +3 more.
Given a section role from plan_page and what that section has to do, returns ranked candidate components — filtered first by the catalog facets that actually correspond to the role, then ranked by the free-text need. Prefer this over search_components when building a planned page. Crucially, it can answer that the catalog has NOTHING for a role (counters, progress bars, pricing tables, FAQ accordions, data tables) instead of returning the least-bad hit dressed up as an answer — search_components cannot tell you that, and its top result for 'accordion' is a horizontal image gallery. When the verdict is none, write the section from the motion system tokens; that is a legitimate outcome, not a failure.
Inputs: role (required), need, avoid, limit, +2 more.
The twin of suggest_mechanics for the family that does not fill a section slot: smooth scroll, the shaped edge BETWEEN two stacked sections, a background that runs behind the whole page, a custom cursor, route transitions. These were unreachable from the planner because the whole model assumed a mechanic occupies one slot in sections — which is why a page could be planned end to end and still butt every section together with a straight line. A treatment does NOT consume a section and does NOT count toward motion_coverage; it adds on top. Some kinds are decisions rather than components (scroll-suave) and come back with verdict not-a-component instead of a fake candidate list. Still pass whatever you adopt to get_integration_contract: treatments compete for the same capabilities (scroll owner, document height) as any other component.
Inputs: kind (required), need, avoid, limit, +1 more.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 14 tools
Most tools have clearly distinct purposes, with specific guidance on when to use each. The main ambiguity is between search_components and search_components_motion, though the descriptions clarify the difference, and render_prompt still exists despite being deprecated.
Tool names mostly follow a verb_noun pattern (list_, get_, search_, suggest_, plan_). Minor deviations include search_components_motion (modifier at end) and get_component_prompt vs render_prompt, but overall the pattern is predictable enough.
14 tools is on the upper edge of a reasonable count for this domain. Each tool serves a distinct role in the workflow, though the presence of a deprecated tool (render_prompt) adds unnecessary clutter.
The toolset covers the full pipeline: page planning, component discovery, motion systems, prompt generation, integration contracts, and imagery planning. No obvious gaps exist for the intended purpose of building motion-rich pages from the component library.
One sentence to a finished animation: your AI writes motion graphics as code and checks real frames.
AI editor to build, animate & export layered short-form video projects via one tool catalog.
AI-powered design and management for Webflow Sites
Search attributed motion recipes and prepare prompts for your coding agent. No API key required.
