Kate Spencer

Haven’t you ever wondered what the world would be like if GeoCities worked on your phone? Glitter Bomb brings interactive cursor effects and confetti-style particle fields to WordPress — with touch support that actually works. See it in action at <a href="https://klatespencer.com/glitter-bomb/" rel="nofollow ugc">klatespencer.com/glitter-bomb</a>.
<a href="https://klatespencer.com/rainbow-sprinkle/" rel="nofollow ugc">✨ Sprinkle Trail Mode</a> 
Particles follow your cursor on desktop and your finger on mobile with smooth gesture tracking. Choose between compact trails or scattered drifting patterns.
<a href="https://klatespencer.com/particle-field/" rel="nofollow ugc">💫 Particle Field Mode</a> 
Your entire page becomes a canvas of shimmering glitter. Particles drift, attract to your cursor or touch, and explode into sparkles on click or tap.
Honest assessment: No site needs this. It adds JavaScript, it competes with your content, and enabling it by default on a checkout page would be irresponsible. On a hero section, birthday page, portfolio, or anywhere a little extra is exactly right? Absolutely your call.
Features:
<ul>
<li>Touch-optimized from the start — particle trails follow your finger, tap triggers explosions, separate sizing controls for mobile vs. desktop, and an option to disable on mobile entirely</li>
<li>WCAG 2.2 AA compliant — keyboard navigation, screen reader support, <code>prefers-reduced-motion</code> respect</li>
<li>Six color palettes (Rainbow, Metallic, Neutral Spectrum, Warm Sunset, Cool Ocean, Custom)</li>
<li>Customizable toggle button: position, text, and gradient colors</li>
<li>No external dependencies, no tracking, no data collection</li>
<li>Performance optimizations: object pooling, particle culling, canvas scaling, RAF animation</li>
</ul>
Built with <a href="https://telex.im" rel="nofollow ugc">Telex</a> and <a href="https://claude.ai/code" rel="nofollow ugc">Claude Code</a>. More details at <a href="https://klatespencer.com/glitter-bomb/" rel="nofollow ugc">klatespencer.com/glitter-bomb</a>.
<h3>Contributing</h3>
Bug reports and contributions welcome: <a href="https://github.com/klatespencer" rel="nofollow ugc">github.com/klatespencer</a>

Glitter Bomb

Maximalist particle effects for WordPress — touch-responsive sparkle trails and glitter fields. WCAG 2.2 AA compliant.

WPXERO

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, tune the colors and motion, 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.
<h3>How it works</h3>
You get a dedicated Background Animation screen inside the WP admin. From there:
<ol>
<li>Pick one of 13 free effects (full list below).</li>
<li>Adjust the live controls — colors, speed, density, opacity, z-index, position.</li>
<li>Toggle the background on. The canvas appears site-wide.</li>
</ol>
The free tier targets the whole website (single configuration). Pro adds multiple stacked configurations and per-page placement rules.
<h3>Effects included in the free version</h3>
<ul>
<li>Antigravity — Magnetic particle field that reacts to pointer movement. Good for tech, SaaS, and sci-fi-style hero sections.</li>
<li>Aurora — Flowing color washes. Suits portfolios, night-mode brands, and creative agencies.</li>
<li>Color Bends — Multi-stop color gradient with noise warp and slow rotation. Works as a brand backdrop.</li>
<li>Grid Scan — Animated grid with a sweep line. Tech, cyber, and dashboard aesthetics.</li>
<li>Line Waves — Concentric line waves with color cycling. Graphic, poster-like.</li>
<li>Liquid Ether — Fluid simulation that ripples and bends with cursor movement. Most “wow” of the set.</li>
<li>Particles — Drifting particle systems with configurable count, color, and spread.</li>
<li>Pixel Blast — Animated pixel patterns (square, circle, triangle) with optional click-ripples. Retro and game-style.</li>
<li>Plasma — Classic plasma shader with direction, scale, and color. Soft demoscene feel.</li>
<li>Prism — Rotating 3D prism with bloom. Crystalline, futuristic.</li>
<li>Radar — Sweep-style radar visualization with ring and spoke controls.</li>
<li>Soft Aurora — Lower-intensity aurora with two-color gradient. Easier on small-screen viewers.</li>
<li>Light Pillar — Vertical light column with adjustable glow, width, height, and rotation. Good for landing-page focal points.</li>
</ul>
Each effect has its own controls; you only ship the code for the effect you enable (lazy-loaded chunk per effect, not a single fat bundle).
<h3>Use cases</h3>
<ul>
<li>Hero sections that need motion without an animated video.</li>
<li>Landing pages where you want a moving backdrop behind a CTA.</li>
<li>Portfolios and agency sites that want a signature visual.</li>
<li>Conference, course, and event sites that want a “live” feel.</li>
<li>Dark-mode marketing pages where Aurora or Light Pillar adds depth.</li>
</ul>
<h3>Performance and Core Web Vitals</h3>
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 <code>DOMContentLoaded</code>. On mobile, particle counts and pixel ratios are clamped automatically.
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.
<h3>Accessibility</h3>
<ul>
<li>The canvas wrapper is <code>aria-hidden="true"</code> and <code>pointer-events: none</code> — assistive tech ignores it, and visitors can still click links, forms, and menus through it.</li>
<li><code>prefers-reduced-motion: reduce</code> is honored: when the user’s OS preference is set, the WebGL mount is skipped entirely. If the preference is toggled off during a session, the animation mounts at that point.</li>
</ul>
<h3>Animation Kit Pro</h3>
When the free tier stops fitting, Pro adds:
<ul>
<li>Multiple background configurations stacked or rotated on the same site.</li>
<li>Per-page placement rules — specific pages, CSS selectors, or HTML element targets.</li>
<li>Premium roadmap access and priority support.</li>
</ul>
Pricing and details: https://wpxero.com/plugins/wpxero-animation-kit/pricing

Animation Kit – Animated Backgrounds & WebGL Effects

Add animated WebGL backgrounds to any WordPress page — 13 effects including Particles, Aurora, Plasma, Prism. Lazy-loaded, no code needed.

Glitter Bomb vs Animation Kit – Animated Backgrounds & WebGL Effects