From 99c98912278e47cd738c105a81c0968169917cb7 Mon Sep 17 00:00:00 2001
From: Mario Ruci <marioruci15@gmail.com>
Date: Wed, 17 Jun 2026 13:01:37 +0200
Subject: [PATCH 1/7] feat(fe): replace /authorize curtain background with
 breathe-sparkle dot grid

---
 .../backgrounds/BreatheSparkleCanvas.svelte   | 125 ++++++++++++++++++
 .../views/RedirectAnimationView.svelte        |  41 +-----
 2 files changed, 127 insertions(+), 39 deletions(-)
 create mode 100644 src/frontend/src/lib/components/backgrounds/BreatheSparkleCanvas.svelte

diff --git a/src/frontend/src/lib/components/backgrounds/BreatheSparkleCanvas.svelte b/src/frontend/src/lib/components/backgrounds/BreatheSparkleCanvas.svelte
new file mode 100644
index 0000000000..81a034193d
--- /dev/null
+++ b/src/frontend/src/lib/components/backgrounds/BreatheSparkleCanvas.svelte
@@ -0,0 +1,125 @@
+<script lang="ts">
+  import { PerlinNoise3D } from "$lib/utils/UI/backgrounds/perlinNoise3d";
+  import { onMount } from "svelte";
+
+  let canvasEl: HTMLCanvasElement | undefined = $state();
+
+  const GAP = 28;
+  const BASE_ALPHA = 0.05;
+  const BREATHE_AMP = 0.16;
+  const BREATHE_RADIUS_AMP = 0.25;
+  const BREATHE_FREQ = 0.7;
+  const BREATHE_SPATIAL = 0.004;
+  const SPARKLE_TIME_SCALE = 0.34;
+  const SPARKLE_THRESHOLD = 0.64;
+  const SPARKLE_RING_ALPHA = 0.34;
+  const SPARKLE_RING_BASE = 1.6;
+  const SPARKLE_RING_GAIN = 1.0;
+  const HALO_ALPHA_THRESHOLD = 0.25;
+  const HALO_RADIUS_OFFSET = 2.6;
+
+  type Dot = { x: number; y: number };
+
+  onMount(() => {
+    const canvas = canvasEl;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const dpr = Math.min(window.devicePixelRatio ?? 1, 2);
+    const sparkleNoise = new PerlinNoise3D();
+    sparkleNoise.noiseSeed(2);
+
+    let dots: Dot[] = [];
+    let lastW = -1;
+    let lastH = -1;
+
+    const build = () => {
+      const w = canvas.clientWidth;
+      const h = canvas.clientHeight;
+      canvas.width = Math.max(1, Math.floor(w * dpr));
+      canvas.height = Math.max(1, Math.floor(h * dpr));
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      const cols = Math.ceil(w / GAP) + 1;
+      const rows = Math.ceil(h / GAP) + 1;
+      const offX = (w - (cols - 1) * GAP) / 2;
+      const offY = (h - (rows - 1) * GAP) / 2;
+      dots = [];
+      for (let r = 0; r < rows; r++) {
+        for (let c = 0; c < cols; c++) {
+          dots.push({ x: offX + c * GAP, y: offY + r * GAP });
+        }
+      }
+      lastW = w;
+      lastH = h;
+    };
+
+    let raf = 0;
+    let start = 0;
+
+    const tick = (now: number) => {
+      if (start === 0) start = now;
+      const t = (now - start) / 1000;
+      const w = canvas.clientWidth;
+      const h = canvas.clientHeight;
+      if (w === 0 || h === 0) {
+        raf = requestAnimationFrame(tick);
+        return;
+      }
+      if (w !== lastW || h !== lastH) build();
+      ctx.clearRect(0, 0, w, h);
+
+      const zt = t * SPARKLE_TIME_SCALE;
+
+      for (const d of dots) {
+        const pulse =
+          0.5 +
+          0.5 * Math.sin(t * BREATHE_FREQ + (d.x + d.y) * BREATHE_SPATIAL);
+        const a = BASE_ALPHA + pulse * BREATHE_AMP;
+        const radius = 1 + pulse * BREATHE_RADIUS_AMP;
+
+        const sN = sparkleNoise.get(d.x, d.y, zt);
+        const s = Math.max(0, sN - SPARKLE_THRESHOLD) / (1 - SPARKLE_THRESHOLD);
+
+        ctx.beginPath();
+        ctx.fillStyle = `rgba(255,255,255,${a})`;
+        ctx.arc(d.x, d.y, radius, 0, Math.PI * 2);
+        ctx.fill();
+
+        if (a > HALO_ALPHA_THRESHOLD) {
+          ctx.beginPath();
+          ctx.fillStyle = `rgba(255,255,255,${(a - HALO_ALPHA_THRESHOLD) * 0.22})`;
+          ctx.arc(d.x, d.y, radius + HALO_RADIUS_OFFSET, 0, Math.PI * 2);
+          ctx.fill();
+        }
+
+        if (s > 0) {
+          const ringAlpha = Math.min(1, s) * SPARKLE_RING_ALPHA;
+          const ringR = SPARKLE_RING_BASE + s * SPARKLE_RING_GAIN;
+          ctx.beginPath();
+          ctx.lineWidth = 1;
+          ctx.strokeStyle = `rgba(255,255,255,${ringAlpha})`;
+          ctx.arc(d.x, d.y, ringR, 0, Math.PI * 2);
+          ctx.stroke();
+        }
+      }
+
+      raf = requestAnimationFrame(tick);
+    };
+
+    build();
+    raf = requestAnimationFrame(tick);
+
+    const onResize = () => build();
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("resize", onResize);
+    };
+  });
+</script>
+
+<div class="absolute inset-0 -z-50 w-full select-none" aria-hidden="true">
+  <canvas bind:this={canvasEl} class="block h-full w-full"></canvas>
+</div>
diff --git a/src/frontend/src/routes/(new-styling)/authorize/views/RedirectAnimationView.svelte b/src/frontend/src/routes/(new-styling)/authorize/views/RedirectAnimationView.svelte
index 9012e0ae88..3cb535aab2 100644
--- a/src/frontend/src/routes/(new-styling)/authorize/views/RedirectAnimationView.svelte
+++ b/src/frontend/src/routes/(new-styling)/authorize/views/RedirectAnimationView.svelte
@@ -9,20 +9,7 @@
   import FeaturedIcon from "$lib/components/ui/FeaturedIcon.svelte";
   import { CircleAlertIcon, RotateCcwIcon } from "@lucide/svelte";
   import { waitFor } from "$lib/utils/utils";
-  import FlairCanvas from "$lib/components/backgrounds/FlairCanvas.svelte";
-  import type { FlairAnimationOptions } from "$lib/components/backgrounds/FlairCanvas";
-  import { DROP_WAVE_ANIMATION } from "$lib/components/backgrounds/constants";
-
-  let triggerAnimation =
-    $state<(opts: FlairAnimationOptions) => Promise<void>>();
-  let clearAnimation = $state<() => void>();
-
-  $effect(() => {
-    void triggerAnimation?.(DROP_WAVE_ANIMATION);
-    return () => {
-      clearAnimation?.();
-    };
-  });
+  import BreatheSparkleCanvas from "$lib/components/backgrounds/BreatheSparkleCanvas.svelte";
 
   const dapps = getDapps();
   const dapp = $derived(
@@ -132,31 +119,7 @@
 </div>
 
 <div class="max-md:hidden">
-  <FlairCanvas
-    spacing="medium"
-    aspect="ultrawide"
-    dotSize="small"
-    vignette="none"
-    visibility="maskwave"
-    maskWaveRampIn={0.001}
-    maskWaveRampOut={0.5}
-    maskWaveThickness="large"
-    maskWaveMinValue={0}
-    maskWaveSpeedMultiplier={2}
-    maskWavePauseValue={0.25}
-    maskWaveOneWay={true}
-    enableRandomPointSize
-    enableRandomOpacity={false}
-    pointSizeNoiseScale="medium"
-    pointSizeNoiseMultiplier="medium"
-    springOrTween={{
-      type: "spring",
-      stiffness: "medium",
-      dampening: "medium",
-    }}
-    bind:triggerAnimation
-    bind:clearAnimation
-  />
+  <BreatheSparkleCanvas />
 </div>
 
 <style>

From c1f33ac212561cb74113fccab01a788ecd007ef1 Mon Sep 17 00:00:00 2001
From: Mario Ruci <marioruci15@gmail.com>
Date: Wed, 17 Jun 2026 13:25:02 +0200
Subject: [PATCH 2/7] fix(fe): randomize breathe phase via Perlin so dots
 breathe asynchronously

---
 .../backgrounds/BreatheSparkleCanvas.svelte     | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/lib/components/backgrounds/BreatheSparkleCanvas.svelte b/src/frontend/src/lib/components/backgrounds/BreatheSparkleCanvas.svelte
index 81a034193d..05bce4d2c6 100644
--- a/src/frontend/src/lib/components/backgrounds/BreatheSparkleCanvas.svelte
+++ b/src/frontend/src/lib/components/backgrounds/BreatheSparkleCanvas.svelte
@@ -9,7 +9,9 @@
   const BREATHE_AMP = 0.16;
   const BREATHE_RADIUS_AMP = 0.25;
   const BREATHE_FREQ = 0.7;
-  const BREATHE_SPATIAL = 0.004;
+  const BREATHE_PHASE_NOISE_SCALE = 0.003;
+  const BREATHE_PHASE_TIME_SCALE = 0.08;
+  const BREATHE_PHASE_RANGE = Math.PI * 2;
   const SPARKLE_TIME_SCALE = 0.34;
   const SPARKLE_THRESHOLD = 0.64;
   const SPARKLE_RING_ALPHA = 0.34;
@@ -29,6 +31,8 @@
     const dpr = Math.min(window.devicePixelRatio ?? 1, 2);
     const sparkleNoise = new PerlinNoise3D();
     sparkleNoise.noiseSeed(2);
+    const breatheNoise = new PerlinNoise3D();
+    breatheNoise.noiseSeed(11);
 
     let dots: Dot[] = [];
     let lastW = -1;
@@ -70,11 +74,16 @@
       ctx.clearRect(0, 0, w, h);
 
       const zt = t * SPARKLE_TIME_SCALE;
+      const breatheZ = t * BREATHE_PHASE_TIME_SCALE;
 
       for (const d of dots) {
-        const pulse =
-          0.5 +
-          0.5 * Math.sin(t * BREATHE_FREQ + (d.x + d.y) * BREATHE_SPATIAL);
+        const phase =
+          breatheNoise.get(
+            d.x * BREATHE_PHASE_NOISE_SCALE,
+            d.y * BREATHE_PHASE_NOISE_SCALE,
+            breatheZ,
+          ) * BREATHE_PHASE_RANGE;
+        const pulse = 0.5 + 0.5 * Math.sin(t * BREATHE_FREQ + phase);
         const a = BASE_ALPHA + pulse * BREATHE_AMP;
         const radius = 1 + pulse * BREATHE_RADIUS_AMP;
 

From f55d77866f169ad9e70fd47e5a13c2b8e92a38ef Mon Sep 17 00:00:00 2001
From: Mario Ruci <marioruci15@gmail.com>
Date: Wed, 17 Jun 2026 14:00:23 +0200
Subject: [PATCH 3/7] feat(fe): fade dot grid behind centered content on
 /authorize

---
 .../backgrounds/BreatheSparkleCanvas.svelte    | 18 +++++++++++++++++-
 .../views/RedirectAnimationView.svelte         |  4 +++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/lib/components/backgrounds/BreatheSparkleCanvas.svelte b/src/frontend/src/lib/components/backgrounds/BreatheSparkleCanvas.svelte
index 05bce4d2c6..73ab523f98 100644
--- a/src/frontend/src/lib/components/backgrounds/BreatheSparkleCanvas.svelte
+++ b/src/frontend/src/lib/components/backgrounds/BreatheSparkleCanvas.svelte
@@ -2,6 +2,18 @@
   import { PerlinNoise3D } from "$lib/utils/UI/backgrounds/perlinNoise3d";
   import { onMount } from "svelte";
 
+  interface Props {
+    class?: string;
+    centerFade?: { width: string; height: string; hold: string };
+  }
+  const { class: className = "", centerFade }: Props = $props();
+
+  const maskStyle = $derived(
+    centerFade !== undefined
+      ? `mask-image: radial-gradient(ellipse ${centerFade.width} ${centerFade.height} at center, transparent 0%, transparent ${centerFade.hold}, black 100%); -webkit-mask-image: radial-gradient(ellipse ${centerFade.width} ${centerFade.height} at center, transparent 0%, transparent ${centerFade.hold}, black 100%);`
+      : "",
+  );
+
   let canvasEl: HTMLCanvasElement | undefined = $state();
 
   const GAP = 28;
@@ -129,6 +141,10 @@
   });
 </script>
 
-<div class="absolute inset-0 -z-50 w-full select-none" aria-hidden="true">
+<div
+  class={["absolute inset-0 -z-50 w-full select-none", className]}
+  style={maskStyle}
+  aria-hidden="true"
+>
   <canvas bind:this={canvasEl} class="block h-full w-full"></canvas>
 </div>
diff --git a/src/frontend/src/routes/(new-styling)/authorize/views/RedirectAnimationView.svelte b/src/frontend/src/routes/(new-styling)/authorize/views/RedirectAnimationView.svelte
index 3cb535aab2..8d234b96f6 100644
--- a/src/frontend/src/routes/(new-styling)/authorize/views/RedirectAnimationView.svelte
+++ b/src/frontend/src/routes/(new-styling)/authorize/views/RedirectAnimationView.svelte
@@ -119,7 +119,9 @@
 </div>
 
 <div class="max-md:hidden">
-  <BreatheSparkleCanvas />
+  <BreatheSparkleCanvas
+    centerFade={{ width: "40rem", height: "30rem", hold: "45%" }}
+  />
 </div>
 
 <style>

From 5442a72e3bef3ae3413fb40171d31f1a9c0904f5 Mon Sep 17 00:00:00 2001
From: Mario Ruci <marioruci15@gmail.com>
Date: Wed, 17 Jun 2026 14:23:34 +0200
Subject: [PATCH 4/7] feat(fe): widen breathe-sparkle fade so the edge is
 softer

---
 .../(new-styling)/authorize/views/RedirectAnimationView.svelte  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/routes/(new-styling)/authorize/views/RedirectAnimationView.svelte b/src/frontend/src/routes/(new-styling)/authorize/views/RedirectAnimationView.svelte
index 8d234b96f6..0122755946 100644
--- a/src/frontend/src/routes/(new-styling)/authorize/views/RedirectAnimationView.svelte
+++ b/src/frontend/src/routes/(new-styling)/authorize/views/RedirectAnimationView.svelte
@@ -120,7 +120,7 @@
 
 <div class="max-md:hidden">
   <BreatheSparkleCanvas
-    centerFade={{ width: "40rem", height: "30rem", hold: "45%" }}
+    centerFade={{ width: "80rem", height: "60rem", hold: "22%" }}
   />
 </div>
 

From 3f153af45297a3e2ae6d54d50574f10b574bdd6f Mon Sep 17 00:00:00 2001
From: Mario Ruci <marioruci15@gmail.com>
Date: Wed, 17 Jun 2026 19:03:29 +0200
Subject: [PATCH 5/7] fix(fe): scale breathe-sparkle fade to viewport so dots
 stay visible

---
 .../backgrounds/BreatheSparkleCanvas.svelte           | 11 +++++++----
 .../authorize/views/RedirectAnimationView.svelte      |  4 +---
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/lib/components/backgrounds/BreatheSparkleCanvas.svelte b/src/frontend/src/lib/components/backgrounds/BreatheSparkleCanvas.svelte
index 73ab523f98..d8a11619af 100644
--- a/src/frontend/src/lib/components/backgrounds/BreatheSparkleCanvas.svelte
+++ b/src/frontend/src/lib/components/backgrounds/BreatheSparkleCanvas.svelte
@@ -4,13 +4,16 @@
 
   interface Props {
     class?: string;
-    centerFade?: { width: string; height: string; hold: string };
+    fadeCenterHold?: string;
   }
-  const { class: className = "", centerFade }: Props = $props();
+  const { class: className = "", fadeCenterHold }: Props = $props();
 
   const maskStyle = $derived(
-    centerFade !== undefined
-      ? `mask-image: radial-gradient(ellipse ${centerFade.width} ${centerFade.height} at center, transparent 0%, transparent ${centerFade.hold}, black 100%); -webkit-mask-image: radial-gradient(ellipse ${centerFade.width} ${centerFade.height} at center, transparent 0%, transparent ${centerFade.hold}, black 100%);`
+    fadeCenterHold !== undefined
+      ? (() => {
+          const grad = `radial-gradient(ellipse closest-side at center, transparent 0%, transparent ${fadeCenterHold}, black 100%)`;
+          return `mask-image: ${grad}; -webkit-mask-image: ${grad};`;
+        })()
       : "",
   );
 
diff --git a/src/frontend/src/routes/(new-styling)/authorize/views/RedirectAnimationView.svelte b/src/frontend/src/routes/(new-styling)/authorize/views/RedirectAnimationView.svelte
index 0122755946..6031573092 100644
--- a/src/frontend/src/routes/(new-styling)/authorize/views/RedirectAnimationView.svelte
+++ b/src/frontend/src/routes/(new-styling)/authorize/views/RedirectAnimationView.svelte
@@ -119,9 +119,7 @@
 </div>
 
 <div class="max-md:hidden">
-  <BreatheSparkleCanvas
-    centerFade={{ width: "80rem", height: "60rem", hold: "22%" }}
-  />
+  <BreatheSparkleCanvas fadeCenterHold="30%" />
 </div>
 
 <style>

From f7cb43df207f7b4c2d560a2a63505f831fe0c23c Mon Sep 17 00:00:00 2001
From: Mario Ruci <marioruci15@gmail.com>
Date: Wed, 17 Jun 2026 19:09:41 +0200
Subject: [PATCH 6/7] feat(fe): show breathe-sparkle background on mobile too

---
 .../authorize/views/RedirectAnimationView.svelte              | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/frontend/src/routes/(new-styling)/authorize/views/RedirectAnimationView.svelte b/src/frontend/src/routes/(new-styling)/authorize/views/RedirectAnimationView.svelte
index 6031573092..ce1d846eb4 100644
--- a/src/frontend/src/routes/(new-styling)/authorize/views/RedirectAnimationView.svelte
+++ b/src/frontend/src/routes/(new-styling)/authorize/views/RedirectAnimationView.svelte
@@ -118,9 +118,7 @@
   {/await}
 </div>
 
-<div class="max-md:hidden">
-  <BreatheSparkleCanvas fadeCenterHold="30%" />
-</div>
+<BreatheSparkleCanvas fadeCenterHold="30%" />
 
 <style>
   @keyframes breathe {

From 5604288531255911d7cf8a4d1958f4727c439970 Mon Sep 17 00:00:00 2001
From: Mario Ruci <marioruci15@gmail.com>
Date: Thu, 18 Jun 2026 14:16:22 +0200
Subject: [PATCH 7/7] fix(fe): pause rAF on hidden canvas, refresh DPR per
 build, document intent

---
 .../backgrounds/BreatheSparkleCanvas.svelte   | 50 ++++++++++++++-----
 1 file changed, 38 insertions(+), 12 deletions(-)

diff --git a/src/frontend/src/lib/components/backgrounds/BreatheSparkleCanvas.svelte b/src/frontend/src/lib/components/backgrounds/BreatheSparkleCanvas.svelte
index d8a11619af..232789a04a 100644
--- a/src/frontend/src/lib/components/backgrounds/BreatheSparkleCanvas.svelte
+++ b/src/frontend/src/lib/components/backgrounds/BreatheSparkleCanvas.svelte
@@ -1,3 +1,9 @@
+<!--
+  Calm dot-grid background used as the /authorize redirect "curtain": every
+  dot pulses on a shared sin(t) heartbeat with a Perlin-scattered phase so the
+  field breathes without a directional band, and a second Perlin field drops
+  occasional id.ai-style hollow-ring sparkles over the top.
+-->
 <script lang="ts">
   import { PerlinNoise3D } from "$lib/utils/UI/backgrounds/perlinNoise3d";
   import { onMount } from "svelte";
@@ -43,7 +49,6 @@
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
 
-    const dpr = Math.min(window.devicePixelRatio ?? 1, 2);
     const sparkleNoise = new PerlinNoise3D();
     sparkleNoise.noiseSeed(2);
     const breatheNoise = new PerlinNoise3D();
@@ -56,6 +61,9 @@
     const build = () => {
       const w = canvas.clientWidth;
       const h = canvas.clientHeight;
+      // Re-read DPR so zoom changes / monitor moves don't leave the canvas
+      // stuck at a stale backing resolution
+      const dpr = Math.min(window.devicePixelRatio ?? 1, 2);
       canvas.width = Math.max(1, Math.floor(w * dpr));
       canvas.height = Math.max(1, Math.floor(h * dpr));
       ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
@@ -76,15 +84,26 @@
     let raf = 0;
     let start = 0;
 
+    // Pause rAF when the canvas has zero size (hidden ancestor or pre-layout)
+    // so we don't burn a 60fps loop drawing nothing. ResizeObserver fires when
+    // the canvas gets dimensions again, and tick() restarts.
+    const startLoop = () => {
+      if (raf !== 0) return;
+      raf = requestAnimationFrame(tick);
+    };
+    const stopLoop = () => {
+      if (raf === 0) return;
+      cancelAnimationFrame(raf);
+      raf = 0;
+    };
+
     const tick = (now: number) => {
+      raf = 0;
       if (start === 0) start = now;
       const t = (now - start) / 1000;
       const w = canvas.clientWidth;
       const h = canvas.clientHeight;
-      if (w === 0 || h === 0) {
-        raf = requestAnimationFrame(tick);
-        return;
-      }
+      if (w === 0 || h === 0) return;
       if (w !== lastW || h !== lastH) build();
       ctx.clearRect(0, 0, w, h);
 
@@ -128,18 +147,25 @@
         }
       }
 
-      raf = requestAnimationFrame(tick);
+      startLoop();
     };
 
     build();
-    raf = requestAnimationFrame(tick);
-
-    const onResize = () => build();
-    window.addEventListener("resize", onResize);
+    startLoop();
+
+    const resizeObserver = new ResizeObserver(() => {
+      if (canvas.clientWidth > 0 && canvas.clientHeight > 0) {
+        build();
+        startLoop();
+      } else {
+        stopLoop();
+      }
+    });
+    resizeObserver.observe(canvas);
 
     return () => {
-      cancelAnimationFrame(raf);
-      window.removeEventListener("resize", onResize);
+      stopLoop();
+      resizeObserver.disconnect();
     };
   });
 </script>