motionprompts

npx add-mcp 'https://motionprompts.dev/mcp'

motionprompts MCP

Un servidor MCP sobre un catálogo de 259 componentes de movimiento GSAP de calidad de producción (motionprompts.dev). Un conjunto curado de componentes es gratuito con el prompt completo; el resto de la biblioteca devuelve una vista previa de 12 líneas hasta que pases una clave Full Stack (Authorization: Bearer mpk_..., desde motionprompts.dev/account). Planes: motionprompts.dev/pricing. No genera animaciones: te entrega las que ya están resueltas y depuradas, te dice cómo componerlas sin que se peleen entre sí, y lo dice claramente cuando el catálogo no tiene lo que pediste.

Qué expone

Herramienta	Para qué
plan_page	La arquitectura de información de una página: 9–14 secciones con su rol, su función y si deberían moverse. Deliberadamente no devuelve componentes.
suggest_mechanics	Mecánicas para una sección, filtradas por las facetas reales de su rol. Sabe cómo responder que no hay nada.
suggest_page_treatments	El gemelo de suggest_mechanics para mecánicas que pertenecen a la página, no a un espacio de sección: scroll suave, bordes con forma entre secciones, fondos en movimiento.
get_integration_contract	Reparaciones, orden de montaje y presupuesto para un conjunto de componentes. Es lo que impide que dos velos de entrada coexistan y, dado moving_sections, lo que te dice en la cara que la página está subanimada.
plan_imagery	Dirección de imagen sección por sección: qué toma se necesita, con qué modelo (personas, objetos y paisaje no son intercambiables), cómo obtener transparencia y de dónde vienen los logotipos reales. Devuelve texto: no genera nada.
get_component_prompt	El prompt del autor literal + los tokens del sistema de movimiento + la instrucción de adaptarlo tú mismo.
search_components	Búsqueda de texto libre con lexical_coverage: fiable para decir "aquí no hay nada", no para decir "esto es lo mejor".
search_components_motion	Búsqueda por metadatos de movimiento medidos (disparador, clúster, easing, duración) en lugar de por apariencia.
get_component	Meta, vista previa, prompt y — donde la distribución lo incluye — código fuente.
list_facets · list_components · list_motion_systems · get_motion_system	Vocabulario y tokens.
render_prompt	Obsoleto; usa get_component_prompt.

Endpoint alojado — sin instalación

El servidor funciona en vivo en https://motionprompts.dev/mcp (Streamable HTTP, sin estado; una clave Bearer es opcional y desbloquea los prompts de pago). Añádelo a Claude Code con un solo comando y listo:

claude mcp add --transport http motionprompts https://motionprompts.dev/mcp

Manifiesto de descubrimiento: motionprompts.dev/.well-known/mcp.

Instalación local

Requiere Node 20 o superior. Sin clave de API y sin variables de entorno para el conjunto gratuito; el paquete local solo incluye los prompts gratuitos completos (los de pago como vistas previas), así que para toda la biblioteca usa el endpoint alojado con tu clave.

El paquete está en npm como motionprompts-mcp — no hace falta clonar:

claude mcp add motionprompts -- npx -y motionprompts-mcp

O desde un clon:

git clone https://github.com/VanguardiaAI/motionprompts-mcp.git
cd motionprompts-mcp
npm install

Claude Code

claude mcp add motionprompts -- node /absolute/path/to/motionprompts-mcp/mcp/server.mjs

Claude Desktop y otros clientes

En la configuración JSON del cliente:

{
  "mcpServers": {
    "motionprompts": {
      "command": "node",
      "args": ["/absolute/path/to/motionprompts-mcp/mcp/server.mjs"]
    }
  }
}

Comprueba que funciona:

npm run verify      # end-to-end battery over the real MCP protocol

Para autoalojar el endpoint HTTP en lugar de stdio: npm run start:http (por defecto 127.0.0.1:4478; configúralo con MCP_HTTP_HOST / MCP_HTTP_PORT).

Sobre las claves de API: no hace falta ninguna

Este servidor no usa ninguna clave y no puede gastar el dinero de nadie. No lee variables de entorno, no pide secretos y no hace ni una sola llamada de red: abre archivos del disco y devuelve texto. Es un lector de catálogo.

Eso incluye a plan_imagery, que habla de modelos de imagen y fondos transparentes: devuelve texto. Es una receta, no un generador. Nombra los tres modelos que usamos nosotros mismos porque esa es la información útil — cuál es para qué — pero no llama a ninguno, y las reglas de escritura y recorte funcionan igual con el proveedor que prefieras.

Si venías buscando el aviso sobre kie.ai: esa clave pertenece a una herramienta de autoría separada — la que generó la fotografía para las páginas de ejemplo — que no forma parte de este paquete. Está excluida a propósito, para que nada aquí pueda generar imágenes ni facturar a nadie. Si quieres fotografía para tus páginas, usa el servicio que prefieras con tu propia cuenta.

Cómo usarlo bien

El orden importa, y es lo más difícil de acertar:

1. plan_page primero. Devuelve secciones, no componentes: una página solo puede ser tan rica como la lista con la que se compone, y componer directamente desde mecánicas de animación la aplana a cinco secciones. Ajusta la lista al brief real antes de continuar.

2. suggest_mechanics por sección, con avoid para excluir lo que ya usaste. Sin él repetirás componentes: los roles amplios ofrecen más de cien candidatos con puntuaciones empatadas, y reutilizar la misma cadena need siempre devuelve el mismo primer resultado.

   avoid es para no repetirte, no para animar menos. Si descartas el n.º 1 porque ya está tomado, toma el n.º 2 — están empatados. Una sección que queda estática porque su primer candidato ya se usó es el fallo más caro de este flujo, y fue literalmente un if en el script de ejemplo.

3. get_integration_contract con todos los slugs a la vez, antes de escribir una línea, y con moving_sections activado: es la auditoría de cobertura.

4. get_component_prompt por componente. Revisa el vestuario, no reimplementes: cambia imágenes, textos, paleta, tipografía y número de elementos, y conserva la mecánica. Descarta un componente solo si su MECÁNICA no encaja — nunca por gusto estético.

5. plan_imagery antes de escribir un solo prompt de imagen, con la misma lista de secciones.

Cinco roles están declarados como huecos del catálogo (faq, data, pricing, testimonial, reference): no hay nada para ellos entre los 259 componentes. Pero "sin componente" no significa "esta sección se queda quieta": son de tres a cinco secciones de una página de trece, y suggest_mechanics devuelve para cada una una receta escrita en el vocabulario de tokens (hand_written_recipe). Para todo lo demás, adopta.

Pasarse antes que quedarse corto

plan_page devuelve un bloque motion_coverage con las cuentas hechas: cuántas secciones deberían moverse, cuáles están cubiertas adoptando y cuáles con receta. Que una de ellas acabe sin nada es un defecto de la página, no una decisión de estilo. El error que comete la gente no es el exceso: es repartir cuatro mecánicas entre las secciones vistosas y dejar el resto en blanco. Lo que salva a una página del ruido no es la escasez de movimiento — es que todo se mueva en el mismo lenguaje, y el sistema de movimiento ya se encarga de eso.

Las imágenes son lo que todavía delata a una página generada

Con la arquitectura y el movimiento resueltos, lo que sigue sonando falso es la imaginería. plan_imagery codifica los tres defectos medidos y su remedio:

• La imagen pertenece al sector, no a la sección. Prueba del competidor: si el prompt funcionaría sin cambios en la página de un competidor, es genérico. Debe llevar un hecho que solo sea cierto en esta página.
• No aparece nadie. Las personas van a nano-banana-2 y solo a ese: los otros dos les dan un tinte reconocible o directamente no pueden hacer caras.
• Todo es un rectángulo con fondo. Los recortes van a gpt-image-2.5 con background: transparent, que devuelve alfa real (la clave de croma magenta se conserva solo como respaldo para raws antiguos). Y se piden en hojas de seis — una cuadrícula invisible de 3×2 — porque una generación cuesta lo mismo si lleva una o seis. Una toma que falla en un detalle se retoca imagen a imagen desde su propio raw, no se vuelve a tirar.

Y los logotipos nunca se generan: se buscan en Wikimedia (Wikidata → P154 → Commons). Ningún modelo dibuja un logotipo real sin romper las letras, y una marquesina de marcas inventadas se lee como falsa al instante.

Páginas construidas con esto

El repositorio de origen contiene cinco páginas completas construidas con este servidor, cada una con un README que documenta qué mecánica se adoptó, cuál se revistió y cuál se descartó y por qué. Cada componente del catálogo tiene una demo en vivo y notas de construcción en motionprompts.dev.

Lo que esta distribución NO incluye

El código fuente de los componentes. Recibes los prompts, los metadatos, el motor de reglas de composición y el servidor. No recibes el index.html / script.js / styles.css de cada pieza.

Eso no es un hueco: es cómo están pensados para usarse. El prompt es el producto — un brief autosuficiente que reconstruye la mecánica desde cero y la adapta a tu página, en lugar de pegar el componente de otra persona en ella. Las páginas de ejemplo se construyeron exactamente así: adoptando mecánicas y revistiéndolas, no copiando código.

get_component con include: ['source'] lo dice explícitamente y devuelve la demo en vivo y la URL del prompt en su lugar. Todo lo demás — search_components, plan_page, suggest_mechanics, get_integration_contract, get_component_prompt — funciona igual.

Licencia

PolyForm Noncommercial 1.0.0 con atribución obligatoria. Uso no comercial permitido; el uso comercial requiere una licencia aparte. Cualquier uso permitido debe conservar el aviso y acreditar visiblemente a motionprompts.dev. Consulta LICENSE.

No es una licencia aprobada por la OSI, así que npm y GitHub la marcarán como no estándar. Si vas a depender de ella para algo serio, haz que la lea un abogado: yo no lo soy.