Replace blob background with floating particle field

Canvas-based particle system with 60 glowing dots drifting upward,
tinted with the accent color. Eliminates the gradient banding issue
from the previous CSS blur approach. Renders at native resolution
with radial gradients for perfectly smooth glow.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

server/src/wled_controller/static/js/app.js

@@ -12,6 +12,7 @@ import { t, initLocale, changeLocale } from './core/i18n.js';
 
 // Layer 1.5: visual effects
 import { initCardGlare } from './core/card-glare.js';
+import { initBgAnim, updateBgAnimAccent, updateBgAnimTheme } from './core/bg-anim.js';
 
 // Layer 2: ui
 import {
@@ -169,6 +170,10 @@ Object.assign(window, {
     // core / state (for inline script)
     setApiKey,
 
+    // visual effects (called from inline <script>)
+    _updateBgAnimAccent: updateBgAnimAccent,
+    _updateBgAnimTheme: updateBgAnimTheme,
+
     // core / ui
     toggleHint,
     lockBody,
@@ -531,8 +536,12 @@ document.addEventListener('DOMContentLoaded', async () => {
     // Show content now that translations are loaded and tabs are set
     document.body.style.visibility = 'visible';
 
-    // Initialize card glare effect
+    // Initialize visual effects
     initCardGlare();
+    initBgAnim();
+    updateBgAnimTheme(document.documentElement.getAttribute('data-theme') !== 'light');
+    const accent = localStorage.getItem('accentColor') || '#4CAF50';
+    updateBgAnimAccent(accent);
 
     // Set CSS variable for sticky header height (header now includes tab bar)
     const headerEl = document.querySelector('header');