Animation Kit – Animated Backgrounds & WebGL Effects

Mô tả

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 | Compare Free and Pro

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.

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 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

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, Privacy Policy.

Background effects themselves run entirely in the visitor’s browser. No visitor data is collected or sent anywhere.