Novedad en la 3.2.0

Todo lo que hay en esta página forma parte de la versión 3.2.0, aún sin publicar.

Asistentes de IA vía MCP

Más allá del panel de IA integrado en Bricks, Fancy Animations puede enseñar a tu propio asistente de IA — Claude, o cualquier otro asistente que hable MCP — a construir animaciones con él, para que simplemente pidas lo que quieres en un chat y el asistente lo construya directamente en tu sitio.

Míralo en acción: AI animations en fancyanimations.com.

Qué es esto en realidad, en términos sencillos

MCP (Model Context Protocol) es una forma estándar para que un asistente de IA se conecte a un programa — en este caso, tu sitio de WordPress — y use un conjunto pequeño de capacidades concretas y bien definidas que se le han dado. Fancy Animations añade cuatro capacidades de solo lectura que un asistente conectado por MCP puede invocar:

Capacidad	Qué le da al asistente
Start here (Empieza aquí)	Una guía de orientación: qué puede hacer el plugin y cómo abordar la construcción de una animación con él
Reference (Referencia)	Documentación detallada, por tema, de cada familia de animación, preajuste y ajuste — filtrada según el constructor concreto (Bricks, Etch o Gutenberg) y la familia que pida
Recipes (Recetas)	Las mismas escenas de scroll avanzadas, probadas y documentadas en Recetas avanzadas en este sitio, en un formato pensado para que un asistente las siga
Validate (Comprobar; Bricks)	Una comprobación que el asistente ejecuta sobre la página después de cada sección que escribe: le dice qué elemento falla y cómo arreglarlo en los errores de maquetación que no puede ver — contenido fuera de un Container, columnas que siguen lado a lado en el móvil, grupos centrados donde no toca, botones demasiado grandes, escenas fijas que no se quedan — y en ajustes de animación que se anulan entre sí

Estas cuatro capacidades son de solo lectura — Fancy Animations nunca escribe nada en tus páginas por sí mismo. El asistente lee lo que necesita de ellas, y luego hace los cambios reales usando las herramientas propias del constructor de páginas (por ejemplo, las mismas herramientas MCP de Bricks que el constructor de Bricks ya expone, o el propio conector de Etch) — de la misma forma que si lo hubieras construido tú mismo a mano.

Qué necesitas

• WordPress 6.9 o posterior. Esta función usa una capacidad del núcleo de WordPress (la Abilities API) que solo se añadió en la 6.9. En una versión de WordPress anterior, esta función simplemente no aparece en absoluto — nada se rompe, solo que todavía no está disponible. (El requisito general propio del plugin sigue siendo WordPress 6.0+ para todo lo demás.)
• El plugin MCP Adapter, instalado y activo. Es la pieza que realmente expone capacidades como las de Fancy Animations a través de MCP a un asistente externo. Si ya usas las propias herramientas de IA/MCP de Bricks, es casi seguro que ya lo tienes instalado — las cuatro capacidades de Fancy Animations aparecen en esa misma conexión, así que no hay nada extra que conectar para los usuarios de Bricks. En un sitio solo con Etch, sin Bricks, tendrás que instalar y conectar tú mismo el plugin MCP Adapter, una sola vez.
• Una licencia activa de Fancy Animations. Las capacidades Reference y Recipes comprueban esto y no entregan su contenido sin ella (consulta Licencia y actualizaciones). La capacidad Start here siempre responde, pero sin una licencia activa devuelve un mensaje breve indicando al asistente que se necesita una licencia, en lugar de la guía real.
• Un usuario de WordPress que pueda editar entradas, conectado a la sesión MCP. Las capacidades comprueban esto de la misma forma en que WordPress comprueba quién puede editar una página.

Configurarlo, paso a paso

1. Comprueba que tu sitio tiene WordPress 6.9 o posterior.
2. Instala y activa el plugin gratuito MCP Adapter, si aún no lo tienes (la mayoría de los sitios con Bricks que ya usan herramientas de IA lo tienen).
3. En Fancy Animations → Settings, comprueba que tu licencia aparece como Activated (ver Licencia y actualizaciones).
4. En un sitio con Bricks, activa las herramientas del propio Bricks: ve a Bricks → Settings → AI, activa Enable Bricks abilities y pulsa Save Settings. Vienen apagadas. Sin ellas, el asistente puede leer las guías de Fancy Animations pero no puede escribir nada en tus páginas.
5. En WordPress, ve a Usuarios → Perfil → Contraseñas de aplicación, escribe un nombre (por ejemplo «Claude») y pulsa Añadir nueva contraseña de aplicación. Copia la contraseña que te muestra: WordPress solo la enseña una vez.
6. Conecta tu asistente a la dirección MCP de tu sitio: https://tu-sitio.com/wp-json/mcp/mcp-adapter-default-server, con tu usuario de WordPress y esa contraseña de aplicación (más abajo, cómo hacerlo en Claude Code).
7. Pide lo que quieres con palabras normales (ver Empezar una conversación) y revisa el resultado en la página publicada.

Si ya conectaste tu asistente para las herramientas de IA de Bricks, los pasos 4 a 6 ya están hechos: las cuatro capacidades de Fancy Animations aparecen en esa misma conexión.

precaución

Entre las herramientas de Bricks hay una que ejecuta código PHP en tu sitio (Execute PHP). Un asistente nunca debería necesitarla para animar una página. En un sitio publicado, apágala en Bricks → Settings → AI → Abilities.

Conectar Claude Code

Ejecuta esto en una terminal, cambiando la dirección, tu usuario y la contraseña de aplicación:

claude mcp add --transport http mi-sitio \
  https://tu-sitio.com/wp-json/mcp/mcp-adapter-default-server \
  --header "Authorization: Basic $(printf 'usuario:contraseña de aplicación' | base64)"

Abre una sesión nueva de Claude Code y escribe /mcp: la conexión debe mostrar las herramientas fancy-start-here, fancy-reference, fancy-recipes y fancy-validate (y las de Bricks en un sitio con Bricks).

Para otros asistentes (Claude Desktop y otros clientes MCP), sigue las instrucciones del propio plugin MCP Adapter para conectar un cliente; la dirección y la contraseña de aplicación son las mismas.

consejo

Una contraseña de aplicación se puede revocar en cualquier momento desde la misma pantalla del perfil, sin cambiar tu contraseña normal.

Empezar una conversación

No hace falta un prompt de preparación ni decirle al asistente que «cargue» nada. La primera herramienta de Fancy Animations se presenta al asistente como la que debe consultar antes de animar, así que en cuanto le pides una animación lee la guía primero y después construye.

Pide lo que quieres y nombra el plugin, para que el asistente no recurra a su propio CSS ni a otra librería:

«Con Fancy Animations, haz que las tres tarjetas de la página Servicios entren una tras otra al hacer scroll.»

Después revisa el resultado en la página publicada y pide cambios en el mismo chat («que empiecen un poco más tarde», «más lenta la última»).

Qué puede hacer el asistente en cada constructor

Constructor	Qué pasa cuando pides algo
Bricks	El asistente construye o cambia la sección en tu página con las herramientas MCP de Bricks, poniendo los mismos controles de Fancy que ves en la pestaña Style.
Etch	Etch no tiene herramientas MCP propias: el asistente escribe con el AI Connector de Etch (Ajustes de Etch → AI Connector y luego el botón de IA del constructor). Funciona con asistentes que pueden ejecutar comandos en una terminal, como Claude Code, no con una app de chat. Mientras trabaja, deja abierta una sola pestaña del constructor de Etch.
Editor de bloques (Gutenberg)	No hay herramienta para cambiar los ajustes de los bloques, así que el asistente te dice qué panel de Fancy abrir y qué poner.

Ejemplos de peticiones

Estas peticiones se probaron en páginas reales: un asistente conectado solo por MCP construyó cada una, y el resultado se revisó en la página publicada, en escritorio y en móvil. Están en inglés porque así se probaron; puedes pedirlas igual en español.

Sencillas

• "Add a features section: a heading whose words animate in one by one, then a grid of 6 cards that enter one after another."
• "Make the 5 service cards stick and stack on top of each other as I scroll: each one shrinks slightly, darkens and tilts back while the next slides over it. It must work with any number of cards."
• "In the hero, while I scroll, the title rises and fades away."

Avanzadas

• "Create a 6-step process section: the step numbers sit on a large circle that turns as I scroll, the step at the front lights up, its title and description change in a panel next to the circle, and a ring around the circle fills with the progress. On phones show it as a readable list."
• "Create a split-scroll feature section: on the left a sticky image frame that crossfades with a subtle zoom between 4 images, on the right 4 text blocks that scroll normally. Each image must change exactly when its text block reaches the middle of the screen. On mobile, each image sits above its text."
• "Create a portfolio gallery of 7 photos in one pinned horizontal row: as I scroll, each photo in turn eases into the centre at full size with its caption, while the others shrink and dim. A counter like 03 / 07 updates as the photos change."
• "Create a company history timeline of 6 milestones: a line fills as I scroll down, each milestone lights up and its card slides in when the line reaches it, and a big year number in the background counts from 2015 to 2025."
• "Create a product story section: a phone built in real CSS 3D, with visible thickness, sits pinned in the centre and rotates as I scroll, while 4 feature captions appear one after another beside it, in sync with the rotation."

Creativas

• "Create a cinematic hero: a giant word filled with a photo grows as I scroll until its letters become the full-screen background, then a headline animates in word by word and a button fades in over a dark layer."
• "Create a hero with 3 depth layers (background mountains, mid layer, foreground) that move at different speeds while the title rises and fades, then 3 large images that reveal from the centre one after another, and at the end the last section lifts like a curtain to uncover a still footer."
• "Draw a winding road down the page that draws itself as I scroll, with a dot travelling along it and each stop lighting up as the dot passes." Esta necesita un SVG del recorrido y hoy solo está probada en Bricks.

Cómo pedirlo bien

1. Una sección por petición. Las páginas grandes salen mejor sección a sección («ahora la galería», «ahora el pie»); pedir una página entera de golpe hace que el asistente se salte cosas.
2. Describe el movimiento con el scroll y su sentido. «Al hacer scroll», «cuando llega al centro de la pantalla». Di si algo entra o sale: «el título se desvanece al hacer scroll» es una salida; si no lo dices, se entiende como entrada.
3. Di qué pasa en el móvil: «en móvil, como una lista», «cada imagen encima de su texto».
4. Señala el material: «usa las fotos de la biblioteca de medios», «aquí está el SVG del camino». Las capas de profundidad y las líneas dibujadas necesitan imágenes o un SVG preparados.
5. Revisa la página publicada, no solo el constructor: el lienzo pausa o simplifica algunas animaciones (ver Notas por constructor).
6. Empieza en un borrador. Pide «una página nueva en borrador» (o una copia de tu página) mientras pruebas, y pásalo a la página real cuando te guste.
7. Cuéntale lo que no ve. El asistente lee los ajustes del sitio, no la pantalla. Si tu sitio tiene fondo oscuro, una cabecera fija o un estilo concreto, dilo en la petición («mi sitio es oscuro», «la cabecera se queda fija arriba»).
8. Pide que la animación se mantenga en el móvil. La mayoría de las escenas de scroll se pueden adaptar a una pantalla de móvil en vez de convertirse en una lista; dilo si es lo que quieres.
9. Construye las páginas con el modelo más capaz que tengas. Montar bien una sección entera (una misma alineación por grupo, espacios que encajen con tu sitio, columnas que se apilen en el móvil) pide un modelo potente. En nuestras pruebas, Claude Opus hizo páginas más limpias, más rápido y con menos correcciones que modelos más ligeros con las mismas peticiones. Para cambios pequeños en una página ya hecha, basta un modelo más ligero y rápido.

Lo que suele fallar: pedirlo todo a la vez, «que parezca de un sitio premiado» sin decir qué se mueve, usar Etch desde una app de chat sin terminal y pedir una curva dibujada sin SVG.

Revisa cada resultado

El asistente no ve la página que construye, así que mírala tú en la página publicada, en escritorio y a ancho de móvil, antes de publicar. Estos son los fallos que más salieron en nuestras pruebas; cada uno se arregla describiéndolo en el mismo chat («los títulos de las tarjetas no se ven», «en el móvil las tarjetas siguen en tres columnas»):

• Texto que no se lee: texto oscuro sobre fondo oscuro, texto blanco sobre una foto clara o sobre un botón amarillo.
• Algo debajo de la cabecera fija: la parte de arriba de una escena fijada o un título tapado.
• Móvil: columnas que no se apilan, tarjetas que cortan su texto, una escena que deja un tramo largo vacío.
• Contadores y progreso: un contador que no llega al último número, una barra que termina antes.
• Hover: una tarjeta que salta en vez de moverse suave al pasar el ratón.

Problemas comunes

• No aparece nada relacionado con Fancy Animations para mi asistente. Confirma que WordPress esté en la 6.9 o posterior, y que el plugin MCP Adapter esté instalado y activo.
• El asistente recibe un mensaje sobre necesitar una licencia. Activa tu licencia de Fancy Animations en Settings (consulta Licencia y actualizaciones) — Reference y Recipes la requieren ambas.
• El asistente dice que puede leer instrucciones pero no puede hacer cambios. Las capacidades de Fancy Animations son de solo lectura por diseño: se escribe en la página con las herramientas del propio constructor. En un sitio con Bricks, actívalas en Bricks → Settings → AI → Enable Bricks abilities (paso 4); no hace falta volver a conectar, el asistente las ve en su siguiente petición. En un sitio con Etch, conecta el AI Connector de Etch.
• El asistente dice que un módulo está apagado (Texto, Ratón o Fondo con degradado). Esas animaciones necesitan su módulo: actívalo en Fancy Animations → Animation Settings → Modules y vuelve a pedirlo. El asistente lo comprueba él mismo antes de planificar.
• No uso Bricks en absoluto, solo Etch. Tendrás que instalar y conectar tú mismo el plugin MCP Adapter una sola vez — no es un plugin específico de Bricks, simplemente los sitios con Bricks suelen tenerlo ya instalado para sus propias herramientas de IA.