Skip to main content

AI panel (Bricks)

Inside the Bricks builder, Fancy Animations adds an AI panel that suggests and applies animation settings for you, in plain English, instead of you picking presets and tuning windows by hand.

See it live: AI animations on fancyanimations.com.

Setting it up​

Add an API key for Anthropic, OpenAI or DeepSeek under Fancy Animations → Settings → AI Animations — see License & updates. It's a bring-your-own-key setup: you're billed directly by whichever provider you pick, at their normal rates, with no extra markup or separate credits system from Fancy Animations itself. The key is only ever used from inside the Bricks builder — no AI calls happen on the published front end.

Using it​

  1. Select an element (or a whole section) in Bricks.
  2. Open the AI panel and describe what you want in plain language — "fade this heading up as it scrolls into view", "make these cards float on hover", or "animate this hero section".
  3. The panel suggests settings from the plugin's real catalogue of families, presets and options, and applies them to the selected element(s) as actual Fancy settings — the same fa_* keys and repeater rows you'd otherwise set by hand in the Style tab.
  4. You can also ask for a fully custom animation (a bespoke CSS @keyframes, or scroll-variable driven effect) rather than one of the built-in presets, when nothing in the catalogue fits.

Because it writes ordinary Fancy settings, anything it applies shows up exactly like a manually configured animation — editable afterwards in the Style tab the normal way, and fully covered by every topic in Animation families.

Common problems​

  • The panel says no API key is configured. Add one under Settings → AI Animations (see License & updates) — this is separate from your Fancy Animations license key.
  • A suggestion doesn't do quite what you expected. Describe the element's current state and what specifically should happen at the start/middle/end of its scroll pass — the more concrete the request, the better the match to what the plugin can actually do. You can also just adjust the applied settings afterwards in the Style tab.