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, tune the colors and motion, 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 The free tier targets the whole website (single configuration). Pro adds multiple stacked configurations and per-page placement rules.<\/p>\n\n Each effect has its own controls; you only ship the code for the effect you enable (lazy-loaded chunk per effect, not a single fat bundle).<\/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 When the free tier stops fitting, Pro adds:<\/p>\n\n Pricing and details: https:\/\/wpxero.com\/plugins\/wpxero-animation-kit\/pricing<\/p>\n\n\n Install and activate Animation Kit, open Animation Kit \u2192 Background Animation<\/strong> in the admin, pick an effect, tweak the controls, 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 background renders at the document body, so it sits behind anything any of those builders output. There is currently no Elementor widget or Gutenberg block; the background is global rather than per-section in the free tier. Per-section targeting (via 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. On mobile, particle counts and pixel ratios are reduced automatically. Like any WebGL animation, very high particle counts on weak devices will still cost GPU time \u2014 tune density and speed per project.<\/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 Per-page and CSS-selector placement is a Pro feature. The free tier applies one configuration site-wide. You can disable the background per page by toggling it off in the admin (a Pro-only feature lets you keep multiple configurations active at once).<\/p><\/dd>\n No. Yes. When the visitor's OS-level reduced-motion preference is on, the WebGL mount is skipped. If they toggle the preference off mid-session, the animation mounts at that point.<\/p><\/dd>\n Plugin settings are stored under two options ( Free: 13 effects, full per-effect tuning, single site-wide configuration.\nPro: multiple stacked configurations, per-page placement (specific pages, CSS selectors, HTML targets), 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
Use cases<\/h3>\n\n
\n
Performance and Core Web Vitals<\/h3>\n\n
DOMContentLoaded<\/code>. On mobile, particle counts and pixel ratios are clamped automatically.<\/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 user's OS preference is set, the WebGL mount is skipped entirely. If the preference is toggled off during a session, the animation mounts at that point.<\/li>\n<\/ul>\n\nAnimation Kit Pro<\/h3>\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.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