Description

Animation Kit lets you add a moving WebGL background to any WordPress page — a particle field, an aurora wash, a sweeping radar pulse — 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.

The plugin is builder-agnostic: 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.

How it works

You get a dedicated Background Animation screen inside the WP admin. From there:

Pick one of 6 free effects (full list below) — search and filter the gallery, or step through effects right on the live preview.
Set its colors and watch the live preview on a light or dark stand-in page.
Toggle the background on. The canvas appears site-wide.

Want motion in just one section — a hero, a call-to-action band? Select any Group or Cover block and switch on Animated background in the block settings.

Start from one of the curated looks, add a readability overlay so text on top stays legible, and choose what phones get. Copy a background’s look and paste it into another background, a block, or another site.

The free tier targets the whole website (single configuration) with the renderer’s own placement defaults. Pro adds multiple stacked configurations, per-page placement rules, and Display Settings (position, stacking order, opacity).

Effects included in the free version

Antigravity — Magnetic particle field that reacts to pointer movement. Good for tech, SaaS, and sci-fi-style hero sections.
Aurora — Flowing color washes. Suits portfolios, night-mode brands, and creative agencies.
Particles — Drifting 3D particle cloud in your brand colors.
Silk — Slow, fabric-like folds. Calm and premium.
Light Pillar — Vertical light column. Good for landing-page focal points on dark designs.
Radar — Sweep-style radar visualization.

Animation Kit Pro

Pro adds 17 more effects — 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 — every effect’s motion, size and interaction controls, multiple layered backgrounds, page and section targeting, and position, stacking, opacity and blend-mode controls.

Each effect is its own lazy-loaded chunk: visitors only download the code for the effect you enable, not a single fat bundle.

Pricing and details: https://wpxero.com/plugins/wpxero-animation-kit/pricing

Use cases

Hero sections that need motion without an animated video.
Landing pages where you want a moving backdrop behind a CTA.
Portfolios and agency sites that want a signature visual.
Conference, course, and event sites that want a « live » feel.
Dark-mode marketing pages where Aurora or Light Pillar adds depth.

Performance and Core Web Vitals

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 DOMContentLoaded. Each background has an On phones setting — 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.

Compatibility filters are registered for WP Rocket, LiteSpeed Cache, Autoptimize, W3 Total Cache, and WP Fastest Cache so their delay-JS / combine-JS / minify rules don’t break the lazy chunks.

Accessibility

The canvas wrapper is aria-hidden="true" and pointer-events: none — assistive tech ignores it, and visitors can still click links, forms, and menus through it.
prefers-reduced-motion: reduce 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.

Installation

Search « Animation Kit » in Plugins Add New and install, or upload the ZIP from wordpress.org/plugins/wpxero-animation-kit.
Activate.
Open Animation Kit Background Animation in the WordPress admin.
Pick an effect or a look, set its colors, turn it on, save.
Visit the front of your site in a private window to confirm.

FAQ

How do I add an animated background to a WordPress page without coding?

Install and activate Animation Kit, open Animation Kit Background Animation 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.

Does this work with Elementor, Gutenberg, Bricks, and WPBakery?

Yes — 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 or Cover block and switch on Animated background. There is no Elementor widget yet; on page builders, targeting one section (via a CSS selector) is a Pro feature.

Will animated backgrounds slow down my page or hurt PageSpeed?

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 — the lighter or still-image options are there for exactly that.

Will it break with my caching plugin?

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 wpxero-animation-kit/build/ from optimization manually.

Can I limit the animation to one page or one section?

Yes — for a single section, select a Group or Cover block in the editor and switch on Animated background 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.

Running different site-wide backgrounds on different pages, or targeting a CSS selector, is part of Animation Kit Pro.

Does the canvas block clicks, focus, or scroll?

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

Does it respect prefers-reduced-motion?

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.

How do I uninstall cleanly?

Plugin settings are stored under two options (animation_kit_settings and animation_kit_background_settings). Deactivating preserves them so you don’t lose configuration; deleting the plugin from the Plugins screen runs uninstall.php, which removes both options and any transients across all sites (multisite-aware).

What’s the difference between Free and Pro?

Free: 6 effects with your own colors, one site-wide background.
Pro: 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.

Reviews

There are no reviews for this plugin.

Contributors & Developers

“Animation Kit – Animated Backgrounds & WebGL Effects” is open source software. The following people have contributed to this plugin.

WPXERO

Translate “Animation Kit – Animated Backgrounds & WebGL Effects” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

0.5.0 — September 25, 2026

Added: Section backgrounds — an « Animated background » panel on Group and Cover blocks puts an effect on one section (a hero, a CTA band), independent of the site-wide background. Free.
Added: Looks gallery — curated effect + palette starting points in the dashboard and the block panel, including 8 looks made for light sites.
Added: Readability overlay (color + strength) so text on top of a background stays legible.
Added: « On phones » per background — full animation, lighter (lower resolution), a still image in the same colors, or hidden.
Added: Copy look / Paste look / Reset effect in the editor header; effect search, category filters, previous/next stepper and full-screen preview.
Added: Light-site check on the preview — warns when a background puts dark behind dark text, with one-click fixes.
Changed: The live preview shows your theme’s real page and text colors by default, so what you design matches what visitors see.
Changed: Visitors with reduced motion, Save-Data or no WebGL get a still image in the background’s own colors instead of nothing, without downloading the WebGL renderer.
Improved: Redesigned settings screen — plan badge, live / unsaved / off status, View site, Discard, Ctrl/⌘+S to save, and a clearer Effect Customize Where it runs flow.
Fixed: Reset kept old settings (overlay, knobs of earlier effects), so the reset background looked like the old one. It now resets this background completely and never removes your other backgrounds.
Fixed: Aurora turned any palette into a grey smudge on white pages; Radar’s background color was not painted; Particles defaulted to white, which vanished on white themes.
Fixed: Silk and Antigravity previews stayed blank after switching effect; the preview could briefly show the previous effect.
Fixed: Switching effect without a license left the old effect’s settings stored, which then applied to the new effect once Pro was activated.
Fixed: Backgrounds mounted inside an element disappeared behind that element’s own background color.

0.4.0 — September 20, 2026

Changed: Display Settings is now an Animation Kit Pro feature in full — where a background appears, its position, stacking order and opacity. The free plugin shows what Pro unlocks and ships no part of the panel. Free sites render with the same defaults the panel used to start from (site-wide, fixed, z-index -1, full opacity), so a site that never changed them looks unchanged.
Changed: The Welcome and About screens are gone. Animation Kit Background Animation is the only admin screen; activation opens it directly.
Improved: Background editor is a single workspace — live stage, effect picker and controls — instead of a multi-page header with separate Welcome/About routes.
Fixed: One background configuration that failed to render took every other background on the page down with it. Each configuration now mounts in isolation; a crashed effect is skipped with a console warning instead of aborting the rest.
Fixed: A background effect chunk that failed to download (stale cache, CDN mid-deploy) rejected into an unhandled promise and simply never appeared; the failure is now reported.
Fixed: With several backgrounds on one page, the last one listed painted on top of the first. Layers are now inserted in configuration order, so the list reads the way it renders.
Fixed: Switching a configuration to a different effect wrote undefined over any display value the old configuration happened not to have set, silently resetting opacity, z-index or scope.
Fixed: The live preview ignored backgrounds aimed at a specific page (picker tokens such as id:5 were dropped before they reached the stage). Those pages now appear as preview tabs, an “Everywhere else” tab returns to the site-wide view, and selecting a configuration in the list jumps the stage to its page.
Fixed: Unlicensed saves no longer overwrite stored Pro display values and per-effect knobs with the client’s own defaults. The REST input gate now drops the same keys the output gate hides.
Security: Color fields now accept only real CSS colors (hex, rgb()/hsl(), var(--token), named colors, transparent). The previous fallback let any 64-character string reach the background’s inline styles and the WebGL shader uniforms.
Added: Background layers carry data-ak-background and data-ak-effect attributes so you can tell which configuration produced which layer from developer tools.

0.3.1 — August 26, 2026

Fixed: Cache plugins (WP Rocket, LiteSpeed) delayed the front-end background’s inline scripts, so the lazy-loaded chunks resolved from the wrong URL and no background rendered. The animationKitBgData / __animationKitBgPublicPath globals are now excluded from delay-JS and combine as well.
Fixed: A stored effect id with no registered renderer — an effect that was removed, or a Pro effect on a site where Pro is inactive — rendered nothing at all. It now falls back to the default effect.
Fixed: The legacy antigravity effect id resolves to its registered type again, so configurations saved before the id change keep their controls, live preview and picker selection.
Fixed: A saved « multiple backgrounds » flag with an empty configuration list is coerced off, so a dangling flag can no longer suppress the background entirely.
Fixed: Admin asset enqueue no longer assumes get_current_screen() returns a screen object.
Performance: Admin pages load as lazy route chunks — only the active page’s code is parsed on load.
Performance: Promo images moved out of the JS bundle into assets/images/promo/, removing roughly 750KB of inline base64 from the admin bundle.
Performance: The live preview is debounced, so dragging a slider no longer rebuilds the WebGL scene on every tick.
Performance: Background engines pause their animation loop when the tab is hidden or the canvas scrolls off-screen, instead of tearing down and recreating the WebGL context.
Performance: The review notice seeds its install timestamp on its own screens instead of admin_init, removing one uncached database query from every admin page load.
Performance: Bundled preset asset directory scans are memoized per request.
Added: A shared PHP+JS background types manifest (classes/background-types-manifest.json) as the single source of truth for the free effect list, the default effect and legacy id aliases, with development-mode drift warnings.
Added: PHPUnit suite covering the premium gates; runs against lightweight stubs with no WordPress install required.
Improved: Premium key and scope lists are centralized, so the REST input gate and the output sanitizers can no longer drift apart.
Updated: Freemius SDK 2.13.4.
Tested up to WordPress 7.1.

0.3.0 — July 4, 2026

Changed: WordPress.org trialware-compliance refactor — premium background effects and their advanced (size/speed/motion) controls now ship entirely in Animation Kit Pro. The free plugin contains zero locked functionality; premium features are implemented in the add-on, not disabled behind a license.
Removed: Beams and Dark Veil background effects.
Improved: Effect picker now shows a captured Silk preview thumbnail (WebP).

0.2.2 — June 10, 2026

Added: 8 new free background effects — Color Bends, Grid Scan, Line Waves, Liquid Ether, Pixel Blast, Plasma, Prism, Soft Aurora (13 total).
Added: Honors prefers-reduced-motion: reduce. 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.
Added: Optional one-time review-request notice — shown to administrators only after 7+ days of installation and at least one saved background configuration. Three explicit choices: leave review, snooze 14 days, dismiss forever. Never blocks UI.
Security: REST settings endpoints now validate every incoming field against a strict per-field schema; unknown keys are dropped and string fields are length-capped. Defense-in-depth on top of the existing capability gate.
Fixed: Premium gate referenced a stale class name; the fallback branch checking for the Pro plugin is now correct.
Fixed: An invalid CSS selector in one background configuration no longer aborts renderer initialization for every other configuration.
Improved: $_SERVER['REQUEST_URI'] and $_REQUEST['action'] are now properly unslashed and sanitized.
Improved: WordPress.org listing copy rewritten for clarity and search relevance (no functional change).
Removed: Dead promotional dashboard widget that had been commented out since 0.2.1.

0.2.1 — May 16, 2026

Improved: Multiple Backgrounds editor — Animation / Display sub-tabs and aligned color controls.
Improved: Configuration name field validation and editor guidance.
Fixed: Apply Configuration now persists immediately so saved configurations are not lost.

0.2.0 — May 14, 2026

Added: Radar effect.
Improved: Particles effect — renderer and admin controls.
Improved: Background admin editor (shared controls, layout, styles).
Fixed: Display-rule conditional logic.
Added: Translation template (POT) and JSON catalogs for localization.

0.1.0 — April 14, 2026

Added: Aurora effect.

0.0.1 — April 3, 2026

Initial release with Antigravity and Light Pillar effects and the Background Animation admin screen.

Description

How it works

Effects included in the free version

Animation Kit Pro

Use cases

Performance and Core Web Vitals

Accessibility

Installation

FAQ

How do I add an animated background to a WordPress page without coding?

Does this work with Elementor, Gutenberg, Bricks, and WPBakery?

Will animated backgrounds slow down my page or hurt PageSpeed?

Will it break with my caching plugin?

Can I limit the animation to one page or one section?

Does the canvas block clicks, focus, or scroll?

Does it respect prefers-reduced-motion?

How do I uninstall cleanly?

What’s the difference between Free and Pro?