Animation Kit – Animated Backgrounds & WebGL Effects
Add animated WebGL backgrounds to any WordPress page — Aurora, Silk, Particles, Light Pillar and more. Lazy-loaded, no code needed.
Solid choice
Animation Kit is a solid plugin choice in 2026, with a few things worth checking first. It runs on 10+ sites and was last updated 5 days ago, and scores 66/100 on our health check.
- Actively developed — last update 5 days ago
- Tested with the latest WordPress (7.1)
- Small user base (10+ active installs)
- Very few reviews so far
How does it stack up?
Side-by-side on installs, updates, ratings & support
Daily downloads
Download spikes usually follow a new release — each site that auto-updates counts as a download.
Rankings
Where Animation Kit stands todayWordPress.org search rankings
Live position in the plugin search, top 100| Keyword | Position |
|---|---|
| animated-background | #51 |
| gutenberg | >100 |
| hero section | >100 |
| particles | #50 |
| webgl | #16 |
Version adoption
Share of active sites per release.
About Animation Kit
From the official readme · v0.5.0Description
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"andpointer-events: none— assistive tech ignores it, and visitors can still click links, forms, and menus through it. prefers-reduced-motion: reduceis 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.
Frequently asked questions
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.
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
undefinedover 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:5were 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-backgroundanddata-ak-effectattributes 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/__animationKitBgPublicPathglobals 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
antigravityeffect 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.
For developers
Is this your plugin? Show off the numbers.
Add a live badge to your site, docs or GitHub README. It updates on its own — no account needed.
Best Animation Kit alternatives
All animated-background plugins →FAQ
Animation Kit: quick answers
Straight answers, pulled from live WordPress.org data.
Live data from WordPress.org · checked Sep 30, 2026
Is Animation Kit free?
Yes. Animation Kit is free to download and use from the official WordPress.org plugin directory.
Is Animation Kit safe to use in 2026?
Animation Kit is a solid plugin choice in 2026, with a few things worth checking first. It runs on 10+ sites and was last updated 5 days ago, and scores 66/100 on our health check.
How many websites use Animation Kit?
Animation Kit is active on 10+ WordPress websites and has been downloaded 967 times since it launched in April 2026. It was downloaded 282 times in the last 30 days.
Does Animation Kit work with WordPress 7.1?
Yes. The developer has tested Animation Kit up to WordPress 7.1.2, the latest release. It requires WordPress 6.0 or newer.
What PHP version does Animation Kit need?
Animation Kit requires PHP 7.4 or higher. Most hosts run PHP 8.x today, so it works on any modern WordPress hosting.
When was Animation Kit last updated?
The latest version, 0.5.0, was released on September 25, 2026 (5 days ago).
Who makes Animation Kit?
Animation Kit is developed and maintained by WPXERO.
What are the best alternatives to Animation Kit?
The most popular alternatives to Animation Kit are Altonet Animated BG (<10 installs), Impress Living Backgrounds (<10 installs) and Loginflux (<10 installs).
Powered by PageForge
Want thousands of pages that rank like these? Build them in an afternoon.
This directory runs on the same engine as PageForge. Turn any spreadsheet, CSV or API into thousands of fast, SEO-ready WordPress pages — with schema, internal links and AI-written copy baked in.
- CSV, Google Sheets & API data sources
- AI content, schema & internal links per page
- Works with Elementor, Gutenberg, Yoast & Rank Math
- Free on WordPress.org — no credit card
