內容簡介
Animation Kit 是一款免費的 WordPress 外掛，能為整個網站或單一區塊添加動畫背景。用戶可選擇多種效果並自訂顏色，無需編輯主題或撰寫程式碼，簡單易用。
【主要功能】
• 提供 6 種免費動畫背景效果
• 支援全站或特定區塊的背景動畫
• 自訂顏色與效果，無需程式碼
• 兼容各種佈景主題及頁面編輯器
• 提供可讀性覆蓋，確保文字清晰可見
• 手機版背景選擇，適應不同裝置需求
外掛標籤
開發者團隊
② 後台搜尋「Animation Kit – Animated Backgrounds & WebGL Effects」→ 直接安裝（推薦）
原文外掛簡介
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
Install and activate Animation Kit, then open Animation Kit → Background Animation.
Choose one of the 6 free effects, or start from a look.
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.
