New in 3.2.0

Everything on this page is part of the unreleased 3.2.0 version.

AI assistants via MCP

Beyond the AI panel built into Bricks, Fancy Animations can teach your own AI assistant — Claude, or any other assistant that speaks MCP — how to build animations with it, so you can simply ask for what you want in a chat and have the assistant build it directly on your site.

See it live: AI animations on fancyanimations.com.

What this actually is, in plain terms

MCP (Model Context Protocol) is a standard way for an AI assistant to connect to a piece of software — in this case, your WordPress site — and use a small set of specific, well-defined abilities it's been given. Fancy Animations adds four read-only abilities an MCP-connected assistant can call:

Ability	What it gives the assistant
Start here	An orientation guide: what the plugin can do, and how to approach building an animation with it
Reference	Detailed, per-topic documentation of every animation family, preset and setting — filtered to the specific builder (Bricks, Etch or Gutenberg) and family it asks for
Recipes	The same tested, advanced scroll scenes documented in Advanced recipes on this site, in a form built for an assistant to follow
Validate (Bricks)	A check the assistant runs on the page after each section it writes: it names the element and the fix for layout mistakes it can't see — content outside a Container, columns that stay side by side on phones, groups centred in the wrong place, oversized buttons, sticky stages that won't stay — and for animation settings that cancel each other

These four abilities are read-only — Fancy Animations never writes anything to your pages itself. The assistant reads what it needs from these, then makes the actual changes using the page builder's own tools (for example, the same Bricks MCP tools the Bricks builder already exposes, or Etch's own connector) — the same way as if you'd built it by hand.

What you need

• WordPress 6.9 or later. This feature uses a WordPress core capability (the Abilities API) that was only added in 6.9. On an older WordPress version, this feature simply doesn't appear at all — nothing breaks, it just isn't available yet. (The plugin's own general requirement stays WordPress 6.0+ for everything else.)
• The MCP Adapter plugin, installed and active. This is the piece that actually exposes abilities like Fancy Animations' over MCP to an outside assistant. If you already use Bricks' own AI/MCP tools, you almost certainly have this installed already — Fancy Animations' four abilities appear on that same connection, so there's nothing extra to connect for Bricks users. On an Etch-only site with no Bricks, you'll need to install and connect the MCP Adapter plugin yourself, once.
• An active Fancy Animations license. The Reference and Recipes abilities check for this and won't hand over their content without one (see License & updates). The Start here ability always responds, but without an active license it returns a short message telling the assistant a license is needed, instead of the real guide.
• A WordPress user who can edit posts, connected to the MCP session. The abilities check this the same way WordPress checks who can edit a page.

Setting it up, step by step

1. Make sure your site is on WordPress 6.9 or later.
2. Install and activate the free MCP Adapter plugin, if it isn't already (most Bricks sites that already use AI tooling will have it).
3. In Fancy Animations → Settings, confirm your license shows as Activated (see License & updates).
4. On a Bricks site, turn on Bricks' own tools: go to Bricks → Settings → AI, switch Enable Bricks abilities on and click Save Settings. They are off by default. Without them the assistant can read Fancy Animations' guides but cannot write anything to your pages.
5. In WordPress, go to Users → Profile → Application Passwords, type a name (for example "Claude") and click Add New Application Password. Copy the password it shows: WordPress shows it only once.
6. Connect your assistant to your site's MCP address: https://your-site.com/wp-json/mcp/mcp-adapter-default-server, signing in with your WordPress username and that application password (see below for Claude Code).
7. Ask for what you want in plain words (see Starting a conversation) and check the result on the live page.

If you already connected your assistant for Bricks' own AI tools, steps 4 to 6 are done: Fancy Animations' four abilities appear on that same connection.

caution

Bricks' tools include one that runs PHP code on your site (Execute PHP). An assistant should never need it to animate a page. On a live site, turn it off in Bricks → Settings → AI → Abilities.

Connecting Claude Code

Run this in a terminal, replacing the address, your username and the application password:

claude mcp add --transport http my-site \
  https://your-site.com/wp-json/mcp/mcp-adapter-default-server \
  --header "Authorization: Basic $(printf 'username:application password' | base64)"

Open a new Claude Code session and type /mcp: the connection should list the tools fancy-start-here, fancy-reference, fancy-recipes and fancy-validate (and Bricks' tools on a Bricks site).

For other assistants (Claude Desktop and other MCP clients), follow the MCP Adapter plugin's own instructions for connecting a client; the address and the application password are the same.

tip

An application password can be revoked at any time from the same Profile screen, without changing your normal password.

Starting a conversation

You don't need a setup prompt or to tell the assistant to "load" anything. Fancy Animations' first tool introduces itself to the assistant as the one to call before animating, so as soon as you ask for an animation the assistant reads the guide first and then builds.

Just ask for what you want, and name the plugin so the assistant doesn't reach for its own CSS or another library:

"With Fancy Animations, make the three feature cards on my Services page enter one after another as I scroll."

Then check the result on the live page and ask for changes in the same chat ("make them start a bit later", "slower on the last one").

What the assistant can do in each builder

Builder	What happens when you ask
Bricks	The assistant builds or changes the section on your page through Bricks' own MCP tools, setting the same Fancy controls you see in the Style tab.
Etch	Etch has no MCP tools of its own: the assistant writes through Etch's AI Connector (Etch Settings → AI Connector, then the AI button in the builder). That works with assistants that can run terminal commands, such as Claude Code, not with a plain chat app. Keep only one Etch builder tab open while it works.
Block editor (Gutenberg)	There is no tool to edit block settings, so the assistant tells you which Fancy panel to open and what to set.

Example requests

These requests were tested on real pages: an assistant connected only through MCP built each one, and the result was checked on the live page, on desktop and on a phone.

Simple

• "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."

Advanced

• "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."

Creative

• "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." This one needs an SVG of the road, and today it is tested in Bricks only.

Writing a good request

1. One section per request. Big pages come out better section by section ("now the gallery", "now the footer"); asking for a whole page at once makes the assistant skip things.
2. Describe the motion against the scroll, and its direction. "As I scroll", "when it reaches the middle of the screen". Say whether something comes in or leaves: "the title fades away as I scroll" is an exit; without it, it reads as an entrance.
3. Say what happens on phones: "on phones show it as a list", "each image above its text".
4. Point to the material: "use the photos in the media library", "here is the SVG of the road". Depth layers and drawn lines need prepared images or an SVG.
5. Check the live page, not only the builder: the builder canvas pauses or simplifies some animations (see Builder notes).
6. Start on a draft. Ask for "a new draft page" (or a copy of your page) while you try things; move it to the real page once you like it.
7. Tell it what it can't see. The assistant reads your site's settings, not the screen. If your site has a dark background, a sticky header or a particular look, say so in the request ("my site is dark", "the header stays fixed at the top").
8. Ask to keep the animation on phones. Most scroll scenes can adapt to a phone screen instead of turning into a plain list; say so if that's what you want.
9. Build pages with the most capable model you have. Laying out a whole section well (the same alignment for a group, spacing that matches your site, columns that stack on phones) takes a strong model. In our tests, Claude Opus built cleaner pages, faster and with fewer corrections, than lighter models on the same requests. A lighter, faster model is fine for small changes to a page that's already built.

What usually goes wrong: asking for everything at once, "make it look like an award site" without saying what moves, using Etch from a chat app without a terminal, and asking for a drawn curve without an SVG.

Check every result

The assistant can't see the page it builds, so look at it yourself on the live page, on desktop and at phone width, before you publish. These are the slips that came up most in our tests; each one is fixed by describing it in the same chat ("the card titles are invisible", "on phones the cards are still in three columns"):

• Text you can't read: dark text on a dark background, white text on a light photo or on a yellow button.
• Something under your sticky header: the top of a pinned scene or a title hidden behind it.
• Phone layout: columns that don't stack, cards that cut their text, a scene that leaves a long empty stretch.
• Counters and progress: a counter that never reaches the last number, a bar that ends early.
• Hover: a card that jumps instead of easing when you hover it.

Common problems

• Nothing related to Fancy Animations shows up for my assistant. Confirm WordPress is on 6.9 or later, and that the MCP Adapter plugin is installed and active.
• The assistant gets a message about needing a license. Activate your Fancy Animations license under Settings (see License & updates) — Reference and Recipes both require it.
• The assistant says it can read instructions but can't make changes. Fancy Animations' abilities are read-only by design: writing to the page happens through the builder's own tools. On a Bricks site, turn them on in Bricks → Settings → AI → Enable Bricks abilities (step 4 above); no reconnection is needed, the assistant sees them on its next request. On an Etch site, connect Etch's AI Connector.
• The assistant says a module is off (Text, Mouse or Gradient background). Those animations need their module: turn it on in Fancy Animations → Animation Settings → Modules, then ask again. The assistant checks this itself before planning.
• I don't use Bricks at all, only Etch. You'll need to install and connect the MCP Adapter plugin yourself once — it isn't a Bricks-specific plugin, Bricks sites simply tend to have it installed already for their own AI tooling.