diff --git a/backend/src/processing/processor/playlist.rs b/backend/src/processing/processor/playlist.rs
index aad225b36..c2770c562 100644
--- a/backend/src/processing/processor/playlist.rs
+++ b/backend/src/processing/processor/playlist.rs
@@ -558,10 +558,16 @@ async fn download_input(
 ) -> (Vec<TuliproxError>, Box<dyn PlaylistSource>, Option<TuliproxError>) {
     // Coordination Logic
     let need_download = !ctx.is_input_downloaded(&input.name).await;
+    // Keep this lock for the whole critical section (download + persist/load + mark processed)
+    // so parallel sources sharing the same input cannot observe a half-written state.
+    let _input_lock = if need_download {
+        Some(ctx.get_input_lock(&input.name).await)
+    } else {
+        None
+    };
+    let mut mark_as_processed = false;
 
     let playlist_download_result = if need_download {
-        // Acquire named lock to prevent thundering herd on same input
-        let _input_lock = ctx.get_input_lock(&input.name).await;
         // Check again after lock
         let already_processed = ctx.is_input_downloaded(&input.name).await;
 
@@ -569,17 +575,13 @@ async fn download_input(
             // Use empty results, will load from disk below
             PlaylistDownloadResult::new(vec![], vec![], true, false)
         } else if ctx.pre_processed_inputs.as_ref().is_some_and(|s| s.contains(&input.name)) {
-            // Input was already processed in a prior session; skip download and mark as processed
-            // for this session to avoid redundant lock acquisitions from other targets.
-            ctx.mark_input_downloaded(input.name.clone()).await;
+            // Input was already processed in a prior session; skip download and load from disk.
+            // Mark only after load succeeds (or fails) to avoid exposing a half-ready state.
+            mark_as_processed = true;
             PlaylistDownloadResult::new(vec![], vec![], true, false)
         } else {
-            let res = playlist_download_from_input(&ctx.client, &ctx.config, input).await;
-            // Mark as processed if NO critical errors?
-            // playlist_download_from_input returns errors but also potentially a partial playlist.
-            // If it attempted download, we consider it processed for this session.
-            ctx.mark_input_downloaded(input.name.clone()).await;
-            res
+            mark_as_processed = true;
+            playlist_download_from_input(&ctx.client, &ctx.config, input).await
         }
     } else {
         PlaylistDownloadResult::new(vec![], vec![], true, false)
@@ -595,6 +597,12 @@ async fn download_input(
         let (pl, err) = persist_input_playlist(&ctx.config, input, playlist_download_result.downloaded_playlist).await;
         (MemoryPlaylistSource::new(pl).boxed(), err)
     };
+
+    if mark_as_processed {
+        // Mark after persist/load so other workers only see this input as ready when data is usable.
+        ctx.mark_input_downloaded(input.name.clone()).await;
+    }
+
     (playlist_download_result.download_err, playlist, error)
 }
 
diff --git a/frontend/Cargo.toml b/frontend/Cargo.toml
index db14a95bc..8bd38bbb4 100644
--- a/frontend/Cargo.toml
+++ b/frontend/Cargo.toml
@@ -28,6 +28,7 @@ futures-signals = "0.3"
 futures = "0.3"
 prost = "0"
 wasm-bindgen-futures = "0"
+js-sys = "0.3"
 bytes = "1"
 regex = "1.12.3"
 base64 = "0.22.1"
@@ -37,9 +38,11 @@ indexmap = "2.13.0"
 
 [dependencies.web-sys]
 version = "0.3"
-features = ["Document", "Element", "Node", "Window", "HtmlCollection", "HtmlImageElement", "HtmlInputElement", "DomRect", "HtmlDialogElement", "CssStyleDeclaration"]
+features = ["Document", "Element", "Node", "Window", "HtmlCollection", "HtmlImageElement", "HtmlInputElement",
+    "DomRect", "HtmlDialogElement", "CssStyleDeclaration",
+    "Event", "WebGlRenderingContext", "WebGlProgram", "WebGlShader", "WebGlBuffer", "WebGlUniformLocation",
+    "HtmlCanvasElement"]
 
 [dev-dependencies]
-js-sys = "0.3"
 wasm-bindgen-test = "0.3"
 gloo-utils = "0.2"
diff --git a/frontend/scss/_theme.scss b/frontend/scss/_theme.scss
index 55e8a2680..2f1236b1a 100644
--- a/frontend/scss/_theme.scss
+++ b/frontend/scss/_theme.scss
@@ -78,6 +78,8 @@
   --modest-text-color: #a7abb4;
   --background-color: #0a0b10;
   --floating-background-color: #071529;
+  --floating-background-accent-color-1: #6aa7ff;
+  --floating-background-accent-color-2: #7ab6ff;
   --border-color: rgba(60, 100, 195, 0.25);
   --input-background-color: rgba(255, 255, 255, 0);
   --input-border-color: var(--border-color);
@@ -408,6 +410,8 @@ body[data-theme="bright"] {
   --background-color: #f8fafc;
   /* Very light slate */
   --floating-background-color: #ffffff;
+  --floating-background-accent-color-1: #6aa7ff;
+  --floating-background-accent-color-2: #7ab6ff;
   --text-color: #0f172a;
   /* Slate 900 */
   --modest-text-color: #64748b;
@@ -646,4 +650,4 @@ body[data-theme="bright"] {
   --breadcrumb-color: #64748b;
   --breadcrumb-active-background-color: #dcfce7;
   --breadcrumb-active-color: #166534;
-}
\ No newline at end of file
+}
diff --git a/frontend/scss/app/_component.scss b/frontend/scss/app/_component.scss
index 45854b1f4..b3d40d6db 100644
--- a/frontend/scss/app/_component.scss
+++ b/frontend/scss/app/_component.scss
@@ -81,7 +81,7 @@
 @forward "components/loading_screen";
 @forward "components/websocket_status";
 @forward "components/playlist/epg_view";
-@forward "components/floating_background";
+@forward "components/particle_flow_background";
 @forward "components/source_editor/source_editor";
 @forward "components/source_editor/source_editor_form";
 @forward "components/source_editor/source_editor_block";
diff --git a/frontend/scss/app/components/_floating_background.scss b/frontend/scss/app/components/_floating_background.scss
deleted file mode 100644
index 39d5f0a47..000000000
--- a/frontend/scss/app/components/_floating_background.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.tp__floating-background {
-  position: fixed;
-  inset: 0;
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-  pointer-events: none;
-
-  //background-color: var(--floating-background-color);
-  background: radial-gradient(var(--floating-background-color) 0%, var(--background-color) 70%);
-  z-index: -1;
-
-  .tp__star {
-    position: absolute;
-
-    pointer-events: none;
-    user-select: none;
-
-    border-radius: 50%;
-
-    //.organic-circle {
-    background: radial-gradient(circle, var(--floating-particle-gradient-color-1) 0%, var(--floating-particle-gradient-color-2) 70%);
-    animation: organic-wobble 8s ease-in-out infinite;
-    filter: blur(3px);
-    will-change: transform;
-
-    @media (prefers-reduced-motion: reduce) {
-      animation: none;
-      transform: none;
-    }
-  }
-  @keyframes organic-wobble {
-    0% { transform: scale(1); }
-    25% { transform: scale(1.3); }
-    50% { transform: scale(0.7); }
-    75% { transform: scale(1.3); }
-    100% { transform: scale(1); }
-  }
-}
diff --git a/frontend/scss/app/components/_particle_flow_background.scss b/frontend/scss/app/components/_particle_flow_background.scss
new file mode 100644
index 000000000..496d8cdb4
--- /dev/null
+++ b/frontend/scss/app/components/_particle_flow_background.scss
@@ -0,0 +1,23 @@
+.tp__particle-flow-background,
+.tp__floating-background {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 0;
+  isolation: isolate;
+  background:
+    radial-gradient(
+      ellipse at 20% 8%,
+      color-mix(in srgb, var(--floating-background-color), var(--floating-background-accent-color-1) 20%) 0%,
+      transparent 50%
+    ),
+    radial-gradient(
+      ellipse at 78% -5%,
+      color-mix(in srgb, var(--floating-background-color), var(--floating-background-accent-color-2) 12%) 0%,
+      transparent 45%
+    ),
+    linear-gradient(180deg, var(--floating-background-color) 0%, var(--background-color) 84%);
+}
diff --git a/frontend/src/app/components/floating_background.rs b/frontend/src/app/components/floating_background.rs
deleted file mode 100644
index 77d53d7ab..000000000
--- a/frontend/src/app/components/floating_background.rs
+++ /dev/null
@@ -1,77 +0,0 @@
-use gloo_timers::callback::Interval;
-use gloo_utils::window;
-use yew::prelude::*;
-
-#[derive(Clone, Debug, Properties, PartialEq)]
-struct Star {
-    x: f64,
-    y: f64,
-    size: f64,
-    dx: f64,
-    dy: f64,
-    anim_delay: f64,
-}
-
-#[function_component]
-pub fn FloatingBackground() -> Html {
-    let stars = use_state(|| {
-        let width = window().inner_width().unwrap().as_f64().unwrap_or(800.0);
-        let height = window().inner_height().unwrap().as_f64().unwrap_or(600.0);
-        let area = width * height;
-        let num_stars = ((area / 50000.0) as usize).clamp(10, 40);
-        let mut rng = fastrand::Rng::new();
-        let stars: Vec<Star> = (0..num_stars)
-            .map(|_| Star {
-                x: rng.f64() * 100.0,
-                y: rng.f64() * 100.0,
-                size: 16.0 + fastrand::f64() * (5.0 - 2.0),
-                dx: -0.025 + rng.f64() * 0.1,
-                dy: -0.025 + rng.f64() * 0.1,
-                anim_delay: rng.f64() * 8.0,
-            })
-            .collect();
-        stars
-    });
-
-    {
-        let stars = stars.clone();
-        use_effect(move || {
-            let interval = Interval::new(200, move || {
-                stars.set(
-                    stars
-                        .iter()
-                        .map(|s| {
-                            let mut star = s.clone();
-                            star.x += star.dx;
-                            star.y += star.dy;
-                            if star.x < 0.0 {
-                                star.x = 100.0;
-                            }
-                            if star.x > 100.0 {
-                                star.x = 0.0;
-                            }
-                            if star.y < 0.0 {
-                                star.y = 100.0;
-                            }
-                            if star.y > 100.0 {
-                                star.y = 0.0;
-                            }
-                            star
-                        })
-                        .collect::<Vec<Star>>(),
-                );
-            });
-            move || drop(interval)
-        });
-    }
-
-    html! {
-        <div class="tp__floating-background">
-            { for stars.iter().map(|s| html! {
-                <div class="tp__star"
-                    style={format!("width: {}px; height: {}px; left: {}%; top: {}%; animation-delay: {}s;", s.size, s.size, s.x, s.y, s.anim_delay)}
-                />
-            })}
-        </div>
-    }
-}
diff --git a/frontend/src/app/components/login.rs b/frontend/src/app/components/login.rs
index 14cf8ce2b..e10899568 100644
--- a/frontend/src/app/components/login.rs
+++ b/frontend/src/app/components/login.rs
@@ -1,5 +1,5 @@
 use crate::{
-    app::components::{floating_background::FloatingBackground, input::Input, svg_icon::AppIcon, TextButton},
+    app::components::{input::Input, svg_icon::AppIcon, ParticleFlowBackground, TextButton},
     hooks::use_service_context,
 };
 use web_sys::HtmlInputElement;
@@ -74,7 +74,7 @@ pub fn Login() -> Html {
 
     html! {
         <>
-        <FloatingBackground />
+        <ParticleFlowBackground />
         <div class="tp__login-view">
            <div class={"tp__login-view__header"}>
                 <div class={"tp__login-view__header-logo"}>{app_logo.as_ref().clone()}</div>
diff --git a/frontend/src/app/components/mod.rs b/frontend/src/app/components/mod.rs
index 1989be9e3..d027bc3a4 100644
--- a/frontend/src/app/components/mod.rs
+++ b/frontend/src/app/components/mod.rs
@@ -49,7 +49,7 @@ mod websocket_status;
 
 mod cluster_flags_input;
 mod filter;
-mod floating_background;
+mod particle_flow_background;
 mod source_editor;
 mod title_card;
 // pub use self::input::*;
@@ -62,8 +62,8 @@ pub(crate) use self::{
     accordion::*, accordion_panel::*, authentication::*, breadcrumbs::*, card::*, cell_value::*, chip::*,
     cluster_flags_input::*, collapse_panel::*, csv_table::*, custom_dialog::*, dashboard::*, drop_down_icon_button::*,
     filter::*, hide_content::*, home::*, icon_button::*, key_value_editor::*, loading_screen::*, login::*,
-    no_content::*, panel::*, playlist::*, radio_button_group::*, reveal_content::*, role_based_content::*, search::*,
-    sidebar::*, source_editor::*, svg_icon::*, table::*, tabset::*, tag_list::*, text_button::*, textarea::*,
-    title_card::*, toastr::*, toggle_switch::*, userlist::*, websocket_status::*,
+    no_content::*, panel::*, particle_flow_background::*, playlist::*, radio_button_group::*, reveal_content::*,
+    role_based_content::*, search::*, sidebar::*, source_editor::*, svg_icon::*, table::*, tabset::*, tag_list::*,
+    text_button::*, textarea::*, title_card::*, toastr::*, toggle_switch::*, userlist::*, websocket_status::*,
 };
 pub use self::{confirm_dialog::*, content_dialog::*};
diff --git a/frontend/src/app/components/particle_flow_background.rs b/frontend/src/app/components/particle_flow_background.rs
new file mode 100644
index 000000000..473d4c12f
--- /dev/null
+++ b/frontend/src/app/components/particle_flow_background.rs
@@ -0,0 +1,672 @@
+use fastrand::Rng;
+use js_sys::Float32Array;
+use std::{cell::RefCell, f32::consts::TAU, rc::Rc};
+use wasm_bindgen::{closure::Closure, JsCast};
+use web_sys::{
+    window, Event, HtmlCanvasElement, WebGlBuffer, WebGlProgram, WebGlRenderingContext, WebGlShader,
+    WebGlUniformLocation,
+};
+use yew::prelude::*;
+
+const PARTICLE_COUNT: i32 = 520;
+const PARTICLE_STRIDE_FLOATS: i32 = 5;
+const PARTICLE_STRIDE_BYTES: i32 = PARTICLE_STRIDE_FLOATS * 4;
+const SPAWN_BOUND: f32 = 1.08;
+const WORLD_BOUND: f32 = 1.24;
+const DENSITY_GRID_W: usize = 24;
+const DENSITY_GRID_H: usize = 16;
+
+#[derive(Clone)]
+struct ParticleState {
+    pos: [f32; 2],
+    vel: [f32; 2],
+    home: [f32; 2],
+    size: f32,
+    alpha: f32,
+    layer: f32,
+    seed: f32,
+}
+
+struct RenderRuntime {
+    gl: WebGlRenderingContext,
+    _program: WebGlProgram,
+    buffer: WebGlBuffer,
+    u_dpr: Option<WebGlUniformLocation>,
+}
+
+const VERTEX_SHADER: &str = r#"
+attribute vec2 a_pos;
+attribute vec3 a_meta; // size, alpha, layer
+uniform float u_dpr;
+
+varying float v_alpha;
+varying float v_layer;
+
+void main() {
+    gl_Position = vec4(a_pos, 0.0, 1.0);
+    gl_PointSize = a_meta.x * u_dpr * (1.0 + a_meta.z * 0.38);
+    v_alpha = a_meta.y;
+    v_layer = a_meta.z;
+}
+"#;
+
+const FRAGMENT_SHADER: &str = r#"
+precision highp float;
+
+uniform vec3 u_accent1;
+uniform vec3 u_accent2;
+
+varying float v_alpha;
+varying float v_layer;
+
+void main() {
+    vec2 uv = gl_PointCoord - vec2(0.5);
+    float dist = length(uv);
+    if (dist > 0.5) {
+        discard;
+    }
+
+    float core = 1.0 - smoothstep(0.0, 0.32, dist);
+    float halo = 1.0 - smoothstep(0.2, 0.5, dist);
+    float alpha = (core * 0.75 + halo * 0.25) * v_alpha;
+    vec3 color = mix(u_accent1, u_accent2, clamp(v_layer * 0.35, 0.0, 1.0));
+    gl_FragColor = vec4(color, alpha);
+}
+"#;
+
+fn normalize(v: [f32; 2]) -> [f32; 2] {
+    let len = (v[0] * v[0] + v[1] * v[1]).sqrt().max(0.00001);
+    [v[0] / len, v[1] / len]
+}
+
+fn fract(v: f32) -> f32 { v - v.floor() }
+
+fn hash1(v: f32) -> f32 { fract((v.sin() * 43_758.547).abs()) }
+
+fn parse_rgb_component(component: &str) -> Option<f32> {
+    let value = component.trim();
+    if let Some(percent) = value.strip_suffix('%') {
+        percent.parse::<f32>().ok().map(|v| (v / 100.0).clamp(0.0, 1.0))
+    } else {
+        value.parse::<f32>().ok().map(|v| (v / 255.0).clamp(0.0, 1.0))
+    }
+}
+
+fn parse_css_color_to_rgb(value: &str) -> Option<[f32; 3]> {
+    let color = value.trim();
+    if let Some(hex) = color.strip_prefix('#') {
+        return match hex.len() {
+            3 => {
+                let r = u8::from_str_radix(&hex[0..1].repeat(2), 16).ok()? as f32 / 255.0;
+                let g = u8::from_str_radix(&hex[1..2].repeat(2), 16).ok()? as f32 / 255.0;
+                let b = u8::from_str_radix(&hex[2..3].repeat(2), 16).ok()? as f32 / 255.0;
+                Some([r, g, b])
+            }
+            4 => {
+                let r = u8::from_str_radix(&hex[0..1].repeat(2), 16).ok()? as f32 / 255.0;
+                let g = u8::from_str_radix(&hex[1..2].repeat(2), 16).ok()? as f32 / 255.0;
+                let b = u8::from_str_radix(&hex[2..3].repeat(2), 16).ok()? as f32 / 255.0;
+                Some([r, g, b])
+            }
+            6 => {
+                let r = u8::from_str_radix(&hex[0..2], 16).ok()? as f32 / 255.0;
+                let g = u8::from_str_radix(&hex[2..4], 16).ok()? as f32 / 255.0;
+                let b = u8::from_str_radix(&hex[4..6], 16).ok()? as f32 / 255.0;
+                Some([r, g, b])
+            }
+            8 => {
+                let r = u8::from_str_radix(&hex[0..2], 16).ok()? as f32 / 255.0;
+                let g = u8::from_str_radix(&hex[2..4], 16).ok()? as f32 / 255.0;
+                let b = u8::from_str_radix(&hex[4..6], 16).ok()? as f32 / 255.0;
+                Some([r, g, b])
+            }
+            _ => None,
+        };
+    }
+
+    let inner = color
+        .strip_prefix("rgb(")
+        .and_then(|s| s.strip_suffix(')'))
+        .or_else(|| color.strip_prefix("rgba(").and_then(|s| s.strip_suffix(')')))?;
+
+    let components: Vec<&str> = inner.split(',').collect();
+    if components.len() < 3 {
+        return None;
+    }
+
+    let r = parse_rgb_component(components[0])?;
+    let g = parse_rgb_component(components[1])?;
+    let b = parse_rgb_component(components[2])?;
+    Some([r, g, b])
+}
+
+fn read_accent_colors_from_css() -> ([f32; 3], [f32; 3]) {
+    let fallback_1 = [0.45, 0.63, 0.88];
+    let fallback_2 = [0.95, 0.97, 1.0];
+
+    let Some(win) = window() else {
+        return (fallback_1, fallback_2);
+    };
+    let Some(document) = win.document() else {
+        return (fallback_1, fallback_2);
+    };
+    let Some(root) = document.document_element() else {
+        return (fallback_1, fallback_2);
+    };
+    let Some(style) = win.get_computed_style(&root).ok().flatten() else {
+        return (fallback_1, fallback_2);
+    };
+
+    // Prefer new particle-flow variables, but keep legacy names as fallback for existing themes.
+    let accent_1 = style
+        .get_property_value("--particle-flow-background-accent-color-1")
+        .ok()
+        .and_then(|v| parse_css_color_to_rgb(&v))
+        .or_else(|| {
+            style
+                .get_property_value("--floating-background-accent-color-1")
+                .ok()
+                .and_then(|v| parse_css_color_to_rgb(&v))
+        })
+        .unwrap_or(fallback_1);
+    let accent_2 = style
+        .get_property_value("--particle-flow-background-accent-color-2")
+        .ok()
+        .and_then(|v| parse_css_color_to_rgb(&v))
+        .or_else(|| {
+            style
+                .get_property_value("--floating-background-accent-color-2")
+                .ok()
+                .and_then(|v| parse_css_color_to_rgb(&v))
+        })
+        .unwrap_or(fallback_2);
+
+    (accent_1, accent_2)
+}
+
+fn pos_to_cell(pos: [f32; 2]) -> (usize, usize) {
+    let ux = ((pos[0] + WORLD_BOUND) / (WORLD_BOUND * 2.0)).clamp(0.0, 0.999_9);
+    let uy = ((pos[1] + WORLD_BOUND) / (WORLD_BOUND * 2.0)).clamp(0.0, 0.999_9);
+    let cx = (ux * DENSITY_GRID_W as f32) as usize;
+    let cy = (uy * DENSITY_GRID_H as f32) as usize;
+    (cx, cy)
+}
+
+fn respawn_particle(particle: &mut ParticleState, time: f32) {
+    let r = hash1(particle.seed * 13.17 + time * 0.31);
+    let t = hash1(particle.seed * 7.11 + time * 0.23) * 2.0 - 1.0;
+    let inward = 0.05 + particle.layer * 0.03;
+
+    let side = (r * 4.0).floor() as i32;
+    match side {
+        0 => {
+            particle.pos = [-SPAWN_BOUND, t * SPAWN_BOUND];
+            particle.vel = [inward, 0.0];
+        }
+        1 => {
+            particle.pos = [SPAWN_BOUND, t * SPAWN_BOUND];
+            particle.vel = [-inward, 0.0];
+        }
+        2 => {
+            particle.pos = [t * SPAWN_BOUND, -SPAWN_BOUND];
+            particle.vel = [0.0, inward];
+        }
+        _ => {
+            particle.pos = [t * SPAWN_BOUND, SPAWN_BOUND];
+            particle.vel = [0.0, -inward];
+        }
+    }
+    particle.home = particle.pos;
+}
+
+fn sample_curl_velocity(pos: [f32; 2], time: f32) -> [f32; 2] {
+    let x = pos[0];
+    let y = pos[1];
+    let mut vx = 0.0;
+    let mut vy = 0.0;
+
+    let modes = [
+        (0.52_f32, 1.15_f32, 0.84_f32, 0.13_f32, 0.2_f32),
+        (0.34_f32, 1.92_f32, -1.47_f32, 0.09_f32, 1.4_f32),
+        (0.22_f32, -2.41_f32, 2.18_f32, 0.06_f32, 2.3_f32),
+    ];
+
+    for (amp, kx, ky, wt, phase) in modes {
+        let a = kx * x + ky * y + wt * time + phase;
+        let c = a.cos();
+        vx += amp * ky * c;
+        vy += -amp * kx * c;
+
+        let bx = kx * 0.71;
+        let by = ky * -1.19;
+        let b = bx * x + by * y + wt * 1.36 * time + phase * 1.71;
+        let cb = b.cos();
+        vx += amp * 0.55 * by * cb;
+        vy += -amp * 0.55 * bx * cb;
+    }
+
+    let len = (vx * vx + vy * vy).sqrt();
+    if len > 1.25 {
+        let s = 1.25 / len;
+        vx *= s;
+        vy *= s;
+    }
+
+    [vx * 0.24, vy * 0.24]
+}
+
+fn build_particles() -> Vec<ParticleState> {
+    let mut rng = Rng::with_seed(24_021_313);
+    let mut particles = Vec::with_capacity(PARTICLE_COUNT as usize);
+
+    for _ in 0..PARTICLE_COUNT {
+        let layer = match rng.u32(0..100) {
+            0..=43 => 0.0,
+            44..=79 => 1.0,
+            _ => 2.0,
+        };
+
+        let (size, alpha) = if layer < 0.5 {
+            (rng.f32() * 1.7 + 1.3, rng.f32() * 0.10 + 0.18)
+        } else if layer < 1.5 {
+            (rng.f32() * 2.4 + 2.2, rng.f32() * 0.12 + 0.28)
+        } else {
+            (rng.f32() * 3.0 + 3.0, rng.f32() * 0.14 + 0.40)
+        };
+
+        let seed = rng.f32() * TAU;
+        let pos = [rng.f32() * (SPAWN_BOUND * 2.0) - SPAWN_BOUND, rng.f32() * (SPAWN_BOUND * 2.0) - SPAWN_BOUND];
+
+        particles.push(ParticleState { pos, vel: [0.0, 0.0], home: pos, size, alpha, layer, seed });
+    }
+
+    particles
+}
+
+fn update_particles(particles: &mut [ParticleState], density: &mut [f32], dt: f32, time: f32) {
+    let wind_dir = normalize([1.0 + 0.2 * (time * 0.04).sin(), 0.18 * (time * 0.07).sin()]);
+    let wind_env = 0.38 + 0.62 * (0.5 + 0.5 * (time * 0.08 + (time * 0.023).sin() * 2.0).sin());
+    let expected_density = particles.len() as f32 / (DENSITY_GRID_W * DENSITY_GRID_H) as f32;
+
+    debug_assert_eq!(density.len(), DENSITY_GRID_W * DENSITY_GRID_H);
+    density.fill(0.0);
+    for particle in particles.iter() {
+        let (cx, cy) = pos_to_cell(particle.pos);
+        density[cy * DENSITY_GRID_W + cx] += 1.0;
+    }
+
+    for particle in particles {
+        let mut target = sample_curl_velocity(particle.pos, time + particle.seed * 0.25);
+
+        let regional =
+            ((particle.pos[0] * 1.6 + time * 0.18).sin() * (particle.pos[1] * 1.3 - time * 0.14).cos()) * 0.5 + 0.5;
+        let gust = (0.04 + particle.layer * 0.03) * wind_env * regional;
+        target[0] += wind_dir[0] * gust;
+        target[1] += wind_dir[1] * gust;
+
+        let layer_scale = 0.62 + particle.layer * 0.18;
+        target[0] *= layer_scale;
+        target[1] *= layer_scale;
+
+        let (cx, cy) = pos_to_cell(particle.pos);
+        let sample = |dx: isize, dy: isize| -> f32 {
+            let nx = (cx as isize + dx).clamp(0, DENSITY_GRID_W as isize - 1) as usize;
+            let ny = (cy as isize + dy).clamp(0, DENSITY_GRID_H as isize - 1) as usize;
+            density[ny * DENSITY_GRID_W + nx]
+        };
+
+        let grad_x = (sample(1, 0) - sample(-1, 0)) / expected_density.max(0.0001);
+        let grad_y = (sample(0, 1) - sample(0, -1)) / expected_density.max(0.0001);
+        let local_density = sample(0, 0) / expected_density.max(0.0001);
+        let pressure = (local_density - 1.0).max(0.0);
+        let density_push = (0.012 + particle.layer * 0.006) * pressure;
+        target[0] += -grad_x * density_push;
+        target[1] += -grad_y * density_push;
+
+        let home_pull = 0.011 + particle.layer * 0.004;
+        target[0] += (particle.home[0] - particle.pos[0]) * home_pull;
+        target[1] += (particle.home[1] - particle.pos[1]) * home_pull;
+
+        let edge = particle.pos[0].abs().max(particle.pos[1].abs());
+        if edge > 0.80 {
+            let inward_dir = normalize([-particle.pos[0], -particle.pos[1]]);
+            let pull = (edge - 0.80) * 0.10;
+            target[0] += inward_dir[0] * pull;
+            target[1] += inward_dir[1] * pull;
+        }
+
+        let relax = 1.0 - (-dt * (1.8 + particle.layer * 0.65)).exp();
+        particle.vel[0] += (target[0] - particle.vel[0]) * relax;
+        particle.vel[1] += (target[1] - particle.vel[1]) * relax;
+
+        particle.pos[0] += particle.vel[0] * dt;
+        particle.pos[1] += particle.vel[1] * dt;
+
+        if particle.pos[0].abs() > WORLD_BOUND || particle.pos[1].abs() > WORLD_BOUND {
+            respawn_particle(particle, time);
+        }
+    }
+}
+
+fn fill_gpu_data(particles: &[ParticleState], out: &mut Vec<f32>) {
+    out.clear();
+    out.reserve(particles.len() * PARTICLE_STRIDE_FLOATS as usize);
+    for particle in particles {
+        out.extend_from_slice(&[particle.pos[0], particle.pos[1], particle.size, particle.alpha, particle.layer]);
+    }
+}
+
+fn resize_canvas(canvas: &HtmlCanvasElement, gl: &WebGlRenderingContext) {
+    let Some(win) = window() else { return };
+
+    let width = win.inner_width().ok().and_then(|v| v.as_f64()).unwrap_or(1.0);
+    let height = win.inner_height().ok().and_then(|v| v.as_f64()).unwrap_or(1.0);
+    let dpr = win.device_pixel_ratio().max(1.0);
+
+    let target_width = (width * dpr).round() as u32;
+    let target_height = (height * dpr).round() as u32;
+
+    if canvas.width() != target_width || canvas.height() != target_height {
+        canvas.set_width(target_width);
+        canvas.set_height(target_height);
+    }
+
+    gl.viewport(0, 0, target_width as i32, target_height as i32);
+}
+
+fn upload_dpr_uniform(gl: &WebGlRenderingContext, location: Option<WebGlUniformLocation>) {
+    if let (Some(win), Some(location)) = (window(), location.as_ref()) {
+        gl.uniform1f(Some(location), win.device_pixel_ratio().max(1.0) as f32);
+    }
+}
+
+fn upload_accent_uniform(gl: &WebGlRenderingContext, location: Option<WebGlUniformLocation>, value: [f32; 3]) {
+    if let Some(location) = location.as_ref() {
+        gl.uniform3f(Some(location), value[0], value[1], value[2]);
+    }
+}
+
+fn init_renderer(canvas: &HtmlCanvasElement, initial_data: &[f32]) -> Result<RenderRuntime, String> {
+    let context = canvas
+        .get_context("webgl")
+        .ok()
+        .flatten()
+        .or_else(|| canvas.get_context("experimental-webgl").ok().flatten())
+        .ok_or_else(|| String::from("WebGL context is not available for particle flow background"))?;
+
+    let gl = context.dyn_into::<WebGlRenderingContext>().map_err(|_| String::from("Failed to cast WebGL context"))?;
+
+    let program = link_program(&gl, VERTEX_SHADER, FRAGMENT_SHADER)?;
+    gl.use_program(Some(&program));
+    gl.enable(WebGlRenderingContext::BLEND);
+    gl.blend_func(WebGlRenderingContext::SRC_ALPHA, WebGlRenderingContext::ONE_MINUS_SRC_ALPHA);
+    gl.clear_color(0.0, 0.0, 0.0, 0.0);
+    resize_canvas(canvas, &gl);
+
+    let (accent_1, accent_2) = read_accent_colors_from_css();
+    let u_accent_1 = gl.get_uniform_location(&program, "u_accent1");
+    let u_accent_2 = gl.get_uniform_location(&program, "u_accent2");
+    let u_dpr = gl.get_uniform_location(&program, "u_dpr");
+    upload_accent_uniform(&gl, u_accent_1, accent_1);
+    upload_accent_uniform(&gl, u_accent_2, accent_2);
+    upload_dpr_uniform(&gl, u_dpr.clone());
+
+    let buffer = gl.create_buffer().ok_or_else(|| String::from("Failed to create particle buffer"))?;
+    gl.bind_buffer(WebGlRenderingContext::ARRAY_BUFFER, Some(&buffer));
+    // SAFETY: `initial_data` is borrowed for the duration of this immediate upload call.
+    let initial_array = unsafe { Float32Array::view(initial_data) };
+    gl.buffer_data_with_array_buffer_view(
+        WebGlRenderingContext::ARRAY_BUFFER,
+        &initial_array,
+        WebGlRenderingContext::DYNAMIC_DRAW,
+    );
+
+    let a_pos_loc = gl.get_attrib_location(&program, "a_pos");
+    if a_pos_loc < 0 {
+        return Err(String::from("Attribute a_pos not found"));
+    }
+    gl.enable_vertex_attrib_array(a_pos_loc as u32);
+    gl.vertex_attrib_pointer_with_i32(
+        a_pos_loc as u32,
+        2,
+        WebGlRenderingContext::FLOAT,
+        false,
+        PARTICLE_STRIDE_BYTES,
+        0,
+    );
+
+    let a_meta_loc = gl.get_attrib_location(&program, "a_meta");
+    if a_meta_loc < 0 {
+        return Err(String::from("Attribute a_meta not found"));
+    }
+    gl.enable_vertex_attrib_array(a_meta_loc as u32);
+    gl.vertex_attrib_pointer_with_i32(
+        a_meta_loc as u32,
+        3,
+        WebGlRenderingContext::FLOAT,
+        false,
+        PARTICLE_STRIDE_BYTES,
+        8,
+    );
+
+    Ok(RenderRuntime { gl, _program: program, buffer, u_dpr })
+}
+
+#[function_component]
+pub fn ParticleFlowBackground() -> Html {
+    let canvas_ref = use_node_ref();
+
+    {
+        let canvas_ref = canvas_ref.clone();
+        use_effect_with((), move |_| {
+            let Some(canvas) = canvas_ref.cast::<HtmlCanvasElement>() else {
+                return Box::new(|| ()) as Box<dyn FnOnce()>;
+            };
+
+            let particles = Rc::new(RefCell::new(build_particles()));
+            let density_grid = Rc::new(RefCell::new(vec![0.0_f32; DENSITY_GRID_W * DENSITY_GRID_H]));
+            let gpu_data = Rc::new(RefCell::new(Vec::<f32>::with_capacity(
+                PARTICLE_COUNT as usize * PARTICLE_STRIDE_FLOATS as usize,
+            )));
+            {
+                let particles_borrow = particles.borrow();
+                let mut gpu_data_borrow = gpu_data.borrow_mut();
+                fill_gpu_data(&particles_borrow, &mut gpu_data_borrow);
+            }
+
+            let initial_runtime = {
+                let initial_data = gpu_data.borrow();
+                match init_renderer(&canvas, initial_data.as_slice()) {
+                    Ok(runtime) => runtime,
+                    Err(err) => {
+                        log::error!("{err}");
+                        return Box::new(|| ()) as Box<dyn FnOnce()>;
+                    }
+                }
+            };
+            let runtime_ref = Rc::new(RefCell::new(Some(initial_runtime)));
+
+            let raf_id = Rc::new(RefCell::new(None::<i32>));
+            let last_ts = Rc::new(RefCell::new(None::<f64>));
+            let sim_time = Rc::new(RefCell::new(0.0_f32));
+            let animation = Rc::new(RefCell::new(None::<Closure<dyn FnMut(f64)>>));
+
+            let runtime_ref_anim = runtime_ref.clone();
+            let animation_ref = animation.clone();
+            let raf_id_ref = raf_id.clone();
+            let last_ts_ref = last_ts.clone();
+            let sim_time_ref = sim_time.clone();
+            let particles_ref = particles.clone();
+            let density_grid_ref = density_grid.clone();
+            let gpu_data_ref = gpu_data.clone();
+
+            *animation.borrow_mut() = Some(Closure::wrap(Box::new(move |timestamp: f64| {
+                let dt = {
+                    let mut last = last_ts_ref.borrow_mut();
+                    let dt = match *last {
+                        Some(prev) => ((timestamp - prev) / 1000.0) as f32,
+                        None => 1.0 / 60.0,
+                    };
+                    *last = Some(timestamp);
+                    dt.clamp(1.0 / 240.0, 1.0 / 24.0)
+                };
+
+                let time = {
+                    let mut t = sim_time_ref.borrow_mut();
+                    *t += dt;
+                    *t
+                };
+
+                {
+                    let mut particles = particles_ref.borrow_mut();
+                    let mut density_grid = density_grid_ref.borrow_mut();
+                    update_particles(&mut particles, density_grid.as_mut_slice(), dt, time);
+                    let mut gpu_data = gpu_data_ref.borrow_mut();
+                    fill_gpu_data(&particles, &mut gpu_data);
+                }
+
+                if let Some(runtime) = runtime_ref_anim.borrow().as_ref() {
+                    let frame_data = gpu_data_ref.borrow();
+                    // SAFETY: `frame_data` is immutably borrowed and immediately consumed by WebGL upload.
+                    let array = unsafe { Float32Array::view(frame_data.as_slice()) };
+                    runtime.gl.bind_buffer(WebGlRenderingContext::ARRAY_BUFFER, Some(&runtime.buffer));
+                    runtime.gl.buffer_sub_data_with_i32_and_array_buffer_view(
+                        WebGlRenderingContext::ARRAY_BUFFER,
+                        0,
+                        &array,
+                    );
+                    runtime.gl.clear(WebGlRenderingContext::COLOR_BUFFER_BIT);
+                    runtime.gl.draw_arrays(WebGlRenderingContext::POINTS, 0, PARTICLE_COUNT);
+                }
+
+                if let Some(win) = window() {
+                    if let Some(callback) = animation_ref.borrow().as_ref() {
+                        if let Ok(id) = win.request_animation_frame(callback.as_ref().unchecked_ref()) {
+                            *raf_id_ref.borrow_mut() = Some(id);
+                        }
+                    }
+                }
+            }) as Box<dyn FnMut(f64)>));
+
+            let Some(win) = window() else {
+                return Box::new(|| ()) as Box<dyn FnOnce()>;
+            };
+
+            let animation_kickoff = animation.clone();
+            if let Some(callback) = animation_kickoff.borrow().as_ref() {
+                if let Ok(id) = win.request_animation_frame(callback.as_ref().unchecked_ref()) {
+                    *raf_id.borrow_mut() = Some(id);
+                }
+            }
+
+            let resize_canvas_ref = canvas.clone();
+            let runtime_ref_resize = runtime_ref.clone();
+            let on_resize = Closure::<dyn FnMut()>::wrap(Box::new(move || {
+                if let Some(runtime) = runtime_ref_resize.borrow().as_ref() {
+                    resize_canvas(&resize_canvas_ref, &runtime.gl);
+                    upload_dpr_uniform(&runtime.gl, runtime.u_dpr.clone());
+                }
+            }));
+            let _ = win.add_event_listener_with_callback("resize", on_resize.as_ref().unchecked_ref());
+
+            let runtime_ref_lost = runtime_ref.clone();
+            let on_context_lost = Closure::<dyn FnMut(Event)>::wrap(Box::new(move |event: Event| {
+                event.prevent_default();
+                *runtime_ref_lost.borrow_mut() = None;
+            }));
+            let _ =
+                canvas.add_event_listener_with_callback("webglcontextlost", on_context_lost.as_ref().unchecked_ref());
+
+            let runtime_ref_restore = runtime_ref.clone();
+            let canvas_restore = canvas.clone();
+            let gpu_data_restore = gpu_data.clone();
+            let on_context_restored = Closure::<dyn FnMut(Event)>::wrap(Box::new(move |_event: Event| {
+                let data = gpu_data_restore.borrow();
+                match init_renderer(&canvas_restore, data.as_slice()) {
+                    Ok(runtime) => {
+                        *runtime_ref_restore.borrow_mut() = Some(runtime);
+                    }
+                    Err(err) => log::error!("Failed to restore WebGL context: {err}"),
+                }
+            }));
+            let _ = canvas
+                .add_event_listener_with_callback("webglcontextrestored", on_context_restored.as_ref().unchecked_ref());
+
+            let canvas_cleanup = canvas.clone();
+            Box::new(move || {
+                if let Some(win) = window() {
+                    if let Some(id) = *raf_id.borrow() {
+                        let _ = win.cancel_animation_frame(id);
+                    }
+                    let _ = win.remove_event_listener_with_callback("resize", on_resize.as_ref().unchecked_ref());
+                }
+                let _ = canvas_cleanup
+                    .remove_event_listener_with_callback("webglcontextlost", on_context_lost.as_ref().unchecked_ref());
+                let _ = canvas_cleanup.remove_event_listener_with_callback(
+                    "webglcontextrestored",
+                    on_context_restored.as_ref().unchecked_ref(),
+                );
+                *runtime_ref.borrow_mut() = None;
+                *animation.borrow_mut() = None;
+            }) as Box<dyn FnOnce()>
+        });
+    }
+
+    html! { <canvas class="tp__particle-flow-background" ref={canvas_ref} aria-hidden="true" /> }
+}
+
+fn compile_shader(gl: &WebGlRenderingContext, shader_type: u32, source: &str) -> Result<WebGlShader, String> {
+    let shader = gl.create_shader(shader_type).ok_or_else(|| String::from("Failed to create shader"))?;
+
+    gl.shader_source(&shader, source);
+    gl.compile_shader(&shader);
+
+    let status = gl.get_shader_parameter(&shader, WebGlRenderingContext::COMPILE_STATUS).as_bool().unwrap_or(false);
+
+    if status {
+        Ok(shader)
+    } else {
+        let error = gl.get_shader_info_log(&shader).unwrap_or_else(|| String::from("Unknown shader error"));
+        gl.delete_shader(Some(&shader));
+        Err(error)
+    }
+}
+
+fn link_program(gl: &WebGlRenderingContext, vert_source: &str, frag_source: &str) -> Result<WebGlProgram, String> {
+    let vertex_shader = compile_shader(gl, WebGlRenderingContext::VERTEX_SHADER, vert_source)?;
+    let fragment_shader = match compile_shader(gl, WebGlRenderingContext::FRAGMENT_SHADER, frag_source) {
+        Ok(shader) => shader,
+        Err(err) => {
+            gl.delete_shader(Some(&vertex_shader));
+            return Err(err);
+        }
+    };
+
+    let Some(program) = gl.create_program() else {
+        gl.delete_shader(Some(&vertex_shader));
+        gl.delete_shader(Some(&fragment_shader));
+        return Err(String::from("Failed to create program"));
+    };
+
+    gl.attach_shader(&program, &vertex_shader);
+    gl.attach_shader(&program, &fragment_shader);
+    gl.link_program(&program);
+
+    let status = gl.get_program_parameter(&program, WebGlRenderingContext::LINK_STATUS).as_bool().unwrap_or(false);
+
+    if status {
+        gl.detach_shader(&program, &vertex_shader);
+        gl.detach_shader(&program, &fragment_shader);
+        gl.delete_shader(Some(&vertex_shader));
+        gl.delete_shader(Some(&fragment_shader));
+        Ok(program)
+    } else {
+        let error = gl.get_program_info_log(&program).unwrap_or_else(|| String::from("Unknown link error"));
+        gl.detach_shader(&program, &vertex_shader);
+        gl.detach_shader(&program, &fragment_shader);
+        gl.delete_program(Some(&program));
+        gl.delete_shader(Some(&vertex_shader));
+        gl.delete_shader(Some(&fragment_shader));
+        Err(error)
+    }
+}
diff --git a/frontend/src/app/components/source_editor/input_form.rs b/frontend/src/app/components/source_editor/input_form.rs
index 60c008872..cb328100b 100644
--- a/frontend/src/app/components/source_editor/input_form.rs
+++ b/frontend/src/app/components/source_editor/input_form.rs
@@ -419,10 +419,13 @@ pub fn ConfigInputView(props: &ConfigInputViewProps) -> Html {
         })
     };
 
+    let library_input = input_form_state.form.input_type.is_library();
+    let xtream_input = input_form_state.form.input_type.is_xtream();
+
     let render_options = || {
         html! {
             <Card class="tp__config-view__card">
-            { html_if!(input_form_state.form.input_type.is_xtream(), {
+            { html_if!(xtream_input, {
                 <>
                 <TitledCard title={translate.t(LABEL_SKIP)}>
                   <div class="tp__config-view__cols-3">
@@ -531,15 +534,17 @@ pub fn ConfigInputView(props: &ConfigInputViewProps) -> Html {
                { edit_field_text!(input_form_state, translate.t(LABEL_NAME),  name, ConfigInputFormAction::Name) }
                { edit_field_bool!(input_form_state, translate.t(LABEL_ENABLED), enabled, ConfigInputFormAction::Enabled) }
                </div>
-               { edit_field_text!(input_form_state, translate.t(LABEL_URL),  url, ConfigInputFormAction::Url) }
-               <div class="tp__config-view__cols-2">
-               { edit_field_text_option!(input_form_state, translate.t(LABEL_USERNAME), username, ConfigInputFormAction::Username) }
-               { edit_field_text_option!(input_form_state, translate.t(LABEL_PASSWORD), password, ConfigInputFormAction::Password, true) }
-               { edit_field_number_u16!(input_form_state, translate.t(LABEL_MAX_CONNECTIONS), max_connections, ConfigInputFormAction::MaxConnections) }
-               { edit_field_number_i16!(input_form_state, translate.t(LABEL_PRIORITY), priority, ConfigInputFormAction::Priority) }
-               { edit_field_date!(input_form_state, translate.t(LABEL_EXP_DATE), exp_date, ConfigInputFormAction::ExpDate) }
-               { edit_field_text_option!(input_form_state, translate.t(LABEL_CACHE_DURATION), cache_duration, ConfigInputFormAction::CacheDuration) }
-               { config_field_child!(translate.t(LABEL_FETCH_METHOD), {
+               { html_if!(!library_input, {
+                <>
+                 { edit_field_text!(input_form_state, translate.t(LABEL_URL),  url, ConfigInputFormAction::Url) }
+                 <div class="tp__config-view__cols-2">
+                 { edit_field_text_option!(input_form_state, translate.t(LABEL_USERNAME), username, ConfigInputFormAction::Username) }
+                 { edit_field_text_option!(input_form_state, translate.t(LABEL_PASSWORD), password, ConfigInputFormAction::Password, true) }
+                 { edit_field_number_u16!(input_form_state, translate.t(LABEL_MAX_CONNECTIONS), max_connections, ConfigInputFormAction::MaxConnections) }
+                 { edit_field_number_i16!(input_form_state, translate.t(LABEL_PRIORITY), priority, ConfigInputFormAction::Priority) }
+                 { edit_field_date!(input_form_state, translate.t(LABEL_EXP_DATE), exp_date, ConfigInputFormAction::ExpDate) }
+                 { edit_field_text_option!(input_form_state, translate.t(LABEL_CACHE_DURATION), cache_duration, ConfigInputFormAction::CacheDuration) }
+                 { config_field_child!(translate.t(LABEL_FETCH_METHOD), {
                    html! {
                        <RadioButtonGroup
                         multi_select={false} none_allowed={false}
@@ -551,9 +556,11 @@ pub fn ConfigInputView(props: &ConfigInputViewProps) -> Html {
                         options={fetch_methods.clone()}
                         selected={input_method_selection}
                     />
-               }})}
-               </div>
-               { edit_field_text_option!(input_form_state, translate.t(LABEL_PERSIST), persist, ConfigInputFormAction::Persist) }
+                 }})}
+                 </div>
+                 { edit_field_text_option!(input_form_state, translate.t(LABEL_PERSIST), persist, ConfigInputFormAction::Persist) }
+                </>
+               })}
             </Card>
         }
     };
@@ -761,8 +768,6 @@ pub fn ConfigInputView(props: &ConfigInputViewProps) -> Html {
         })
     };
 
-    let library_input = input_form_state.form.input_type.is_library();
-
     let render_edit_mode = || {
         html! {
             <div class="tp__source-editor-form__body">
@@ -800,11 +805,11 @@ pub fn ConfigInputView(props: &ConfigInputViewProps) -> Html {
                     {render_alias()}
                     </Panel>
                 })}
-                <Panel value={InputFormPage::Options.to_string()} active={view_visible.to_string()}>
-                {render_options()}
-                </Panel>
                 { html_if!(!library_input, {
-                    <>
+                 <>
+                  <Panel value={InputFormPage::Options.to_string()} active={view_visible.to_string()}>
+                   {render_options()}
+                  </Panel>
                   <Panel value={InputFormPage::Staged.to_string()} active={view_visible.to_string()}>
                    {render_staged()}
                    </Panel>