XeroWP
Animation Kit – Animated Backgrounds & WebGL Effects
Animation Kit – Animated Backgrounds & WebGL Effects

Animation Kit – Animated Backgrounds & WebGL Effects

0/5 (0 ratings) 10 active installs Updated Sep 25, 2026
animated-backgroundgutenberghero sectionparticleswebgl
Download v0.5.0 Plugin Website

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:

  1. Pick one of 6 free effects (full list below) — search and filter the gallery, or step through effects right on the live preview.
  2. Set its colors and watch the live preview on a light or dark stand-in page.
  3. 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.