Title: Animation Kit – Animated Backgrounds & WebGL Effects Author: WPXERO Published: 4 abril, 2026 Last modified: 10 outubro, 2026 --- Pesquisar plugins ![](https://ps.w.org/wpxero-animation-kit/assets/banner-772x250.png?rev=3738108) ![](https://ps.w.org/wpxero-animation-kit/assets/icon.svg?rev=3738108) # Animation Kit – Animated Backgrounds & WebGL Effects Por [WPXERO](https://profiles.wordpress.org/wpxero/) [Baixar](https://downloads.wordpress.org/plugin/wpxero-animation-kit.0.5.0.zip) [Pré-visualização ao vivo](https://br.wordpress.org/plugins/wpxero-animation-kit/?preview=1) * [Detalhes](https://br.wordpress.org/plugins/wpxero-animation-kit/#description) * [Avaliações](https://br.wordpress.org/plugins/wpxero-animation-kit/#reviews) * [Instalação](https://br.wordpress.org/plugins/wpxero-animation-kit/#installation) * [Desenvolvimento](https://br.wordpress.org/plugins/wpxero-animation-kit/#developers) [Suporte](https://wordpress.org/support/plugin/wpxero-animation-kit/) ## Descrição **Animation Kit is a free WordPress plugin that adds an animated background to your whole site or to a single section.** Pick an effect (an aurora wash, drifting particles, silk folds, a column of light, a radar sweep), set your brand colors and switch it on from one admin screen. No shortcode, no CSS, no video file, no theme editing. [See every effect live](https://animation.wpxero.com/?utm_source=wordpress.org&utm_medium=readme&utm_campaign=demo&utm_content=intro) | [Compare Free and Pro](https://wpxero.com/plugins/wpxero-animation-kit/pricing?utm_source=wordpress.org&utm_medium=readme&utm_campaign=free-to-pro&utm_content=intro) #### Animation Kit at a glance * **What it is:** an animated background plugin for WordPress. It draws a moving WebGL canvas behind your content. * **Where it runs:** behind the whole site, or behind one Group or Cover block such as a hero section. * **Free effects:** 6 (Aurora, Antigravity, Particles, Silk, Light Pillar, Radar), each in your own colors. * **Setup time:** about a minute. Pick an effect or a ready-made look, then save. * **Works with:** any classic or block theme, the block editor, Elementor, Bricks, WPBakery and other page builders. * **Performance:** nothing loads until a background is enabled, and each effect is its own lazy-loaded file. * **Accessibility:** visitors who prefer reduced motion get a still image, and the layer never blocks clicks. * **Price:** free. Animation Kit Pro is an optional add-on with 17 more effects, motion controls, layered backgrounds and per-page targeting. #### What you get for free The free plugin has no locked or disabled controls. Everything you see in it works. * **6 animated background effects** with full color control. * **Site-wide background:** one background behind every page. * **Section backgrounds:** switch on **Animated background** for any **Group** or **Cover** block to animate just a hero or a call-to-action band. Each section has its own effect and colors. * **Looks gallery:** ready-made effect and palette combinations, including looks made for light (white) sites. * **Readability overlay:** a color and a strength laid over the effect so text on top stays legible. * **On phones:** choose per background what phones get: full animation, a lighter version, a still image, or nothing. * **Live preview** on your theme’s real page and text colors, on a light or dark page. * **Copy look / Paste look:** move a background’s look to another background, a block or another site. #### How to add an animated background in WordPress 1. Install and activate Animation Kit, then open **Animation Kit Background Animation**. 2. Choose one of the 6 free effects, or start from a look. 3. Set the colors, check the live preview and turn the background on. It appears on your site. For one section only: select a **Group** or **Cover** block in the editor, open the block settings and switch on **Animated background**. ### Effects included in the free version * **Aurora:** flowing color washes. Suits portfolios, creative agencies and night- mode brands. * **Antigravity:** a magnetic particle field that reacts to pointer movement. Good for tech and SaaS hero sections. * **Particles:** a drifting 3D particle cloud in your brand colors. * **Silk:** slow, fabric-like folds. Calm and premium. * **Light Pillar:** a vertical column of light. A focal point for dark landing pages. * **Radar:** a sweeping radar visualization for data, security and tech layouts. Watch them move on the [demo site](https://animation.wpxero.com/effects/?utm_source=wordpress.org&utm_medium=readme&utm_campaign=demo&utm_content=effects). ### When you will want Pro Most sites start with the free plugin and stay there. These are the points where people upgrade: * **“I want a different background on my homepage than on the rest of the site.”** Pro adds per-page targeting: the front page, the blog, chosen pages and posts, post types, categories, tags, archives, search results and the 404 page, plus exclusions. * **“The effect is right, but it is too fast, too dense or too large.”** Pro adds motion, size and interaction controls for every effect, including the 6 free ones: speed, density, scale, pointer response. * **“I build with Elementor or Bricks and want one section animated.”** Pro adds CSS-selector targeting, which puts a background inside any element on any page builder. * **“I want to combine two effects.”** Pro adds several backgrounds at once, layered, each with its own opacity, stacking order and blend mode. * **“The effect I want is not in the free six.”** Pro adds 17 more: 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. [Try all 23 effects on the demo](https://animation.wpxero.com/effects/?utm_source=wordpress.org&utm_medium=readme&utm_campaign=demo&utm_content=when-pro) before you decide. ### Free vs Pro Animation Kit Pro is a separate add-on that installs next to the free plugin. The free plugin stays fully usable without it. **Free** * 6 background effects in your own colors * One site-wide background * Section backgrounds on Group and Cover blocks * Looks for the free effects, Copy look / Paste look * Readability overlay and the On phones setting * Still image for reduced-motion, Save-Data and no-WebGL visitors **Pro adds** * 17 more effects (23 in total) * Motion, size and interaction controls for every effect * Several backgrounds at once, layered with blend modes * Per-page targeting and page exclusions * CSS-selector targeting for page builders * Position, z-index and opacity for each background * Priority support **Upgrading is safe.** Pro uses the same settings, so everything you built in the free version stays. If a Pro license later ends, your Pro settings are kept, not deleted, and come back when the license does. [See plans and pricing](https://wpxero.com/plugins/wpxero-animation-kit/pricing?utm_source=wordpress.org&utm_medium=readme&utm_campaign=free-to-pro&utm_content=free-vs-pro) ### Use cases * Hero sections that need motion without an animated video. * Landing pages with a moving backdrop behind a call to action. * Portfolio and agency sites that want a signature visual. * SaaS and product pages, with Antigravity, Radar or Light Pillar behind a headline. * 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 * The front-end script is only added to pages where a background is enabled. * The rendering code (Three.js, OGL and each effect’s shader) is split into separate files, loaded on demand after `DOMContentLoaded`. Visitors download the code for the effect you chose, not all of them. * Animations pause when the tab is hidden or the background scrolls out of view. * The **On phones** setting gives phones full animation, a lighter lower-resolution version, a still image in the same colors, or nothing. * Visitors who prefer reduced motion, use Save-Data, or have no WebGL get the still image, and no WebGL code is downloaded for them. Compatibility filters are registered for **WP Rocket**, **LiteSpeed Cache**, **Autoptimize**,** W3 Total Cache** and **WP Fastest Cache**, so their delay-JS, combine-JS and minify rules don’t break the lazy-loaded files. ### Accessibility * The canvas wrapper is `aria-hidden="true"` and `pointer-events: none` — assistive technology ignores it, and visitors click links, forms and menus through it. * `prefers-reduced-motion: reduce` is honored: those visitors get a still image in the background’s colors and no WebGL code is downloaded. The preference is read when the page loads, so a change applies on the next page. * The readability overlay and the light-site check in the preview help you keep text contrast when a background sits behind content. ### External services Animation Kit includes the Freemius SDK, which handles the optional Pro license and, only if you agree, usage diagnostics. * Nothing is sent to Freemius unless you choose **Allow & Continue** on the opt- in screen. Skipping it keeps the plugin fully functional. * If you opt in, Freemius receives your site URL, WordPress and PHP versions, the plugin version, and your admin name and email, so we can send security and feature updates. * Opening the **Upgrade** / pricing page inside the admin loads the checkout from freemius.com. Service provider: Freemius, Inc. — [Terms of Service](https://freemius.com/terms/), [Privacy Policy](https://freemius.com/privacy/). Background effects themselves run entirely in the visitor’s browser. No visitor data is collected or sent anywhere. ## Capturas de tela [⌊Aurora, a free effect, behind an example hero section. The background is the plugin's real output; the page content is sample text.⌉⌊Aurora, a free effect, behind an example hero section. The background is the plugin's real output; the page content is sample text.⌉[ Aurora, a free effect, behind an example hero section. The background is the plugin’s real output; the page content is sample text. [⌊The Background Animation screen: your backgrounds, a live preview and the effect picker.⌉⌊The Background Animation screen: your backgrounds, a live preview and the effect picker.⌉[ The Background Animation screen: your backgrounds, a live preview and the effect picker. [⌊The 6 free effects: Aurora, Antigravity, Light Pillar, Silk, Radar and Particles.⌉⌊ The 6 free effects: Aurora, Antigravity, Light Pillar, Silk, Radar and Particles .⌉[ The 6 free effects: Aurora, Antigravity, Light Pillar, Silk, Radar and Particles. [⌊The looks gallery: ready-made effect and color combinations, filtered by mood.⌉⌊ The looks gallery: ready-made effect and color combinations, filtered by mood.⌉[ The looks gallery: ready-made effect and color combinations, filtered by mood. [⌊A section background in the block editor: the Animated background panel on a Group block.⌉⌊A section background in the block editor: the Animated background panel on a Group block.⌉[ A section background in the block editor: the Animated background panel on a Group block. [⌊Readability overlay and the On phones setting for a background.⌉⌊Readability overlay and the On phones setting for a background.⌉[ Readability overlay and the On phones setting for a background. [⌊Pro: all 23 effects. The 6 free ones plus the 17 that come with Animation Kit Pro.⌉⌊Pro: all 23 effects. The 6 free ones plus the 17 that come with Animation Kit Pro.⌉[ Pro: all 23 effects. The 6 free ones plus the 17 that come with Animation Kit Pro. [⌊Pro: several backgrounds, each shown on the pages you choose.⌉⌊Pro: several backgrounds, each shown on the pages you choose.⌉[ Pro: several backgrounds, each shown on the pages you choose. ## Instalação 1. In **Plugins Add New**, search for “Animation Kit”, then install and activate it. Or upload the ZIP from wordpress.org/plugins/wpxero-animation-kit. 2. Open **Animation Kit Background Animation**. 3. Pick an effect or a look, set its colors, turn it on and save. 4. 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. ## Perguntas frequentes ### What is Animation Kit? 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. ### How do I add an animated background in WordPress without coding? 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. ### Is there a free animated background plugin for WordPress? 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. ### How do I add a particles background to WordPress? 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. ### How do I add an animated background to a hero section only? 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. ### How do I add an animated background to an Elementor section? 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. ### Is an animated background better than a video background? 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. ### What is the difference between Free and Pro? 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. ### Do I lose my settings if I upgrade to Pro, or if my Pro license ends? 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. ### Can I show a different background on different pages? 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. ### Can I use my own brand colors? Yes, in the free version. Every effect takes your own colors, and the looks gallery gives you ready-made palettes to start from. ### Does it work with Elementor, Gutenberg, Bricks and WPBakery? 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. ### Will an animated background slow down my site or hurt PageSpeed? 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. ### Does the animated background work on mobile? 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. ### Will it break with my caching plugin? 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. ### Is the text on top of the background still readable? 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. ### Does the canvas block clicks, focus or scrolling? 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. ### Does it respect prefers-reduced-motion? 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. ### Which effect should I choose? 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. ### How do I uninstall cleanly? 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. ## Avaliações Não há avaliações para este plugin. ## Colaboradores e desenvolvedores “Animation Kit – Animated Backgrounds & WebGL Effects” é um programa de código aberto. As seguintes pessoas contribuíram para este plugin. Colaboradores * [ WPXERO ](https://profiles.wordpress.org/wpxero/) [Traduzir o “Animation Kit – Animated Backgrounds & WebGL Effects” para seu idioma.](https://translate.wordpress.org/projects/wp-plugins/wpxero-animation-kit) ### Interessado no desenvolvimento? [Navegue pelo código](https://plugins.trac.wordpress.org/browser/wpxero-animation-kit/), consulte o [repositório SVN](https://plugins.svn.wordpress.org/wpxero-animation-kit/) ou assine o [registro de desenvolvimento](https://plugins.trac.wordpress.org/log/wpxero-animation-kit/) por [RSS](https://plugins.trac.wordpress.org/log/wpxero-animation-kit/?limit=100&mode=stop_on_copy&format=rss). ## Registro de alterações #### 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. #### Earlier releases * 0.3.0 (July 4, 2026): Pro effects and advanced controls moved entirely into the Animation Kit Pro add-on; the free plugin contains no locked functionality. * 0.2.2 (June 10, 2026): Reduced-motion support, strict REST field validation, optional review notice. * 0.2.1 (May 16, 2026): Background editor improvements; saved configurations persist immediately. * 0.2.0 (May 14, 2026): Radar effect, improved Particles, translation files. * 0.1.0 (April 14, 2026): Aurora effect. * 0.0.1 (April 3, 2026): Initial release with Antigravity and Light Pillar. ## Meta * Versão **0.5.0** * Última atualização **1 dia atrás** * Instalações ativas **20+** * Versão do WordPress ** 6.0 ou superior ** * Testado até **7.1.3** * Versão do PHP ** 7.4 ou superior ** * Idioma * [English (US)](https://wordpress.org/plugins/wpxero-animation-kit/) * Tags * [animated-background](https://br.wordpress.org/plugins/tags/animated-background/) [background animation](https://br.wordpress.org/plugins/tags/background-animation/) [hero section](https://br.wordpress.org/plugins/tags/hero-section/)[particles](https://br.wordpress.org/plugins/tags/particles/) [webgl](https://br.wordpress.org/plugins/tags/webgl/) * [Visualização avançada](https://br.wordpress.org/plugins/wpxero-animation-kit/advanced/) ## Classificações Ainda não foi enviada nenhuma avaliação. [Sua avaliação](https://wordpress.org/support/plugin/wpxero-animation-kit/reviews/#new-post) [Ver todas avaliações](https://wordpress.org/support/plugin/wpxero-animation-kit/reviews/) ## Colaboradores * [ WPXERO ](https://profiles.wordpress.org/wpxero/) ## Suporte Tem algo a dizer? Precisa de ajuda? [Ver fórum de suporte](https://wordpress.org/support/plugin/wpxero-animation-kit/) ## Doar Gostaria de contribuir para o desenvolvimento deste plugin? [ Doe para este plugin ](https://wpxero.com/plugins/wpxero-animation-kit/pricing)