# Bricksfusion

> Bricksfusion is the AI studio and design toolkit for Bricks Builder (WordPress). It combines Bricksfusion Studio (an AI that generates sections, full pages, navigation menus and code imports as native Bricks elements), a wireframe library, native animations, and an MCP integration that lets AI clients like Claude Desktop, Claude Code, Codex, Cursor, VS Code and Windsurf generate and modify Bricks pages from a conversation. Built and maintained by a solo developer.

Bricksfusion is not a generic AI website builder. It is purpose-built for Bricks Builder and generates native Bricks JSON that pastes directly into the editor with no manual conversion. Studio runs as a panel inside Bricks Builder, understands the Bricks element schema, and respects the user's CSS framework variables, design tokens, and color palette. Every generation is verified for structure, design consistency and real WCAG color contrast before it reaches the user.

Key facts:

- Canvas AI: select any section, heading, image or element inside the Bricks Builder canvas and one floating island becomes the tool that element needs (Section AI, Text AI, Image AI or CSS AI). Section AI offers 57 transforms across 9 categories (layout, style, spacing, typography, responsive, theme, add, remove, color palette) that run programmatically, without calling a model, alongside a free-text field that does. Text AI rewrites, shortens, expands, improves and translates in place, on one element or across every text in a section. Image AI generates images for the selected slot through OpenAI, Gemini or Grok. CSS AI writes custom CSS for the framework in use and either adds to the element or replaces its existing CSS. Available to every WordPress user on a licensed site, unless an administrator switches that user's role off (see access by WordPress role below)
- Bricksfusion Studio has four generation modes: Section Generator (a section from a description), Page Composer (complete pages, up to 10 sections, planned first and generated with one coherent style), Code Import (HTML, CSS and JavaScript converted to native Bricks elements with reusable global classes), and AI Menu Builder (complete navigation menus, desktop and mobile, from one prompt)
- The Vault: a personal section library saved to the user's Bricksfusion account rather than to a website, so it opens with every project they work on. Sections are saved from a generation result, from anything already on the Bricks canvas, or from a code import. Two ways to reuse one saved section: Insert returns it exactly as saved, and Seed hands it to the AI as a structural starting point, keeping the element tree, layout, spacing and proportions while rewriting the content for the new brief and re-mapping the colors by role onto the current project's palette, preserving the contrast relationships of the original. Up to 100 sections per account. 26 categories in a closed vocabulary, pre-guessed on save and confirmed by the user, five of them commerce (Product Hero, Product Details, Product Reviews, Related Products, Collection Grid); free-form tags up to 8 per section, each with a deterministic color, normalized so Acme, acme and #acme are one tag; category chips that filter with one tap; favorites pinned to the top; a use counter and a Recent or Most used sort; the origin site recorded without asking; and a warning before inserting a section saved under a different CSS framework or a commerce section on a site with no SureCart. The row thumbnail is drawn from the section's own structure and carries no user text or URLs. Resting on a row renders the real section in full, to its own height, and does not count as use. Reachable from a chip in the composer, its own panel in the sidebar, the global search (where saved sections appear as their own group), and Page Composer, where every row of a page plan can take a saved section as its seed. Insert works from any mode; seeding happens where a brief exists, which is the Section composer and the per-row picker in a Page Composer plan. Team members on one license resolve to the main account, so a studio shares a single library with nothing to configure
- SureCart: when the site sells something, Studio generates commerce sections built from SureCart's own native Bricks elements, connected to the real catalog and written with the user's framework variables. Five section types: product hero, product details, reviews, related products and collection grid. Four curated product page blueprints give a generation its shape: Classic Split (gallery beside the buy column), Plan Focus (the plan selector and its prices, for subscriptions and memberships), Centered Minimal (one centered column, title straight to purchase) and Shop Grid (a catalog of real product cards with quick add). Choosing one makes its structure law (rhythm, size hierarchy, grouping) while the brief drives the copy, tone and style; Auto is the default and reads the shape from the request. No blueprint carries a single color, so the project's palette paints it. Two design recipes ship as transform actions in the Layout category of the Studio island: Sticky Product Info (the buy column holds its place while the gallery scrolls past it) and Vertical Product Gallery (thumbnails in a column beside the main image rather than a row beneath it). Either can be asked for at generation time or applied in one click to any SureCart section already on the canvas, including sections built by hand, and a second click removes it; if the recipe CSS was edited by hand Studio refuses to remove it rather than deleting the user's work. Both run programmatically, so they are instant and cost nothing with the user's AI provider, and both are pure CSS that leaves nothing running on the published page. Selecting a section that holds SureCart elements marks it as a live commerce section, and its SureCart elements and dynamic data are protected while the AI edits around them. Studio also reads the brand color from the SureCart account, resolved the way SureCart resolves it (dark variant on a dark brand theme), and harmonizes commerce accents against it. Studio designs the storefront a customer browses and does not touch payments, the cart or the buying flow, which stay entirely SureCart's
- Access by WordPress role (Studio 2.5.0 with Bricksfusion Animations 1.4.2): a WordPress administrator decides, from Settings, Account, which WordPress roles can use Studio, which roles can add Bricksfusion animations in Bricks, and what the roles that stay in are allowed to do through six permissions (Text AI, Generate sections, Transform sections, Generate images, Manage the Vault, Require site key). Administrators always keep full access; the permissions apply to everyone else. A switched-off role sees nothing from Bricksfusion in Bricks (no Studio panel, no canvas AI tools, no Fusion UI) and its requests are refused by the plugin. Animations already placed on a page keep working and stay editable; only the option to add new ones disappears, and hiding the elements from the Bricks panel needs Animations 1.4.2 or later. Updating changes nothing until an administrator saves the list for the first time. Access is per role, not per user; there are no private Vaults per user, no spend limits and no per-role provider or model control. Manage the Vault decides whether other roles can save, rename, tag, pin and delete in the shared account Vault, while inserting and seeding are always allowed. Administrators also see who generated what on each site for the current month, by WordPress user, with generations, edits and cost, and the History panel names the author of each generation. Only administrators add, replace or remove API keys; other roles see which providers are configured and generate with them
- Dynamic Data & Query Loops: Studio reads the site structure (post types, taxonomies, and custom fields from ACF, Meta Box, JetEngine, and Pods) and generates sections connected to real content through native Bricks Query Loops. Publish new content and the section updates itself. WooCommerce products connect through native Woo tags
- Site DNA: an optional toggle that makes every new generation match the style of the sections already built on the canvas, keeping buttons, cards, headings and effects consistent across the whole project
- Fusion UI: a premium Studio feature that re-designs the whole Bricks builder interface. Obsidian (dark) and Porcelain (light) themes derive the entire workspace from one surface color, six harmonic accent proposals are measured to at least 3:1 contrast against that surface, Smart Variables suggest the site's real design tokens resolved to real pixels, and a Cmd/Ctrl+K palette jumps to any control. Off by default, personal to each user, applied server-side before first paint (no flash), fully additive through the theming hooks Bricks provides, with a master switch that returns the original builder instantly. Cloud Sync saves the workspace to the user's Bricksfusion account and applies it on every licensed site where they use that account email; only workspace colors and toggles are synced, and the builder never waits for the cloud
- 390+ wireframe sections across 21 categories (hero, pricing, cards, CTA, about, contact, features, blog, FAQ, footer, header, testimonials, team, login, popups, roadmap, coming soon, error pages, galleries, changelog, bento grids)
- 141 native animations edited directly in the Bricks Builder sidebar, across 10 categories (backgrounds, advanced effects, showcases, visual effects, animated text, interactions, cursor effects, buttons, menu animations, page transitions)
- 190+ styled components, 11 complete page layouts, 4 WooCommerce single product templates
- 49 style presets shown as real design previews, 70 color palettes with WCAG-checked contrast, 28 supported languages including 5 right-to-left
- 5 CSS framework targets: Vanilla, Automatic.css (ACSS), Core Framework, Advanced Themer (AT), and Bricks native design tokens (Bricks 2.2+ Style Manager)
- 6 AI providers: Claude (Anthropic), OpenAI, Grok (xAI), Gemini (Google), OpenRouter (hundreds of models), and custom endpoints. Users bring their own API keys (BYOK), pay their provider directly, and Bricksfusion adds no markup
- The sixth is not one more provider but an open door: any service that speaks the OpenAI or the Anthropic API connects as a custom endpoint, so a gateway subscription a user already pays for keeps its value inside Studio. One connection holds a set of models with one active, switchable in a click; Studio can read the model list from the endpoint itself where the service publishes one; an optional cheaper model handles short calls. Connections save per account or per site. Studio cannot know what a third-party service charges, so it shows "Cost not tracked" instead of a zero. Services like Writingmate, Straico or LLMAPI publish a compatible interface; these are examples, not a supported list, and Bricksfusion has no partnership with any of them
- MCP integration connects AI clients directly to the user's WordPress site for generating, reading and modifying Bricks pages. Claude Desktop and claude.ai connect with a single URL, no Node.js required. Multi-site profiles for agencies, each with its own token and design system
- Quality controls on every generation: structure validation, design consistency, palette enforcement and real WCAG AA contrast verification
- Two pricing plans: Essential at EUR 149 per year (library, animations, layouts, WooCommerce templates), and Pro Lifetime Deal at EUR 349 one-time payment (everything in Essential plus Studio, the Vault, SureCart section generation, MCP, Framework Converter, My Sections, Code Import, and all future updates)
- Unlimited websites on both plans

## Studio

- [Studio overview](https://bricksfusion.com/studio): What Bricksfusion Studio is and how its four modes, built-in intelligence and quality checks work together
- [Canvas AI](https://bricksfusion.com/studio/canvas-ai): Edit what is already on a Bricks Builder page. Select an element and a floating island becomes Section AI, Text AI, Image AI or CSS AI. 57 programmatic transforms, AI rewriting and translation, image generation and framework-aware CSS, all applied in place
- [Section Generator](https://bricksfusion.com/studio/section-generator): Generate a production-ready Bricks Builder section from a description, a wireframe, a style preset or a reference image, in your framework, with verified structure and contrast
- [Page Composer](https://bricksfusion.com/studio/page-composer): Plan a complete page, review and edit the plan, then generate every section in parallel with one coherent design language. Up to 10 sections plus a menu
- [The Vault](https://bricksfusion.com/studio/vault): Save any Bricks section to your Bricksfusion account and reuse it on every project. Insert it exactly as saved, or seed a new section from its structure while the content and colors are rebuilt for the current site. 26 categories, own tags, real previews, one shared library per license
- [SureCart](https://bricksfusion.com/surecart): Generate SureCart product heroes, product details, reviews, related products and collection grids as native Bricks elements from SureCart's own components. Sticky Product Info and Vertical Product Gallery apply in one click to new and existing sections, in pure CSS. Live commerce sections are recognized and their elements and dynamic data protected during AI edits, and the store's own brand color is picked up from the SureCart account
- [Code Import](https://bricksfusion.com/studio/code-import): Convert HTML, CSS and JavaScript into native Bricks elements. Full pages are split into sections automatically and CSS becomes reusable global classes. Long imports can be resumed
- [AI Menu Builder](https://bricksfusion.com/studio/menu-builder): Complete navigation menus from one prompt, as native Bricks elements. Two styles (Mega Menu and Circular), desktop dropdowns, mobile offcanvas and transitions included
- [Dynamic Data & Query Loops](https://bricksfusion.com/studio/dynamic-data): Studio reads post types, taxonomies and custom fields (ACF, Meta Box, JetEngine, Pods) and generates sections connected to real content with native Bricks Query Loops
- [Fusion UI](https://bricksfusion.com/studio/fusion-ui): The Bricks builder interface re-designed. Dark and light themes from one surface color, measured-contrast accents, Smart Variables, Smart Suggestions in the hardest fields (curated recipes, no AI, live preview on the canvas), Cmd+K palette, focus mode, cloud sync across licensed sites. Off by default, personal to each user, total kill switch
- [Studio Documentation](https://bricksfusion.com/docs/studio): Setup for 6 AI providers, Wireframe Mode, Page Composer, Text AI, Section AI, CSS AI, access by WordPress role, style presets, color palettes, cost tracking and BYOK pricing reference
- [Fusion UI Documentation](https://bricksfusion.com/docs/fusion-ui): How to turn Fusion UI on, choose the Obsidian or Porcelain theme and an accent, read the redesigned structure panel, use Smart Variables and Smart Suggestions, the Cmd/Ctrl+K palette, the rethought panel with Essentials and Focus mode, Cloud Sync across licensed sites, framework and plugin compatibility, and how to switch it off
- [Changelog](https://bricksfusion.com/changelog): Full version history, including Studio 2.5 with Animations 1.4.2 (access by WordPress role), Studio 2.4 (the Vault and SureCart sections), Studio 2.1 (Smart Suggestions), Studio 2.0 (Fusion UI and Cloud Sync), Dynamic Data & Query Loops, the AI Menu Builder and Multi-Site MCP

## MCP Integration

- [MCP Integration](https://bricksfusion.com/mcp): Connect Claude Desktop, Claude Code, Codex, Cursor, VS Code or Windsurf to WordPress and build Bricks sections from a conversation. One URL to connect, multi-site profiles for agencies, same quality checks as Studio
- [MCP Documentation](https://bricksfusion.com/docs/mcp): Setup guide per client, multi-site configuration, and what you can do over the connection: generate sections, search wireframes, validate JSON, read the site structure for dynamic content, and add, replace or remove sections on pages

## Wireframe Library

- [Wireframe Library](https://bricksfusion.com/wireframes): 390+ wireframe sections across 21 categories. Each wireframe is framework-agnostic and transforms to the user's CSS framework (ACSS, Core Framework, AT Framework, Bricks native tokens, or Vanilla) when copied. Search, tag filters, favorites
- [Library Documentation](https://bricksfusion.com/docs/library): How to browse, search, copy and configure wireframes. Design System setup, BEM class generation and framework configuration

## Animations

- [Animation Library](https://bricksfusion.com/animations): 141 native animations that install as Bricks Builder elements, every setting in the editor sidebar, across 10 categories. No code required
- [Animations Guide](https://bricksfusion.com/docs/animations-guide): Installation, configuration, performance guidelines and per-animation documentation

## Additional Products

- [WooCommerce Templates](https://bricksfusion.com/woocommerce): Production-ready single product page templates with native WooCommerce elements (price, gallery, add-to-cart, reviews, related products)
- [Complete Layouts](https://bricksfusion.com/layouts): Full page layouts from header to footer, copied into Bricks Builder with framework conversion applied

## Pricing

- [Pricing](https://bricksfusion.com/pricing): Essential at EUR 149 per year (wireframe library, animations, layouts, WooCommerce templates). Pro Lifetime Deal at EUR 349 one-time (everything in Essential plus Studio, the Vault, SureCart section generation, MCP integration, Framework Converter, My Sections, Code Import, and all future updates). Unlimited websites on both plans. Bricksfusion's own checkout also runs on SureCart with automatic VAT, which is unrelated to Studio's ability to build SureCart storefronts

## Learn (guides and honest tests)

- [Learn hub](https://bricksfusion.com/learn): Plain-English guides for Bricks Builder written by the developer behind Bricksfusion. Four topic areas: AI & MCP, animations, design systems, and Bricks basics. Real hands-on tests with published results, honest comparisons that concede competitor strengths, real publication dates, updated when Bricks changes. RSS feed at https://bricksfusion.com/learn/feed.xml
- [We Tested the Native AI in Bricks 2.4](https://bricksfusion.com/learn/bricks-2-4-native-ai-tested): First-hand test of the Bricks 2.4 MCP with Claude: what the generated JSON did well (clean BEM classes, responsive breakpoints) and its failures (hardcoded Tailwind-default colors, zero CSS variables, buttons without links, no framework awareness)
- [Bricksfusion Studio vs the Native Bricks MCP](https://bricksfusion.com/learn/bricksfusion-studio-vs-bricks-native-mcp): Honest vendor comparison including where the free native MCP wins (price, element-level editing, automatic revisions, WordPress permissions) and where Studio wins (design-system fidelity, quality pipeline with WCAG contrast checks, project memory, friction-free connection)
- [What Is MCP? A Plain-English Guide for WordPress Users](https://bricksfusion.com/learn/what-is-mcp-wordpress)
- [How to Connect Claude to Bricks Builder](https://bricksfusion.com/learn/connect-claude-to-bricks-builder): Both the native Bricks 2.4 route (application passwords, config file) and the Bricksfusion route (paste one URL into Claude's connectors)
- [Bricks 2.4 AI, Explained for Non-Developers](https://bricksfusion.com/learn/bricks-2-4-ai-features-explained)
- [What Does AI Web Design Actually Cost? BYOK Explained](https://bricksfusion.com/learn/ai-web-design-costs-byok)
- [Can AI Build a Whole Page in Bricks?](https://bricksfusion.com/learn/can-ai-build-a-full-page-in-bricks)
- [AI Keeps Hardcoding Colors](https://bricksfusion.com/learn/ai-hardcoded-colors-fix): Why AI writes raw hex values instead of CSS variables (it defaults to the most common palette in its training data, Tailwind blue and slate), what that costs on a site you maintain, and the three habits that stop it
- [Animations in Bricks Builder: The Complete Guide](https://bricksfusion.com/learn/bricks-builder-animations-complete-guide): All four ways to animate a Bricks site (native Interactions, CSS, GSAP tools, and element libraries) with honest guidance on choosing
- [How to Add Scroll Animations in Bricks Builder](https://bricksfusion.com/learn/add-scroll-animations-bricks-builder)
- [Page Transitions in Bricks Builder](https://bricksfusion.com/learn/page-transitions-bricks-builder)
- [Will Animations Slow Down Your WordPress Site?](https://bricksfusion.com/learn/do-animations-slow-down-your-site)
- [Animated Backgrounds Without Killing Performance](https://bricksfusion.com/learn/animated-backgrounds-bricks): Why a background is the most expensive animation family (always on, full viewport, sits behind the LCP element), the three families and what each costs, and the counted weight split of our own 50 background effects
- [GSAP vs CSS for WordPress Animations](https://bricksfusion.com/learn/gsap-vs-css-animations): Even-handed comparison: CSS for simple states and reveals, GSAP (free as of mid-2026) for choreographed timelines and scroll scenes, and the Bricks options for each
- [Why Is One Animation Free and Another One Heavy?](https://bricksfusion.com/learn/what-makes-an-animation-expensive): First-hand measurement of all 141 Bricksfusion effects in a real browser, each run twice. Cost is driven by how much an effect redraws and how often; the length of its settings list correlates only 0.45 with cost and transfer size only 0.33, so neither is a reliable proxy. Effects labelled light measured a median 2.4% of the main thread against 104.6% for those labelled heavy, with no effect on the wrong shelf
- [Where Motion Is Cheap: Animation Families Compared](https://bricksfusion.com/learn/cheap-animation-families): Seven of the nine families in the measured library came in at or under 26.7% of the main thread, and 25 effects registered no activity at all until a visitor interacts with them. How to build a page that moves everywhere while paying for motion in only one place
- [Do You Need a CSS Framework with Bricks?](https://bricksfusion.com/learn/css-frameworks-for-bricks-compared): ACSS, Core Framework, Advanced Themer, and native Bricks design tokens compared in plain English
- [Design Tokens in Bricks, Explained Like You're New](https://bricksfusion.com/learn/design-tokens-bricks-beginners)
- [Global Classes vs ID Styles in Bricks](https://bricksfusion.com/learn/global-classes-vs-id-styles-bricks)
- [Spacing Scales: Why Your Site Feels Off](https://bricksfusion.com/learn/spacing-scales-bricks): What a spacing scale is, why random spacing reads as amateur, and how to store one as native Bricks variables
- [A Minimal Design System Checklist for Client Sites](https://bricksfusion.com/learn/design-system-checklist-freelancers): The six-item system a client site actually needs, sized to survive handover to a non-designer
- [The Bricks Builder Glossary: 45+ Terms in Plain English](https://bricksfusion.com/learn/bricks-builder-glossary)
- [Is Bricks Builder Good for Beginners? An Honest Answer](https://bricksfusion.com/learn/is-bricks-builder-good-for-beginners)
- [A Bricks Page Speed Checklist That Isn't Snake Oil](https://bricksfusion.com/learn/bricks-page-speed-checklist): Measure Core Web Vitals field data first, then fix hosting, images, fonts, and third-party scripts in that order
- [Accessible Animations in WordPress](https://bricksfusion.com/learn/prefers-reduced-motion-wordpress): Bricksfusion measured all 141 of its own effects against the browser's reduced-motion request: 94 kept animating at full rate, 19 respected it, and 26 had no motion to reduce. Why WCAG 2.2.2 (Level A) asks for a control on the page rather than an operating-system preference, and why the usual CSS fix never reaches an effect that draws its own frames
- [WordPress Has AI in Core Now. Why Can't You See It?](https://bricksfusion.com/learn/wordpress-abilities-api-explained): WordPress 6.9 added the Abilities API and 7.0 added a provider-agnostic AI Client, and core ships no AI feature on top of either. What each one is, how they differ from MCP, and why a plugin built on the shared standard can be driven by whatever AI app you already pay for
- [Do You Need to Know CSS to Use Bricks Builder?](https://bricksfusion.com/learn/do-you-need-css-for-bricks-builder): No, but the Bricks panel is a control surface over CSS rather than a layer on top of it, so the gate is concepts rather than syntax. The five ideas that unblock beginners, and the parts of CSS you can genuinely skip
- [Type Scales: How Many Font Sizes Should a Site Have?](https://bricksfusion.com/learn/type-scale-bricks): Six or seven, built from one ratio between 1.2 and 1.25 with body text at 16 to 18 pixels, stored as variables named by role rather than by size
- [How Many Colors Does a Website Need?](https://bricksfusion.com/learn/color-palette-website): Four or five neutrals and one brand color, because the neutrals are most of what a visitor sees. Includes the contrast minimums that are not a matter of taste: 4.5:1 for normal text, 3:1 for large text and for interface pieces that carry meaning
- [What Size Should Images Be on a Website?](https://bricksfusion.com/learn/image-sizes-for-websites): The export width for every common slot (1920 hero, 1200 in-content, 800 half width, 600 card), WebP at quality 75 to 85, target weights under 200 KB for a hero and 100 KB elsewhere, and the three mistakes that cost most: lazy-loading the hero, omitting dimensions, and uploading straight from a phone
- [Web Fonts: How Many You Need, and Where to Host Them](https://bricksfusion.com/learn/web-fonts-wordpress): One family and three or four weights, in WOFF2, self-hosted. Why each weight is a separate download, why text goes invisible while fonts load and what font-display: swap does about it, when a variable font wins, and the January 2022 Munich Regional Court ruling that made self-hosting the default advice in Europe
- [The Scripts You Did Not Write Are Slowing Your Site](https://bricksfusion.com/learn/third-party-scripts-wordpress): The heavy third parties are the chat widget, the video embed and the map, each loading a whole application before anyone uses it, not analytics. How to find them by sorting the network tab on domain, and the load-on-interaction pattern that keeps the feature and removes the cost

## Company

- [About](https://bricksfusion.com/about): Built by Daniel, a solo developer. The story behind the project
- [Contact](https://bricksfusion.com/contact): Email support at support@bricksfusion.com, Facebook community, free 24-hour Studio demos
- [Roadmap](https://bricksfusion.com/roadmap): What shipped and what is coming next

## Optional

- [Installation Guide](https://bricksfusion.com/docs/installation): Step-by-step setup for the plugins, license activation and framework configuration
- [Privacy Policy](https://bricksfusion.com/privacy): GDPR-compliant data handling
- [Terms of Service](https://bricksfusion.com/terms): Licensing terms. One license, unlimited websites

## Complete animation catalog (141 effects)

Every effect is a native Bricks Builder element with a live demo at https://bricksfusion.com/animations/<category>/<slug> and documentation at https://bricksfusion.com/docs/animations/<slug>.

### Menu Animations (3)

- Expandable Tab: https://bricksfusion.com/animations/menu-animations/expandable-tab
- Dynamic Island: https://bricksfusion.com/animations/menu-animations/dynamic-island
- Navigation Dock: https://bricksfusion.com/animations/menu-animations/navigation-dock

### Advanced Effects (8)

- Aurora: https://bricksfusion.com/animations/advanced-effects/aurora
- Holographic Glass: https://bricksfusion.com/animations/advanced-effects/holographic-glass
- Huly Laser: https://bricksfusion.com/animations/advanced-effects/huly
- Nebula Rift: https://bricksfusion.com/animations/advanced-effects/nebula-rift
- Noise Mask: https://bricksfusion.com/animations/advanced-effects/noise-mask
- Opal Sphere (new in 1.4.0): https://bricksfusion.com/animations/advanced-effects/opal-sphere
- Raycast: https://bricksfusion.com/animations/advanced-effects/raycast
- Reflect Blackhole: https://bricksfusion.com/animations/advanced-effects/reflect-blackhole

### Core Background (53)

- Ambient Gradient: https://bricksfusion.com/animations/core-background/ambient-gradient
- Aura Blob (new in 1.4.0): https://bricksfusion.com/animations/core-background/aura-blob
- Aura Flow: https://bricksfusion.com/animations/core-background/aura-flow
- Beams: https://bricksfusion.com/animations/core-background/beams
- Birds: https://bricksfusion.com/animations/core-background/birds
- Blinking Dots (new in 1.4.0): https://bricksfusion.com/animations/core-background/blinking-dots
- Blinking Squares (new in 1.4.0): https://bricksfusion.com/animations/core-background/blinking-squares
- Blurred Rays (new in 1.4.0): https://bricksfusion.com/animations/core-background/blurred-rays
- Cells: https://bricksfusion.com/animations/core-background/cells
- Celestial Flow: https://bricksfusion.com/animations/core-background/celestial-flow
- Chroma Silk: https://bricksfusion.com/animations/core-background/chroma-silk
- Chrome Lines (new in 1.4.0): https://bricksfusion.com/animations/core-background/chrome-lines
- Cosmic Harmony: https://bricksfusion.com/animations/core-background/cosmic-harmony
- Clouds: https://bricksfusion.com/animations/core-background/clouds
- Ether Spire: https://bricksfusion.com/animations/core-background/ether-spire
- Fire Plasma: https://bricksfusion.com/animations/core-background/fire-plasma
- Flame Paths (new in 1.4.0): https://bricksfusion.com/animations/core-background/flame-paths
- Flow Grid: https://bricksfusion.com/animations/core-background/flow-grid
- Dynamic Fluid: https://bricksfusion.com/animations/core-background/dynamic-fluid
- Fluid Cursor: https://bricksfusion.com/animations/core-background/fluid-cursor
- Glowing Wave (new in 1.4.0): https://bricksfusion.com/animations/core-background/glowing-wave
- Glue Dots (new in 1.4.0): https://bricksfusion.com/animations/core-background/glue-dots
- Gradient Bars (new in 1.4.0): https://bricksfusion.com/animations/core-background/gradient-bars
- Grain Ribbon (new in 1.4.0): https://bricksfusion.com/animations/core-background/grain-ribbon
- Graviton: https://bricksfusion.com/animations/core-background/graviton
- Ink Wash (new in 1.4.0): https://bricksfusion.com/animations/core-background/ink-wash
- Interactive Gradient: https://bricksfusion.com/animations/core-background/interactive-gradient
- Landscape (new in 1.4.0): https://bricksfusion.com/animations/core-background/landscape
- Light Cascade (new in 1.4.0): https://bricksfusion.com/animations/core-background/light-cascade
- Liquid: https://bricksfusion.com/animations/core-background/liquid
- Mesh Gradient: https://bricksfusion.com/animations/core-background/mesh-gradient
- Metallic Swirl (new in 1.4.0): https://bricksfusion.com/animations/core-background/metallic-swirl
- Mosaic Waves (new in 1.4.0): https://bricksfusion.com/animations/core-background/mosaic-waves
- Nebula: https://bricksfusion.com/animations/core-background/nebula
- Neural: https://bricksfusion.com/animations/core-background/neural
- Network Effect: https://bricksfusion.com/animations/core-background/network-effect
- Neural Float (new in 1.4.0): https://bricksfusion.com/animations/core-background/neural-float
- Pixel Rain (new in 1.4.0): https://bricksfusion.com/animations/core-background/pixel-rain
- Plasma Flow: https://bricksfusion.com/animations/core-background/plasma-flow
- Ripple Grid: https://bricksfusion.com/animations/core-background/ripple-grid
- Rising Particles (new in 1.4.0): https://bricksfusion.com/animations/core-background/rising-particles
- Silk Horizon: https://bricksfusion.com/animations/core-background/silk-horizon
- Snowfall: https://bricksfusion.com/animations/core-background/snowfall
- Spark Streaks (new in 1.4.0): https://bricksfusion.com/animations/core-background/spark-streaks
- Specter Orb (new in 1.4.0): https://bricksfusion.com/animations/core-background/specter-orb
- Spectral Clouds (new in 1.4.0): https://bricksfusion.com/animations/core-background/spectral-clouds
- Squircle Shift (new in 1.4.0): https://bricksfusion.com/animations/core-background/squircle-shift
- Stardrift: https://bricksfusion.com/animations/core-background/stardrift
- Tech Wall (new in 1.4.0): https://bricksfusion.com/animations/core-background/tech-wall
- Video Background: https://bricksfusion.com/animations/core-background/video-background
- Wave Background: https://bricksfusion.com/animations/core-background/wave-background
- Vortex: https://bricksfusion.com/animations/core-background/vortex
- Weave Motion: https://bricksfusion.com/animations/core-background/weave-motion

### Showcase (24)

- Avatar: https://bricksfusion.com/animations/showcase/avatar
- Avatar Orbit: https://bricksfusion.com/animations/showcase/avatar-orbit
- Brand Logo Carousel: https://bricksfusion.com/animations/showcase/brand-carousel
- Card Spread (new in 1.4.0): https://bricksfusion.com/animations/showcase/card-spread
- Concentric (new in 1.4.0): https://bricksfusion.com/animations/showcase/concentric
- Expandable Card: https://bricksfusion.com/animations/showcase/card-expand
- Card Twist: https://bricksfusion.com/animations/showcase/card-twist
- 3D Tilt Card: https://bricksfusion.com/animations/showcase/card-tilted
- Globe (new in 1.4.0): https://bricksfusion.com/animations/showcase/globe
- Horizontal Flow: https://bricksfusion.com/animations/showcase/horizontal-flow
- Gallery Carousel: https://bricksfusion.com/animations/showcase/gallery-carousel
- Gallery Spotlight: https://bricksfusion.com/animations/showcase/gallery-spotlight
- Infinite Gallery (new in 1.4.0): https://bricksfusion.com/animations/showcase/infinite-gallery
- Lenticular Carousel (new in 1.4.0): https://bricksfusion.com/animations/showcase/lenticular-carousel
- Page Flip (new in 1.4.0): https://bricksfusion.com/animations/showcase/page-flip
- Parallax Carousel (new in 1.4.0): https://bricksfusion.com/animations/showcase/parallax-carousel
- Reel Gallery (new in 1.4.0): https://bricksfusion.com/animations/showcase/reel-gallery
- Rotating Cards (new in 1.4.0): https://bricksfusion.com/animations/showcase/rotating-cards
- Scroll Gallery: https://bricksfusion.com/animations/showcase/scroll-gallery
- Stack Deck: https://bricksfusion.com/animations/showcase/stack-deck
- Scroll Stack: https://bricksfusion.com/animations/showcase/scroll-stack
- Tilted Tiles (new in 1.4.0): https://bricksfusion.com/animations/showcase/tilted-tiles
- Tumble Carousel (new in 1.4.0): https://bricksfusion.com/animations/showcase/tumble-carousel
- Vertical Flow: https://bricksfusion.com/animations/showcase/vertical-flow

### Visual Effects (22)

- Blossom: https://bricksfusion.com/animations/visual-effects/blossom
- Border Drift: https://bricksfusion.com/animations/visual-effects/border-drift
- Border Stream: https://bricksfusion.com/animations/visual-effects/border-stream
- Button Reveal: https://bricksfusion.com/animations/visual-effects/button-reveal
- Chroma Card (new in 1.4.0): https://bricksfusion.com/animations/visual-effects/chroma-card
- Circles: https://bricksfusion.com/animations/visual-effects/circles
- Dotted Image: https://bricksfusion.com/animations/visual-effects/dotted-image
- Ethereal Trail: https://bricksfusion.com/animations/visual-effects/ethereal-trail
- Flip Canvas: https://bricksfusion.com/animations/visual-effects/flip-canvas
- Glass Card: https://bricksfusion.com/animations/visual-effects/glass-card
- Glass Slats (new in 1.4.0): https://bricksfusion.com/animations/visual-effects/glass-slats
- Glow Card (new in 1.4.0): https://bricksfusion.com/animations/visual-effects/glow-card
- Grid Distortion: https://bricksfusion.com/animations/visual-effects/grid-distortion
- 3D Grid: https://bricksfusion.com/animations/visual-effects/grid-3d
- Liquid Image: https://bricksfusion.com/animations/visual-effects/liquid-image
- Particle Image (new in 1.4.0): https://bricksfusion.com/animations/visual-effects/particle-image
- Prism Border: https://bricksfusion.com/animations/visual-effects/prismborder
- Ring: https://bricksfusion.com/animations/visual-effects/ring
- Spotlight: https://bricksfusion.com/animations/visual-effects/spotlight
- Status Pulse: https://bricksfusion.com/animations/visual-effects/status-pulse
- SVG Reveal: https://bricksfusion.com/animations/visual-effects/svg-reveal
- Whisper Motion: https://bricksfusion.com/animations/visual-effects/whisper-motion

### Animated Text (7)

- Gradient Text: https://bricksfusion.com/animations/animated-text/gradient-text
- Morphing Text: https://bricksfusion.com/animations/animated-text/morphing-text
- Proximity: https://bricksfusion.com/animations/animated-text/proximity
- Repel Text (new in 1.4.0): https://bricksfusion.com/animations/animated-text/repel-text
- Text Reveal: https://bricksfusion.com/animations/animated-text/reveal-text
- Video Text: https://bricksfusion.com/animations/animated-text/video-text
- Word Rotate: https://bricksfusion.com/animations/animated-text/word-rotate

### Interaction (8)

- Copy & Paste: https://bricksfusion.com/animations/interaction/copy-paste
- Custom Cursor: https://bricksfusion.com/animations/interaction/custom-cursor
- Float Vision: https://bricksfusion.com/animations/interaction/float-vision
- Folder: https://bricksfusion.com/animations/interaction/folder
- Horizontal Parallax: https://bricksfusion.com/animations/interaction/horizontal-parallax
- Scroll Reveal (new in 1.4.0): https://bricksfusion.com/animations/interaction/scroll-reveal
- Social Bloom: https://bricksfusion.com/animations/interaction/social-bloom
- Vertical Parallax: https://bricksfusion.com/animations/interaction/vertical-parallax

### Cursor (4)

- ASCII Cursor (new in 1.4.0): https://bricksfusion.com/animations/cursor/ascii-cursor
- Dither Cursor (new in 1.4.0): https://bricksfusion.com/animations/cursor/dither-cursor
- Glass Cursor (new in 1.4.0): https://bricksfusion.com/animations/cursor/glass-cursor
- Label Cursor (new in 1.4.0): https://bricksfusion.com/animations/cursor/label-cursor

### Buttons (5)

- Ripple Button: https://bricksfusion.com/animations/buttons/ripple-button
- Magnetic Button: https://bricksfusion.com/animations/buttons/magnetic-button
- Essence Button: https://bricksfusion.com/animations/buttons/essence-button
- Liquid Button: https://bricksfusion.com/animations/buttons/liquid-button
- Wave Button: https://bricksfusion.com/animations/buttons/wave-button

### Transition Pages (7)

- Transition Page 1: https://bricksfusion.com/animations/transition-pages/transition-page-1
- Transition Page 2: https://bricksfusion.com/animations/transition-pages/transition-page-2
- Transition Page 3: https://bricksfusion.com/animations/transition-pages/transition-page-3
- Transition Page 4: https://bricksfusion.com/animations/transition-pages/transition-page-4
- Transition Page 5: https://bricksfusion.com/animations/transition-pages/transition-page-5
- Transition Page 6: https://bricksfusion.com/animations/transition-pages/transition-page-6
- Transition Page 7: https://bricksfusion.com/animations/transition-pages/transition-page-7


## Learn articles (32)

Long-form guides, every one opening with a direct answer to its title.

- What Is MCP? A Plain-English Guide for WordPress Users: https://bricksfusion.com/learn/what-is-mcp-wordpress
- We Tested the Native AI in Bricks 2.4: What It Does Well, Where It Falls Short: https://bricksfusion.com/learn/bricks-2-4-native-ai-tested
- Bricks 2.4 AI, Explained for Non-Developers: https://bricksfusion.com/learn/bricks-2-4-ai-features-explained
- Bricksfusion Studio vs the Native Bricks MCP: An Honest Comparison: https://bricksfusion.com/learn/bricksfusion-studio-vs-bricks-native-mcp
- How to Connect Claude to Bricks Builder (Two Ways, Step by Step): https://bricksfusion.com/learn/connect-claude-to-bricks-builder
- What Does AI Web Design Actually Cost? BYOK Explained Simply: https://bricksfusion.com/learn/ai-web-design-costs-byok
- Can AI Build a Whole Page in Bricks? An Honest Look at Page Composer: https://bricksfusion.com/learn/can-ai-build-a-full-page-in-bricks
- AI Keeps Hardcoding Colors: How to Keep Your Design System Intact: https://bricksfusion.com/learn/ai-hardcoded-colors-fix
- WordPress Has AI in Core Now. Why Can’t You See It?: https://bricksfusion.com/learn/wordpress-abilities-api-explained
- Animated Backgrounds Without Killing Performance: https://bricksfusion.com/learn/animated-backgrounds-bricks
- GSAP vs CSS for WordPress Animations: Which Do You Actually Need?: https://bricksfusion.com/learn/gsap-vs-css-animations
- Animations in Bricks Builder: The Complete Guide: https://bricksfusion.com/learn/bricks-builder-animations-complete-guide
- How to Add Scroll Animations in Bricks Builder (3 Ways, No Code Required): https://bricksfusion.com/learn/add-scroll-animations-bricks-builder
- Page Transitions in Bricks Builder: What They Are and How to Add Them: https://bricksfusion.com/learn/page-transitions-bricks-builder
- Why Is One Animation Free and Another One Heavy? We Measured Every One: https://bricksfusion.com/learn/what-makes-an-animation-expensive
- Where Motion Is Cheap: The Animation Families That Barely Cost Anything: https://bricksfusion.com/learn/cheap-animation-families
- Accessible Animations in WordPress: Why prefers-reduced-motion Is Not Enough: https://bricksfusion.com/learn/prefers-reduced-motion-wordpress
- Will Animations Slow Down Your WordPress Site? A Beginner’s Guide: https://bricksfusion.com/learn/do-animations-slow-down-your-site
- Do You Need a CSS Framework with Bricks? ACSS, Core Framework, AT & Native Tokens in Plain English: https://bricksfusion.com/learn/css-frameworks-for-bricks-compared
- Design Tokens in Bricks, Explained Like You’re New: https://bricksfusion.com/learn/design-tokens-bricks-beginners
- Global Classes vs ID Styles in Bricks: What Beginners Should Know: https://bricksfusion.com/learn/global-classes-vs-id-styles-bricks
- Spacing Scales: Why Your Site Feels Off: https://bricksfusion.com/learn/spacing-scales-bricks
- How Many Colors Does a Website Need?: https://bricksfusion.com/learn/color-palette-website
- Type Scales: How Many Font Sizes Should a Site Have?: https://bricksfusion.com/learn/type-scale-bricks
- A Minimal Design System Checklist for Client Sites: https://bricksfusion.com/learn/design-system-checklist-freelancers
- The Bricks Builder Glossary: 45+ Terms in Plain English: https://bricksfusion.com/learn/bricks-builder-glossary
- The Scripts You Did Not Write Are Slowing Your Site: https://bricksfusion.com/learn/third-party-scripts-wordpress
- Web Fonts: How Many You Need, and Where to Host Them: https://bricksfusion.com/learn/web-fonts-wordpress
- What Size Should Images Be on a Website?: https://bricksfusion.com/learn/image-sizes-for-websites
- A Bricks Page Speed Checklist That Isn’t Snake Oil: https://bricksfusion.com/learn/bricks-page-speed-checklist
- Do You Need to Know CSS to Use Bricks Builder?: https://bricksfusion.com/learn/do-you-need-css-for-bricks-builder
- Is Bricks Builder Good for Beginners? An Honest Answer: https://bricksfusion.com/learn/is-bricks-builder-good-for-beginners