Animation Kit
Animated WebGL backgrounds for any WordPress page
Add a moving WebGL background — Aurora, Particles, Silk, Light Pillar and more — to your whole site or a single section. Pick an effect, match your colors, switch it on.
- Free on WordPress.org
- Version 0.5.0, updated Oct 10, 2026
What is Animation Kit?
Animation Kit adds animated WebGL backgrounds to WordPress from a single admin screen: pick an effect or a ready-made look, set your colors against a live preview, and switch it on. It renders behind your content at the document level, so it works with classic themes, block themes and page builders without a per-builder integration. In the block editor you can also animate one section — any Group or Cover block. Every effect is its own lazy-loaded chunk, and visitors who prefer reduced motion get a still image instead.
Animation Kit Features
Everything Animation Kit can do — Pro additions are marked
6 Free Effects, 17 More in Pro
Antigravity, Aurora, Particles, Silk, Light Pillar and Radar are free. Pro adds 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.
Looks Gallery
Start from a curated effect-and-palette combination instead of a blank canvas, including looks made for white pages with dark text. Copy a look and paste it into another background, a block, or another site.
Section Backgrounds
Select any Group or Cover block and switch on Animated background to animate just that section — a hero, a call-to-action band — independently of the site-wide background.
Live Preview on Your Theme's Colors
The settings screen previews the effect on a stand-in page using your theme's real page and text colors, and warns when a background would put dark behind dark text.
Readability Overlay
Lay a color tint over the effect, in the strength you choose, so headlines and body text on top of the background stay legible.
You Decide What Phones Get
Per background: the full animation, a lighter lower-resolution version, a still image in the same colors, or nothing at all.
Lazy-Loaded by Design
The front-end script only ships when a background is enabled, and each effect is a separate chunk loaded after the page is interactive. Compatibility filters are included for WP Rocket, LiteSpeed Cache, Autoptimize, W3 Total Cache and WP Fastest Cache.
Layered Backgrounds (Pro)
Run several backgrounds at once, each with its own opacity, stacking order and blend mode, so two effects combine into something neither does alone.
Page & Section Targeting (Pro)
Show a background only on chosen pages, post types, categories, tags or archives, exclude pages, or point it at any element with a CSS selector — useful for sections built in a page builder.
Every Motion & Size Control (Pro)
Free effects come with their color controls. Pro unlocks speed, scale, density, pointer interaction and the rest of each effect's settings.
Why WordPress Users Choose Animation Kit
What sets Animation Kit apart from other WordPress plugins
Real WebGL Effects
Shader-driven backgrounds — particle fields, aurora washes, silk folds, light beams — not looping video or GIFs.
No Coding Required
One admin screen with a live preview. Pick, color, switch on. No shortcodes and no theme edits.
Phone-Aware
Choose per background what phones get: full, lighter, a still image, or hidden.
Lazy-Loaded
Visitors download only the code for the effect you enabled, after the page is interactive.
Respects Reduced Motion
Reduced-motion, Save-Data and no-WebGL visitors get a still image in your colors. The canvas never blocks clicks.
Builder-Agnostic
Renders behind the page, so it cooperates with classic themes, block themes, Elementor, Bricks and WPBakery.
Regular Updates
Actively maintained with new effects, compatibility patches, and performance improvements.
Dedicated Support
Community support for free users, priority email support for Pro users. Expert help from the WPXERO team.
Who Animation Kit Is For
The sites and teams Animation Kit is built for
Web Designers
Give a hero section motion without an animated video, in your client's own palette.
Business Websites
Put a moving backdrop behind a landing page or call-to-action band while keeping the text on top readable.
SaaS & Tech Products
Antigravity, Radar and Light Pillar suit dark, technical hero sections and product launches.
Digital Agencies
Design a look once, copy it, and paste it into the next client site instead of rebuilding it.
Event & Portfolio Sites
Aurora, Silk and Particles give conference, course and portfolio pages a signature visual.
Bloggers & Content Creators
Looks made for light sites add subtle motion behind dark body text without hurting legibility.
Works With the Tools You Already Use
Editors, themes and plugins Animation Kit is built to work with
How to Install Animation Kit
From the WordPress dashboard to your first animated WebGL backgrounds in a few minutes
In your WordPress admin, go to Plugins → Add New, search for “Animation Kit”, then install and activate it.
Open Animation Kit → Background Animation.
Pick an effect or a ready-made look, set its colors against the live preview, turn it on and save.
Open your site in a private window to see it as a visitor.
To animate one section instead, edit a page, select a Group or Cover block and switch on Animated background in the block settings.
Animation Kit at a Glance
Version and requirement details come straight from WordPress.org
- Latest version
- 0.5.0 (updated Oct 10, 2026)
- Requires
- WordPress 6.0+ · PHP 7.4+
- Tested up to
- WordPress 7.1.3
- Active installs
- 30+
- Price
- Free · Pro from $14.99/year
- Download
- WordPress.org plugin directory
Frequently Asked Questions
Everything you need to know about Animation Kit
Yes. Every effect runs live at animation.wpxero.com — the demo is drawn by the plugin's own code. You can change an effect's colors and settings there, then use Copy look to paste the result into your own site.
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 is no shortcode to paste, no widget to drop in and no template to edit.
Yes — the site-wide background renders at the document body, so it sits behind whatever those builders output. In the block editor you can also animate a single Group or Cover block. There is no dedicated Elementor widget; on page builders, targeting one section with a CSS selector is a Pro feature.
The front-end script only loads when a background is enabled, and the rendering code is code-split and lazy-loaded after the page is interactive. Like any WebGL animation, a full-quality effect on a weak device still costs GPU time — which is what the lighter and still-image phone options are for.
Yes. Each background has an On phones setting: full animation, lighter (lower resolution), a still image in the same colors, or hidden.
For one section, select a Group or Cover block and switch on Animated background — this is free. Running different site-wide backgrounds on different pages, or targeting a CSS selector, is part of Animation Kit Pro.
No. The background layer is set to ignore pointer events, so clicks pass through to your links, forms and menus. It is also hidden from screen readers.
Yes. Visitors whose system asks for reduced motion, who use Save-Data, or whose browser has no WebGL get a still image in the background's own colors, and no WebGL code is downloaded for them.
Free: 6 effects with your own colors, the looks for those effects, one site-wide background, section backgrounds on Group and Cover blocks, the readability overlay and phone settings. Pro: 17 more effects, every effect's motion and size controls, multiple layered backgrounds, per-page and CSS-selector targeting, position, stacking, opacity and blend mode, and priority support.
Ready to Get Started with Animation Kit?
Install Animation Kit free from WordPress.org, and upgrade to Pro when you need more.