Animation Kit lets you add a moving WebGL background to any WordPress page \u2014 a particle field, an aurora wash, a sweeping radar pulse \u2014 from a single admin screen. No theme editing, no shortcodes, no CSS. Pick an effect, match your colors, save, and your visitors see a smooth canvas layer behind your content.<\/p>\n\n
The plugin is builder-agnostic<\/strong>: it renders at the document level, so it cooperates with classic themes, block themes, Elementor, Bricks, WPBakery, and Gutenberg page builds without needing a per-builder integration.<\/p>\n\n You get a dedicated Background Animation<\/strong> screen inside the WP admin. From there:<\/p>\n\n Want motion in just one section \u2014 a hero, a call-to-action band? Select any Group<\/strong> or Cover<\/strong> block and switch on Animated background<\/strong> in the block settings.<\/p>\n\n Start from one of the curated looks<\/strong>, add a readability overlay<\/strong> so text on top stays legible, and choose what phones<\/strong> get. Copy a background's look and paste it into another background, a block, or another site.<\/p>\n\n The free tier targets the whole website (single configuration) with the renderer\u2019s own placement defaults. Pro adds multiple stacked configurations, per-page placement rules, and Display Settings (position, stacking order, opacity).<\/p>\n\n Pro adds 17 more effects \u2014 Color Bends, Dot Grid, Evil Eye, Floating Lines, Floating Orbs, Gradient Blinds, Grainient, Grid Scan, Iridescence, Light Rays, Line Waves, Liquid Ether, Pixel Blast, Plasma, Prism, Soft Aurora and Starfield \u2014 every effect's motion, size and interaction controls, multiple layered backgrounds, page and section targeting, and position, stacking, opacity and blend-mode controls.<\/p>\n\n Each effect is its own lazy-loaded chunk: visitors only download the code for the effect you enable, not a single fat bundle.<\/p>\n\n Pricing and details: https:\/\/wpxero.com\/plugins\/wpxero-animation-kit\/pricing<\/p>\n\n Animation Kit is built around lazy loading. The frontend script only ships when a background is enabled; the heavy rendering code (Three.js, OGL, the per-effect shader) is split into separate chunks loaded on demand after Compatibility filters are registered for WP Rocket<\/strong>, LiteSpeed Cache<\/strong>, Autoptimize<\/strong>, W3 Total Cache<\/strong>, and WP Fastest Cache<\/strong> so their delay-JS \/ combine-JS \/ minify rules don't break the lazy chunks.<\/p>\n\n Install and activate Animation Kit, open Animation Kit \u2192 Background Animation<\/strong> in the admin, pick an effect or a ready-made look, set its colors, and turn it on. There's no shortcode to paste, no widget to drop in, no template to edit.<\/p><\/dd>\n Yes \u2014 the site-wide background renders at the document body, so it sits behind anything those builders output. In the block editor you can also animate a single section: select a Group<\/strong> or Cover<\/strong> block and switch on Animated background<\/strong>. There is no Elementor widget yet; on page builders, targeting one section (via a CSS selector) is a Pro feature.<\/p><\/dd>\n The frontend script only loads when a background is enabled. The heavy rendering code is code-split and lazy-loaded after the page is interactive. Choose per background what phones get (full, lighter, still image or hidden); reduced-motion, Save-Data and no-WebGL visitors always get a still image. Like any WebGL animation, a full-quality effect on a weak device still costs GPU time \u2014 the lighter or still-image options are there for exactly that.<\/p><\/dd>\n Compatibility filters ship for WP Rocket, LiteSpeed, Autoptimize, W3 Total Cache, and WP Fastest Cache. The scripts are excluded from delay\/combine\/minify rules so the lazy chunks resolve correctly. If you use a different cache plugin, exclude Yes \u2014 for a single section, select a Group<\/strong> or Cover<\/strong> block in the editor and switch on Animated background<\/strong> in its settings sidebar. Pick a look, adjust its colors, add a readability overlay, choose what phones get. This works in the free version and is independent of the site-wide background.<\/p>\n\n Running different site-wide backgrounds on different pages, or targeting a CSS selector, is part of Animation Kit Pro.<\/p><\/dd>\n No. Yes. When the visitor's OS-level reduced-motion preference is on, they get a still image in the background's own colors and no WebGL code is downloaded. The preference is checked when the page loads.<\/p><\/dd>\n Plugin settings are stored under two options ( Free: 6 effects with your own colors, one site-wide background.\nPro: 17 more effects, every effect's motion and size controls, multiple layered backgrounds, per-page and CSS-selector targeting, position \/ stacking \/ opacity \/ blend mode, priority support.<\/p><\/dd>\n\n<\/dl>\n\n\nHow it works<\/h3>\n\n
\n
Effects included in the free version<\/h3>\n\n
\n
Animation Kit Pro<\/h3>\n\n
Use cases<\/h3>\n\n
\n
Performance and Core Web Vitals<\/h3>\n\n
DOMContentLoaded<\/code>. Each background has an On phones<\/strong> setting \u2014 full animation, a lighter lower-resolution version, a still image in the same colors, or hidden. Visitors who prefer reduced motion, use Save-Data, or whose browser has no WebGL get the still image, with no WebGL code downloaded.<\/p>\n\nAccessibility<\/h3>\n\n
\n
aria-hidden=\"true\"<\/code> and pointer-events: none<\/code> \u2014 assistive tech ignores it, and visitors can still click links, forms, and menus through it.<\/li>\nprefers-reduced-motion: reduce<\/code> is honored: when the visitor's OS preference is set when the page loads, they get a still image in the background's colors and no WebGL code is downloaded. The preference is read on page load, so a change takes effect on the next page.<\/li>\n<\/ul>\n\n\n\n
\n
How do I add an animated background to a WordPress page without coding?<\/h3><\/dt>\n
Does this work with Elementor, Gutenberg, Bricks, and WPBakery?<\/h3><\/dt>\n
Will animated backgrounds slow down my page or hurt PageSpeed?<\/h3><\/dt>\n
Will it break with my caching plugin?<\/h3><\/dt>\n
wpxero-animation-kit\/build\/<\/code> from optimization manually.<\/p><\/dd>\nCan I limit the animation to one page or one section?<\/h3><\/dt>\n
Does the canvas block clicks, focus, or scroll?<\/h3><\/dt>\n
pointer-events: none<\/code> is set on the wrapper, so clicks pass through to your content. The wrapper is also aria-hidden=\"true\"<\/code> for screen readers.<\/p><\/dd>\nDoes it respect prefers-reduced-motion?<\/h3><\/dt>\n
How do I uninstall cleanly?<\/h3><\/dt>\n
animation_kit_settings<\/code> and animation_kit_background_settings<\/code>). Deactivating preserves them so you don't lose configuration; deleting<\/strong> the plugin from the Plugins screen runs uninstall.php<\/code>, which removes both options and any transients across all sites (multisite-aware).<\/p><\/dd>\nWhat's the difference between Free and Pro?<\/h3><\/dt>\n
0.5.0 \u2014 September 25, 2026<\/h4>\n\n
\n
0.4.0 \u2014 September 20, 2026<\/h4>\n\n
\n
undefined<\/code> over any display value the old configuration happened not to have set, silently resetting opacity, z-index or scope.<\/li>\nid:5<\/code> were dropped before they reached the stage). Those pages now appear as preview tabs, an \u201cEverywhere else\u201d tab returns to the site-wide view, and selecting a configuration in the list jumps the stage to its page.<\/li>\nrgb()<\/code>\/hsl()<\/code>, var(--token)<\/code>, named colors, transparent<\/code>). The previous fallback let any 64-character string reach the background\u2019s inline styles and the WebGL shader uniforms.<\/li>\ndata-ak-background<\/code> and data-ak-effect<\/code> attributes so you can tell which configuration produced which layer from developer tools.<\/li>\n<\/ul>\n\n0.3.1 \u2014 August 26, 2026<\/h4>\n\n
\n
animationKitBgData<\/code> \/ __animationKitBgPublicPath<\/code> globals are now excluded from delay-JS and combine as well.<\/li>\nantigravity<\/code> effect id resolves to its registered type again, so configurations saved before the id change keep their controls, live preview and picker selection.<\/li>\nget_current_screen()<\/code> returns a screen object.<\/li>\nassets\/images\/promo\/<\/code>, removing roughly 750KB of inline base64 from the admin bundle.<\/li>\nadmin_init<\/code>, removing one uncached database query from every admin page load.<\/li>\nclasses\/background-types-manifest.json<\/code>) as the single source of truth for the free effect list, the default effect and legacy id aliases, with development-mode drift warnings.<\/li>\n0.3.0 \u2014 July 4, 2026<\/h4>\n\n
\n
0.2.2 \u2014 June 10, 2026<\/h4>\n\n
\n
prefers-reduced-motion: reduce<\/code>. When the visitor's OS-level reduced-motion preference is on, the WebGL mount is skipped; re-mounts automatically if they toggle the preference off mid-session.<\/li>\n$_SERVER['REQUEST_URI']<\/code> and $_REQUEST['action']<\/code> are now properly unslashed and sanitized.<\/li>\n0.2.1 \u2014 May 16, 2026<\/h4>\n\n
\n
0.2.0 \u2014 May 14, 2026<\/h4>\n\n
\n
0.1.0 \u2014 April 14, 2026<\/h4>\n\n
\n
0.0.1 \u2014 April 3, 2026<\/h4>\n\n
\n