Animation Kit – Animated Backgrounds & WebGL Effects

Animation Kit is a WordPress plugin that adds animated WebGL backgrounds behind a whole site or a single section. The free version includes 6 effects: Aurora, Antigravity, Particles, Silk, Light Pillar and Radar. It is configured from one admin screen and needs no code.

Install and activate Animation Kit, open Animation Kit → Background Animation, pick an effect or a ready-made look, set its colors and turn it on. There is no shortcode to paste, no widget to place and no template to edit.

Yes. Animation Kit on WordPress.org is free and has no locked controls: 6 effects with your own colors, a site-wide background, section backgrounds on Group and Cover blocks, the looks gallery, the readability overlay and the On phones setting. Animation Kit Pro is an optional paid add-on.

Choose Particles (a drifting 3D particle cloud) or Antigravity (particles that react to the pointer) in Animation Kit → Background Animation, set the particle and background colors, and turn the background on. Both effects are in the free version.

In the block editor, select the Group or Cover block that holds your hero and switch on Animated background in its settings sidebar. Pick a look, adjust its colors, add a readability overlay and choose what phones get. This is free and independent of the site-wide background.

The site-wide background works behind any Elementor page in the free version. To animate one specific Elementor, Bricks or WPBakery section, point a background at that section's CSS selector, which is a Pro feature. There is no Elementor widget.

It avoids the video file. An animated background is drawn in the visitor's browser by a small script, so there is no video to host, compress or download, and you can change its colors at any time. Like any animation it uses the device's GPU, which is why Animation Kit lets you serve a lighter version or a still image on phones.

Free: 6 effects with your own colors, one site-wide background, and section backgrounds on Group and Cover blocks. Pro: 17 more effects (23 in total), motion and size controls for every effect, several layered backgrounds, per-page and CSS-selector targeting, position / z-index / opacity / blend mode, and priority support. See the Free vs Pro section above.

No. Pro installs alongside the free plugin and uses the same settings. If a license ends, Pro-only settings are stored but not applied, and your site falls back to what the free version can show. Renewing brings them back.

That is a Pro feature. Pro lets you create several backgrounds and decide where each one runs: the front page, the blog, chosen pages or posts, post types, categories, tags, archives, search results or the 404 page. The free version shows one background on every page, plus any section backgrounds you add to individual blocks.

Yes, in the free version. Every effect takes your own colors, and the looks gallery gives you ready-made palettes to start from.

Yes. The site-wide background is drawn at the document level, so it sits behind whatever those builders output. In the block editor you can also animate a single Group or Cover block.

The script only loads on pages where a background is enabled, and the rendering code is split per effect and loaded after the page is interactive. You choose per background what phones get (full, lighter, still image or hidden), and 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; the lighter and still-image options exist for that.

Yes. For each background you choose what phones get: the full animation, a lighter lower-resolution version, a still image in the same colors, or nothing.

Compatibility filters ship for WP Rocket, LiteSpeed Cache, Autoptimize, W3 Total Cache and WP Fastest Cache. The scripts are excluded from delay, combine and minify rules so the lazy-loaded files resolve correctly. With another cache plugin, exclude wpxero-animation-kit/build/ from JavaScript optimization.

Use the readability overlay: tell the plugin whether your text is light or dark, and set an overlay strength. The preview shows your theme's own page and text colors and warns when a background puts dark behind dark text.

No. pointer-events: none is set on the wrapper, so clicks pass through to your content, and the wrapper is aria-hidden="true" for screen readers.

Yes. Visitors with the reduced-motion preference get a still image in the background's own colors, and no WebGL code is downloaded. The preference is checked when the page loads.

Aurora and Silk are calm and suit most sites. Antigravity and Particles add movement that reacts to the visitor. Light Pillar and Radar are strong focal points for dark landing pages. On a white site, start from the Light sites looks.

Settings are stored in two options (animation_kit_settings and animation_kit_background_settings). Deactivating keeps them. Deleting the plugin from the Plugins screen runs uninstall.php, which removes both options and the plugin's transients on every site of a multisite network.