diff --git a/server/src/wled_controller/static/css/base.css b/server/src/wled_controller/static/css/base.css
index 6495564..8266f51 100644
--- a/server/src/wled_controller/static/css/base.css
+++ b/server/src/wled_controller/static/css/base.css
@@ -84,17 +84,17 @@ body.modal-open {
 }
 
 /* ── Ambient animated background ── */
-#bg-anim-layer {
+#bg-anim-canvas {
     display: none;
     position: fixed;
     inset: 0;
     z-index: -1;
+    width: 100%;
+    height: 100%;
     pointer-events: none;
-    overflow: hidden;
-    background: var(--bg-color);
 }
 
-[data-bg-anim="on"] #bg-anim-layer {
+[data-bg-anim="on"] #bg-anim-canvas {
     display: block;
 }
 
@@ -102,60 +102,6 @@ body.modal-open {
     background: transparent;
 }
 
-#bg-anim-layer .bg-blob {
-    position: absolute;
-    border-radius: 50%;
-    filter: blur(80px);
-    will-change: transform;
-}
-
-#bg-anim-layer .bg-blob-a {
-    width: 600px;
-    height: 400px;
-    top: 10%;
-    left: 10%;
-    background: var(--bg-anim-a);
-    animation: blobA 20s ease-in-out infinite alternate;
-}
-
-#bg-anim-layer .bg-blob-b {
-    width: 500px;
-    height: 500px;
-    top: 40%;
-    right: 5%;
-    background: var(--bg-anim-b);
-    animation: blobB 25s ease-in-out infinite alternate;
-}
-
-#bg-anim-layer .bg-blob-c {
-    width: 450px;
-    height: 550px;
-    bottom: 5%;
-    left: 30%;
-    background: var(--bg-anim-c);
-    animation: blobC 22s ease-in-out infinite alternate;
-}
-
-/* Blob colors derived from accent via JS (--bg-anim-a/b/c set in index.html) */
-
-@keyframes blobA {
-    0%   { transform: translate(0, 0) scale(1); }
-    50%  { transform: translate(15vw, 10vh) scale(1.15); }
-    100% { transform: translate(-5vw, 20vh) scale(0.9); }
-}
-
-@keyframes blobB {
-    0%   { transform: translate(0, 0) scale(1); }
-    50%  { transform: translate(-20vw, -10vh) scale(1.1); }
-    100% { transform: translate(5vw, 15vh) scale(0.95); }
-}
-
-@keyframes blobC {
-    0%   { transform: translate(0, 0) scale(1); }
-    50%  { transform: translate(10vw, -15vh) scale(1.2); }
-    100% { transform: translate(-10vw, -5vh) scale(0.85); }
-}
-
 .container {
     padding: 20px;
 }
diff --git a/server/src/wled_controller/static/js/app.js b/server/src/wled_controller/static/js/app.js
index 3d28855..425a837 100644
--- a/server/src/wled_controller/static/js/app.js
+++ b/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');
diff --git a/server/src/wled_controller/static/js/core/bg-anim.js b/server/src/wled_controller/static/js/core/bg-anim.js
new file mode 100644
index 0000000..6be69d2
--- /dev/null
+++ b/server/src/wled_controller/static/js/core/bg-anim.js
@@ -0,0 +1,131 @@
+/**
+ * Ambient background animation — floating particle field.
+ *
+ * Renders small glowing dots that drift slowly upward on a canvas,
+ * tinted with the current accent color. Lightweight and smooth.
+ */
+
+const PARTICLE_COUNT = 60;
+const FPS = 30;
+
+let _canvas, _ctx;
+let _raf = null;
+let _particles = [];
+let _accentRgb = [76, 175, 80];
+let _bgColor = [26, 26, 26];
+let _w = 0, _h = 0;
+
+function _createParticle(randomY) {
+    return {
+        x: Math.random() * _w,
+        y: randomY ? Math.random() * _h : _h + Math.random() * 40,
+        r: 1 + Math.random() * 2,
+        alpha: 0.15 + Math.random() * 0.35,
+        vx: (Math.random() - 0.5) * 0.3,
+        vy: -(0.15 + Math.random() * 0.4),
+        // slight color variation: mix accent with white
+        mix: 0.3 + Math.random() * 0.7,
+    };
+}
+
+function _resize() {
+    _w = window.innerWidth;
+    _h = window.innerHeight;
+    _canvas.width = _w;
+    _canvas.height = _h;
+}
+
+function _initParticles() {
+    _particles = [];
+    for (let i = 0; i < PARTICLE_COUNT; i++) {
+        _particles.push(_createParticle(true));
+    }
+}
+
+let _lastFrame = 0;
+function _draw(time) {
+    _raf = requestAnimationFrame(_draw);
+    if (time - _lastFrame < 1000 / FPS) return;
+    _lastFrame = time;
+
+    const [br, bg, bb] = _bgColor;
+    const [ar, ag, ab] = _accentRgb;
+
+    _ctx.fillStyle = `rgb(${br},${bg},${bb})`;
+    _ctx.fillRect(0, 0, _w, _h);
+
+    for (let i = 0; i < _particles.length; i++) {
+        const p = _particles[i];
+
+        // Update position
+        p.x += p.vx;
+        p.y += p.vy;
+
+        // Recycle particles that leave the screen
+        if (p.y < -10 || p.x < -10 || p.x > _w + 10) {
+            _particles[i] = _createParticle(false);
+            continue;
+        }
+
+        // Color: mix between accent and white based on particle's mix factor
+        const m = p.mix;
+        const r = Math.round(ar * m + 255 * (1 - m));
+        const g = Math.round(ag * m + 255 * (1 - m));
+        const b = Math.round(ab * m + 255 * (1 - m));
+
+        // Draw soft glowing dot
+        const grad = _ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r * 3);
+        grad.addColorStop(0, `rgba(${r},${g},${b},${p.alpha})`);
+        grad.addColorStop(0.4, `rgba(${r},${g},${b},${p.alpha * 0.4})`);
+        grad.addColorStop(1, `rgba(${r},${g},${b},0)`);
+
+        _ctx.fillStyle = grad;
+        _ctx.fillRect(p.x - p.r * 3, p.y - p.r * 3, p.r * 6, p.r * 6);
+    }
+}
+
+function _start() {
+    if (_raf) return;
+    _resize();
+    _initParticles();
+    _raf = requestAnimationFrame(_draw);
+}
+
+function _stop() {
+    if (_raf) {
+        cancelAnimationFrame(_raf);
+        _raf = null;
+    }
+}
+
+function hexToRgb(hex) {
+    return [
+        parseInt(hex.slice(1, 3), 16),
+        parseInt(hex.slice(3, 5), 16),
+        parseInt(hex.slice(5, 7), 16),
+    ];
+}
+
+export function updateBgAnimAccent(hex) {
+    _accentRgb = hexToRgb(hex);
+}
+
+export function updateBgAnimTheme(isDark) {
+    _bgColor = isDark ? [26, 26, 26] : [245, 245, 245];
+}
+
+export function initBgAnim() {
+    _canvas = document.getElementById('bg-anim-canvas');
+    if (!_canvas) return;
+    _ctx = _canvas.getContext('2d');
+
+    const observer = new MutationObserver(() => {
+        const on = document.documentElement.getAttribute('data-bg-anim') === 'on';
+        if (on) _start(); else _stop();
+    });
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-bg-anim'] });
+
+    window.addEventListener('resize', () => { if (_raf) _resize(); });
+
+    if (document.documentElement.getAttribute('data-bg-anim') === 'on') _start();
+}
diff --git a/server/src/wled_controller/templates/index.html b/server/src/wled_controller/templates/index.html
index 0dd484b..c9367f3 100644
--- a/server/src/wled_controller/templates/index.html
+++ b/server/src/wled_controller/templates/index.html
@@ -29,11 +29,7 @@
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
 </head>
 <body style="visibility: hidden;">
-    <div id="bg-anim-layer">
-        <div class="bg-blob bg-blob-a"></div>
-        <div class="bg-blob bg-blob-b"></div>
-        <div class="bg-blob bg-blob-c"></div>
-    </div>
+    <canvas id="bg-anim-canvas"></canvas>
         <div id="connection-overlay" class="connection-overlay" style="display:none" aria-hidden="true">
             <div class="connection-overlay-content">
                 <div class="connection-spinner-lg"></div>
@@ -250,6 +246,7 @@
             document.documentElement.setAttribute('data-theme', newTheme);
             localStorage.setItem('theme', newTheme);
             updateThemeIcon(newTheme);
+            if (window._updateBgAnimTheme) window._updateBgAnimTheme(newTheme === 'dark');
             // Re-derive accent text variant for the new theme
             const accent = localStorage.getItem('accentColor');
             if (accent) applyAccentColor(accent, true);
@@ -289,21 +286,6 @@
             return L > 0.36 ? '#1a1a1a' : '#ffffff';
         }
 
-        function updateBgAnimColors(hex) {
-            const r = parseInt(hex.slice(1,3),16);
-            const g = parseInt(hex.slice(3,5),16);
-            const b = parseInt(hex.slice(5,7),16);
-            const root = document.documentElement;
-            const isDark = root.getAttribute('data-theme') !== 'light';
-            const a = isDark ? 0.12 : 0.10;
-            // Blob A: accent color
-            root.style.setProperty('--bg-anim-a', `rgba(${r},${g},${b},${a})`);
-            // Blob B: hue-shifted ~120° toward blue (swap channels)
-            root.style.setProperty('--bg-anim-b', `rgba(${b},${r},${g},${a * 0.8})`);
-            // Blob C: hue-shifted ~240° toward magenta
-            root.style.setProperty('--bg-anim-c', `rgba(${g},${b},${r},${a * 0.7})`);
-        }
-
         function applyAccentColor(hex, silent) {
             const root = document.documentElement;
             root.style.setProperty('--primary-color', hex);
@@ -311,7 +293,8 @@
             root.style.setProperty('--primary-text-color', adjustLightness(hex, theme === 'dark' ? 15 : -15));
             root.style.setProperty('--primary-hover', adjustLightness(hex, 8));
             root.style.setProperty('--primary-contrast', contrastColor(hex));
-            updateBgAnimColors(hex);
+            // Update canvas background blobs if module loaded
+            if (window._updateBgAnimAccent) window._updateBgAnimAccent(hex);
             const swatch = document.getElementById('cp-swatch-accent');
             if (swatch) swatch.style.background = hex;
             const native = document.getElementById('cp-native-accent');
@@ -348,7 +331,6 @@
 
         const savedAccent = localStorage.getItem('accentColor');
         if (savedAccent) applyAccentColor(savedAccent, true);
-        updateBgAnimColors(savedAccent || '#4CAF50');
 
         // Initialize auth state
         function updateAuthUI() {