From a02cf42295af49965c838f1c2cef8ac602b82ab5 Mon Sep 17 00:00:00 2001
From: Daniel Dias Pereira <86617987+DanielDPereira@users.noreply.github.com>
Date: Thu, 22 Oct 2026 22:00:41 -0300
Subject: [PATCH 1/9] feat(frontend): add animated graph login background

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 frontend/src/index.css               | 97 ++++++++++++++++++++++++++++
 frontend/src/views/auth/AuthView.tsx | 59 +++++++++++++++++
 2 files changed, 156 insertions(+)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 42c03f1..41234b7 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -3,18 +3,93 @@
 @import "./styles/layout.css";
 
 .auth-shell {
+  position: relative;
+  isolation: isolate;
   min-height: 100vh;
   display: grid;
   place-items: center;
   padding: 24px;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--brand-primary) 8%, transparent), transparent 38%),
+    var(--surface-base);
+}
+
+.auth-graph {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  pointer-events: none;
+  opacity: .9;
+}
+
+.auth-graph::before,
+.auth-graph::after {
+  position: absolute;
+  content: "";
+  width: 34vw;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: var(--accent-glow);
+  filter: blur(80px);
+  opacity: .22;
+}
+
+.auth-graph::before {
+  top: -18%;
+  left: -12%;
+}
+
+.auth-graph::after {
+  right: -12%;
+  bottom: -22%;
+}
+
+.auth-graph svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.auth-graph__edges line {
+  stroke: var(--brand-primary);
+  stroke-width: 1;
+  stroke-dasharray: 6 14;
+  opacity: .26;
+  animation: auth-graph-edge 7s ease-in-out infinite alternate;
+  animation-delay: var(--edge-delay);
+}
+
+.auth-graph__nodes circle {
+  fill: var(--accent-secondary);
+  opacity: .58;
+  filter: drop-shadow(0 0 5px var(--brand-primary));
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: auth-graph-node 4.5s ease-in-out infinite;
+  animation-delay: var(--node-delay);
+}
+
+@keyframes auth-graph-edge {
+  from { stroke-dashoffset: 0; opacity: .16; }
+  to { stroke-dashoffset: -42; opacity: .52; }
+}
+
+@keyframes auth-graph-node {
+  0%, 100% { transform: scale(.8); opacity: .36; }
+  50% { transform: scale(1.35); opacity: .9; }
 }
 
 .auth-card {
+  position: relative;
+  z-index: 1;
   width: 100%;
   max-width: 440px;
   padding: 32px;
   display: grid;
   gap: 18px;
+  box-shadow: 0 24px 80px rgba(0, 0, 0, .34), 0 0 0 1px color-mix(in srgb, var(--brand-primary) 12%, transparent);
+  backdrop-filter: blur(18px);
 }
 
 .auth-card h1 {
@@ -45,6 +120,28 @@
   color: var(--status-danger);
 }
 
+@media (max-width: 600px) {
+  .auth-shell {
+    padding: 16px;
+  }
+
+  .auth-card {
+    padding: 24px;
+  }
+
+  .auth-graph {
+    inset: -8% -28%;
+    opacity: .7;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .auth-graph__edges line,
+  .auth-graph__nodes circle {
+    animation: none;
+  }
+}
+
 button:focus-visible,
 input:focus-visible,
 select:focus-visible,
diff --git a/frontend/src/views/auth/AuthView.tsx b/frontend/src/views/auth/AuthView.tsx
index 39b2c2c..96c34bd 100644
--- a/frontend/src/views/auth/AuthView.tsx
+++ b/frontend/src/views/auth/AuthView.tsx
@@ -4,6 +4,64 @@ import { ApiError } from "../../api/api_auth";
 import { useAuth } from "../../viewmodels/useAuthViewModel";
 import { loginDestination, navigate, safeDestination } from "../../models/navigation";
 
+const graphNodes = [
+  [82, 118], [178, 68], [286, 138], [402, 74], [526, 154], [654, 82],
+  [780, 132], [918, 64], [1080, 142], [1128, 286], [978, 332], [842, 268],
+  [704, 370], [566, 292], [418, 382], [274, 300], [126, 382], [42, 524],
+  [190, 594], [344, 536], [488, 650], [644, 548], [792, 660], [946, 560],
+  [1102, 672], [1034, 458], [884, 478], [742, 466], [604, 432], [364, 462],
+] as const;
+
+const graphEdges = [
+  [0, 1], [0, 2], [1, 2], [1, 3], [2, 3], [2, 5], [3, 4], [3, 6],
+  [4, 5], [4, 7], [5, 6], [5, 8], [6, 7], [6, 10], [7, 8], [8, 9],
+  [8, 10], [9, 10], [10, 11], [10, 12], [11, 12], [11, 13], [12, 13],
+  [12, 14], [13, 14], [13, 15], [14, 15], [14, 19], [15, 16], [15, 17],
+  [16, 17], [16, 18], [17, 18], [18, 19], [18, 20], [19, 20], [19, 28],
+  [20, 21], [20, 28], [21, 22], [21, 27], [22, 23], [22, 24], [23, 24],
+  [23, 25], [24, 25], [24, 26], [25, 26], [26, 27], [26, 29], [27, 28],
+  [28, 29], [14, 28], [10, 27],
+] as const;
+
+function LoginGraphBackground() {
+  return (
+    <div className="auth-graph" aria-hidden="true">
+      <svg viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice">
+        <defs>
+          <radialGradient id="auth-graph-glow" cx="50%" cy="50%" r="60%">
+            <stop offset="0%" stopColor="var(--brand-primary)" stopOpacity=".12" />
+            <stop offset="100%" stopColor="var(--brand-primary)" stopOpacity="0" />
+          </radialGradient>
+        </defs>
+        <rect width="1200" height="800" fill="url(#auth-graph-glow)" />
+        <g className="auth-graph__edges">
+          {graphEdges.map(([from, to], index) => (
+            <line
+              key={`${from}-${to}`}
+              x1={graphNodes[from][0]}
+              y1={graphNodes[from][1]}
+              x2={graphNodes[to][0]}
+              y2={graphNodes[to][1]}
+              style={{ "--edge-delay": `${(index % 9) * 0.32}s` } as React.CSSProperties}
+            />
+          ))}
+        </g>
+        <g className="auth-graph__nodes">
+          {graphNodes.map(([cx, cy], index) => (
+            <circle
+              key={`${cx}-${cy}`}
+              cx={cx}
+              cy={cy}
+              r={index % 5 === 0 ? 3.5 : 2.2}
+              style={{ "--node-delay": `${(index % 8) * 0.45}s` } as React.CSSProperties}
+            />
+          ))}
+        </g>
+      </svg>
+    </div>
+  );
+}
+
 export function AuthGate({ children }: { children: ReactNode }) {
   const { session, notice, restore, logout } = useAuth();
   const [location, setLocation] = useState(() => window.location.href);
@@ -52,6 +110,7 @@ export function AuthScreen({ initialMode }: { initialMode: "login" | "register"
 
   return (
     <main className="auth-shell">
+      <LoginGraphBackground />
       <section className="ds-card ds-card--glass auth-card">
         <div style={{ display: "flex", gap: "6px" }}>
           {mode === "register" && (

From eec1a81f479624e444c0869a7e29db613dca2975 Mon Sep 17 00:00:00 2001
From: Daniel Dias Pereira <86617987+DanielDPereira@users.noreply.github.com>
Date: Thu, 22 Oct 2026 22:18:34 -0300
Subject: [PATCH 2/9] feat(frontend): add 3d mouse interaction to login graph

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 frontend/src/index.css               | 31 ++++++++++++++++++++
 frontend/src/views/auth/AuthView.tsx | 43 +++++++++++++++++++++++++---
 2 files changed, 70 insertions(+), 4 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 41234b7..f385a8b 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -3,6 +3,10 @@
 @import "./styles/layout.css";
 
 .auth-shell {
+  --graph-mouse-x: 0px;
+  --graph-mouse-y: 0px;
+  --graph-tilt-x: 0deg;
+  --graph-tilt-y: 0deg;
   position: relative;
   isolation: isolate;
   min-height: 100vh;
@@ -49,6 +53,19 @@
   display: block;
   width: 100%;
   height: 100%;
+  transform: translate3d(var(--graph-mouse-x), var(--graph-mouse-y), 0)
+    perspective(900px) rotateX(var(--graph-tilt-x)) rotateY(var(--graph-tilt-y));
+  transform-origin: center;
+  transition: transform 1.2s cubic-bezier(.2, .75, .2, 1);
+  will-change: transform;
+}
+
+.auth-graph__scene {
+  width: 100%;
+  height: 100%;
+  animation: auth-graph-orbit 26s ease-in-out infinite alternate;
+  transform-origin: center;
+  will-change: transform;
 }
 
 .auth-graph__edges line {
@@ -80,6 +97,12 @@
   50% { transform: scale(1.35); opacity: .9; }
 }
 
+@keyframes auth-graph-orbit {
+  0% { transform: translate3d(-1.5%, -1%, 0) rotateZ(-1.6deg) scale(1.04); }
+  50% { transform: translate3d(1%, 1.5%, 0) rotateZ(1.2deg) scale(1.08); }
+  100% { transform: translate3d(-.5%, 2%, 0) rotateZ(2.3deg) scale(1.05); }
+}
+
 .auth-card {
   position: relative;
   z-index: 1;
@@ -136,6 +159,14 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .auth-graph__scene {
+    animation: none;
+  }
+
+  .auth-graph svg {
+    transition: none;
+  }
+
   .auth-graph__edges line,
   .auth-graph__nodes circle {
     animation: none;
diff --git a/frontend/src/views/auth/AuthView.tsx b/frontend/src/views/auth/AuthView.tsx
index 96c34bd..5aea66a 100644
--- a/frontend/src/views/auth/AuthView.tsx
+++ b/frontend/src/views/auth/AuthView.tsx
@@ -1,5 +1,5 @@
 import { Button } from "../common/ui";
-import { useEffect, useState, type ReactNode } from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
 import { ApiError } from "../../api/api_auth";
 import { useAuth } from "../../viewmodels/useAuthViewModel";
 import { loginDestination, navigate, safeDestination } from "../../models/navigation";
@@ -26,7 +26,8 @@ const graphEdges = [
 function LoginGraphBackground() {
   return (
     <div className="auth-graph" aria-hidden="true">
-      <svg viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice">
+      <div className="auth-graph__scene">
+        <svg viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice">
         <defs>
           <radialGradient id="auth-graph-glow" cx="50%" cy="50%" r="60%">
             <stop offset="0%" stopColor="var(--brand-primary)" stopOpacity=".12" />
@@ -57,7 +58,8 @@ function LoginGraphBackground() {
             />
           ))}
         </g>
-      </svg>
+        </svg>
+      </div>
     </div>
   );
 }
@@ -98,18 +100,51 @@ export function AuthGate({ children }: { children: ReactNode }) {
 
 export function AuthScreen({ initialMode }: { initialMode: "login" | "register" }) {
   const [mode, setMode] = useState<"login" | "register">(initialMode);
+  const authShellRef = useRef<HTMLElement>(null);
+  const animationFrame = useRef<number | null>(null);
 
   useEffect(() => {
     setMode(initialMode);
   }, [initialMode]);
 
+  useEffect(() => {
+    const updateGraphInteraction = (event: globalThis.MouseEvent) => {
+      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+      const x = event.clientX / window.innerWidth * 2 - 1;
+      const y = event.clientY / window.innerHeight * 2 - 1;
+      if (animationFrame.current !== null) window.cancelAnimationFrame(animationFrame.current);
+      animationFrame.current = window.requestAnimationFrame(() => {
+        authShellRef.current?.style.setProperty("--graph-mouse-x", `${x * 18}px`);
+        authShellRef.current?.style.setProperty("--graph-mouse-y", `${y * 14}px`);
+        authShellRef.current?.style.setProperty("--graph-tilt-x", `${y * -5}deg`);
+        authShellRef.current?.style.setProperty("--graph-tilt-y", `${x * 7}deg`);
+      });
+    };
+
+    const resetGraphInteraction = () => {
+      authShellRef.current?.style.setProperty("--graph-mouse-x", "0px");
+      authShellRef.current?.style.setProperty("--graph-mouse-y", "0px");
+      authShellRef.current?.style.setProperty("--graph-tilt-x", "0deg");
+      authShellRef.current?.style.setProperty("--graph-tilt-y", "0deg");
+    };
+
+    window.addEventListener("mousemove", updateGraphInteraction);
+    window.addEventListener("mouseleave", resetGraphInteraction);
+    return () => {
+      window.removeEventListener("mousemove", updateGraphInteraction);
+      window.removeEventListener("mouseleave", resetGraphInteraction);
+      if (animationFrame.current !== null) window.cancelAnimationFrame(animationFrame.current);
+    };
+  }, []);
+
   const switchMode = (nextMode: "login" | "register") => {
     setMode(nextMode);
     navigate(nextMode === "register" ? "/register" : "/login");
   };
 
   return (
-    <main className="auth-shell">
+    <main ref={authShellRef} className="auth-shell">
       <LoginGraphBackground />
       <section className="ds-card ds-card--glass auth-card">
         <div style={{ display: "flex", gap: "6px" }}>

From 181a9cfad1575a1141c997e8b7c0511e96288b57 Mon Sep 17 00:00:00 2001
From: Daniel Dias Pereira <86617987+DanielDPereira@users.noreply.github.com>
Date: Thu, 22 Oct 2026 22:22:55 -0300
Subject: [PATCH 3/9] feat(frontend): rotate login graph clusters in 3d

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 frontend/src/index.css               | 63 +++++++++++++++++++++-------
 frontend/src/views/auth/AuthView.tsx | 52 +++++++++++++----------
 2 files changed, 78 insertions(+), 37 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index f385a8b..e85601f 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -53,21 +53,49 @@
   display: block;
   width: 100%;
   height: 100%;
-  transform: translate3d(var(--graph-mouse-x), var(--graph-mouse-y), 0)
-    perspective(900px) rotateX(var(--graph-tilt-x)) rotateY(var(--graph-tilt-y));
-  transform-origin: center;
-  transition: transform 1.2s cubic-bezier(.2, .75, .2, 1);
-  will-change: transform;
 }
 
 .auth-graph__scene {
   width: 100%;
   height: 100%;
-  animation: auth-graph-orbit 26s ease-in-out infinite alternate;
+  perspective: 900px;
+  transform-style: preserve-3d;
+}
+
+.auth-graph__cluster {
+  transform-box: fill-box;
   transform-origin: center;
+  transform-style: preserve-3d;
   will-change: transform;
 }
 
+.auth-graph__cluster-content {
+  transform-box: fill-box;
+  transform-origin: center;
+  transform: translate3d(
+      var(--graph-mouse-x),
+      var(--graph-mouse-y),
+      0
+    )
+    perspective(700px)
+    rotateX(var(--graph-tilt-x))
+    rotateY(var(--graph-tilt-y));
+  transition: transform 1s cubic-bezier(.2, .75, .2, 1);
+  will-change: transform;
+}
+
+.auth-graph__cluster--1 {
+  animation: auth-graph-cluster-one 24s ease-in-out infinite alternate;
+}
+
+.auth-graph__cluster--2 {
+  animation: auth-graph-cluster-two 29s ease-in-out infinite alternate-reverse;
+}
+
+.auth-graph__cluster--3 {
+  animation: auth-graph-cluster-three 21s ease-in-out infinite alternate;
+}
+
 .auth-graph__edges line {
   stroke: var(--brand-primary);
   stroke-width: 1;
@@ -97,10 +125,19 @@
   50% { transform: scale(1.35); opacity: .9; }
 }
 
-@keyframes auth-graph-orbit {
-  0% { transform: translate3d(-1.5%, -1%, 0) rotateZ(-1.6deg) scale(1.04); }
-  50% { transform: translate3d(1%, 1.5%, 0) rotateZ(1.2deg) scale(1.08); }
-  100% { transform: translate3d(-.5%, 2%, 0) rotateZ(2.3deg) scale(1.05); }
+@keyframes auth-graph-cluster-one {
+  0% { transform: rotateX(-5deg) rotateY(-8deg) rotateZ(-2deg) translate3d(-8px, -5px, 0); }
+  100% { transform: rotateX(7deg) rotateY(10deg) rotateZ(3deg) translate3d(8px, 7px, 18px); }
+}
+
+@keyframes auth-graph-cluster-two {
+  0% { transform: rotateX(8deg) rotateY(7deg) rotateZ(2deg) translate3d(7px, 4px, 12px); }
+  100% { transform: rotateX(-7deg) rotateY(-11deg) rotateZ(-3deg) translate3d(-9px, -6px, -8px); }
+}
+
+@keyframes auth-graph-cluster-three {
+  0% { transform: rotateX(-6deg) rotateY(10deg) rotateZ(1deg) translate3d(-6px, 8px, -6px); }
+  100% { transform: rotateX(8deg) rotateY(-8deg) rotateZ(-2deg) translate3d(9px, -7px, 16px); }
 }
 
 .auth-card {
@@ -159,11 +196,9 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .auth-graph__scene {
+  .auth-graph__cluster,
+  .auth-graph__cluster-content {
     animation: none;
-  }
-
-  .auth-graph svg {
     transition: none;
   }
 
diff --git a/frontend/src/views/auth/AuthView.tsx b/frontend/src/views/auth/AuthView.tsx
index 5aea66a..c9b31bb 100644
--- a/frontend/src/views/auth/AuthView.tsx
+++ b/frontend/src/views/auth/AuthView.tsx
@@ -35,29 +35,35 @@ function LoginGraphBackground() {
           </radialGradient>
         </defs>
         <rect width="1200" height="800" fill="url(#auth-graph-glow)" />
-        <g className="auth-graph__edges">
-          {graphEdges.map(([from, to], index) => (
-            <line
-              key={`${from}-${to}`}
-              x1={graphNodes[from][0]}
-              y1={graphNodes[from][1]}
-              x2={graphNodes[to][0]}
-              y2={graphNodes[to][1]}
-              style={{ "--edge-delay": `${(index % 9) * 0.32}s` } as React.CSSProperties}
-            />
-          ))}
-        </g>
-        <g className="auth-graph__nodes">
-          {graphNodes.map(([cx, cy], index) => (
-            <circle
-              key={`${cx}-${cy}`}
-              cx={cx}
-              cy={cy}
-              r={index % 5 === 0 ? 3.5 : 2.2}
-              style={{ "--node-delay": `${(index % 8) * 0.45}s` } as React.CSSProperties}
-            />
-          ))}
-        </g>
+        {[graphEdges.slice(0, 18), graphEdges.slice(18, 36), graphEdges.slice(36)].map((edges, clusterIndex) => (
+          <g className={`auth-graph__cluster auth-graph__cluster--${clusterIndex + 1}`} key={clusterIndex}>
+            <g className="auth-graph__cluster-content">
+              <g className="auth-graph__edges">
+                {edges.map(([from, to], index) => (
+                  <line
+                    key={`${from}-${to}`}
+                    x1={graphNodes[from][0]}
+                    y1={graphNodes[from][1]}
+                    x2={graphNodes[to][0]}
+                    y2={graphNodes[to][1]}
+                    style={{ "--edge-delay": `${(index % 9) * 0.32}s` } as React.CSSProperties}
+                  />
+                ))}
+              </g>
+              <g className="auth-graph__nodes">
+                {graphNodes.slice(clusterIndex * 10, clusterIndex === 2 ? undefined : clusterIndex * 10 + 12).map(([cx, cy], index) => (
+                  <circle
+                    key={`${cx}-${cy}`}
+                    cx={cx}
+                    cy={cy}
+                    r={index % 5 === 0 ? 3.5 : 2.2}
+                    style={{ "--node-delay": `${(index % 8) * 0.45}s` } as React.CSSProperties}
+                  />
+                ))}
+              </g>
+            </g>
+          </g>
+        ))}
         </svg>
       </div>
     </div>

From f6a8463d4589e2a49ea5475c0081dfda43f416cd Mon Sep 17 00:00:00 2001
From: Daniel Dias Pereira <86617987+DanielDPereira@users.noreply.github.com>
Date: Thu, 22 Oct 2026 22:25:41 -0300
Subject: [PATCH 4/9] feat(frontend): smooth graph axis rotation and scoped
 mouse input

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 frontend/src/index.css               | 26 ++++++++++-----------
 frontend/src/views/auth/AuthView.tsx | 35 +++++++++++++++-------------
 2 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index e85601f..9ee8870 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -3,10 +3,6 @@
 @import "./styles/layout.css";
 
 .auth-shell {
-  --graph-mouse-x: 0px;
-  --graph-mouse-y: 0px;
-  --graph-tilt-x: 0deg;
-  --graph-tilt-y: 0deg;
   position: relative;
   isolation: isolate;
   min-height: 100vh;
@@ -20,6 +16,10 @@
 }
 
 .auth-graph {
+  --graph-mouse-x: 0px;
+  --graph-mouse-y: 0px;
+  --graph-tilt-x: 0deg;
+  --graph-tilt-y: 0deg;
   position: absolute;
   z-index: -1;
   inset: 0;
@@ -85,15 +85,15 @@
 }
 
 .auth-graph__cluster--1 {
-  animation: auth-graph-cluster-one 24s ease-in-out infinite alternate;
+  animation: auth-graph-cluster-one 42s linear infinite;
 }
 
 .auth-graph__cluster--2 {
-  animation: auth-graph-cluster-two 29s ease-in-out infinite alternate-reverse;
+  animation: auth-graph-cluster-two 58s linear infinite reverse;
 }
 
 .auth-graph__cluster--3 {
-  animation: auth-graph-cluster-three 21s ease-in-out infinite alternate;
+  animation: auth-graph-cluster-three 50s linear infinite;
 }
 
 .auth-graph__edges line {
@@ -126,18 +126,18 @@
 }
 
 @keyframes auth-graph-cluster-one {
-  0% { transform: rotateX(-5deg) rotateY(-8deg) rotateZ(-2deg) translate3d(-8px, -5px, 0); }
-  100% { transform: rotateX(7deg) rotateY(10deg) rotateZ(3deg) translate3d(8px, 7px, 18px); }
+  from { transform: rotateZ(0deg) rotateX(-4deg) rotateY(-7deg); }
+  to { transform: rotateZ(360deg) rotateX(-4deg) rotateY(-7deg); }
 }
 
 @keyframes auth-graph-cluster-two {
-  0% { transform: rotateX(8deg) rotateY(7deg) rotateZ(2deg) translate3d(7px, 4px, 12px); }
-  100% { transform: rotateX(-7deg) rotateY(-11deg) rotateZ(-3deg) translate3d(-9px, -6px, -8px); }
+  from { transform: rotateZ(0deg) rotateX(7deg) rotateY(8deg); }
+  to { transform: rotateZ(360deg) rotateX(7deg) rotateY(8deg); }
 }
 
 @keyframes auth-graph-cluster-three {
-  0% { transform: rotateX(-6deg) rotateY(10deg) rotateZ(1deg) translate3d(-6px, 8px, -6px); }
-  100% { transform: rotateX(8deg) rotateY(-8deg) rotateZ(-2deg) translate3d(9px, -7px, 16px); }
+  from { transform: rotateZ(0deg) rotateX(-6deg) rotateY(10deg); }
+  to { transform: rotateZ(360deg) rotateX(-6deg) rotateY(10deg); }
 }
 
 .auth-card {
diff --git a/frontend/src/views/auth/AuthView.tsx b/frontend/src/views/auth/AuthView.tsx
index c9b31bb..f9b8132 100644
--- a/frontend/src/views/auth/AuthView.tsx
+++ b/frontend/src/views/auth/AuthView.tsx
@@ -1,5 +1,5 @@
 import { Button } from "../common/ui";
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import { useEffect, useRef, useState, type ReactNode, type RefObject } from "react";
 import { ApiError } from "../../api/api_auth";
 import { useAuth } from "../../viewmodels/useAuthViewModel";
 import { loginDestination, navigate, safeDestination } from "../../models/navigation";
@@ -23,9 +23,9 @@ const graphEdges = [
   [28, 29], [14, 28], [10, 27],
 ] as const;
 
-function LoginGraphBackground() {
+function LoginGraphBackground({ graphRef }: { graphRef?: RefObject<HTMLDivElement | null> }) {
   return (
-    <div className="auth-graph" aria-hidden="true">
+    <div ref={graphRef} className="auth-graph" aria-hidden="true">
       <div className="auth-graph__scene">
         <svg viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice">
         <defs>
@@ -106,7 +106,7 @@ export function AuthGate({ children }: { children: ReactNode }) {
 
 export function AuthScreen({ initialMode }: { initialMode: "login" | "register" }) {
   const [mode, setMode] = useState<"login" | "register">(initialMode);
-  const authShellRef = useRef<HTMLElement>(null);
+  const graphRef = useRef<HTMLDivElement>(null);
   const animationFrame = useRef<number | null>(null);
 
   useEffect(() => {
@@ -117,22 +117,25 @@ export function AuthScreen({ initialMode }: { initialMode: "login" | "register"
     const updateGraphInteraction = (event: globalThis.MouseEvent) => {
       if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
 
-      const x = event.clientX / window.innerWidth * 2 - 1;
-      const y = event.clientY / window.innerHeight * 2 - 1;
+      const graphBounds = graphRef.current?.getBoundingClientRect();
+      if (!graphBounds || graphBounds.width === 0 || graphBounds.height === 0) return;
+
+      const x = Math.max(-1, Math.min(1, ((event.clientX - graphBounds.left) / graphBounds.width) * 2 - 1));
+      const y = Math.max(-1, Math.min(1, ((event.clientY - graphBounds.top) / graphBounds.height) * 2 - 1));
       if (animationFrame.current !== null) window.cancelAnimationFrame(animationFrame.current);
       animationFrame.current = window.requestAnimationFrame(() => {
-        authShellRef.current?.style.setProperty("--graph-mouse-x", `${x * 18}px`);
-        authShellRef.current?.style.setProperty("--graph-mouse-y", `${y * 14}px`);
-        authShellRef.current?.style.setProperty("--graph-tilt-x", `${y * -5}deg`);
-        authShellRef.current?.style.setProperty("--graph-tilt-y", `${x * 7}deg`);
+        graphRef.current?.style.setProperty("--graph-mouse-x", `${x * 16}px`);
+        graphRef.current?.style.setProperty("--graph-mouse-y", `${y * 12}px`);
+        graphRef.current?.style.setProperty("--graph-tilt-x", `${y * -4}deg`);
+        graphRef.current?.style.setProperty("--graph-tilt-y", `${x * 6}deg`);
       });
     };
 
     const resetGraphInteraction = () => {
-      authShellRef.current?.style.setProperty("--graph-mouse-x", "0px");
-      authShellRef.current?.style.setProperty("--graph-mouse-y", "0px");
-      authShellRef.current?.style.setProperty("--graph-tilt-x", "0deg");
-      authShellRef.current?.style.setProperty("--graph-tilt-y", "0deg");
+      graphRef.current?.style.setProperty("--graph-mouse-x", "0px");
+      graphRef.current?.style.setProperty("--graph-mouse-y", "0px");
+      graphRef.current?.style.setProperty("--graph-tilt-x", "0deg");
+      graphRef.current?.style.setProperty("--graph-tilt-y", "0deg");
     };
 
     window.addEventListener("mousemove", updateGraphInteraction);
@@ -150,8 +153,8 @@ export function AuthScreen({ initialMode }: { initialMode: "login" | "register"
   };
 
   return (
-    <main ref={authShellRef} className="auth-shell">
-      <LoginGraphBackground />
+    <main className="auth-shell">
+      <LoginGraphBackground graphRef={graphRef} />
       <section className="ds-card ds-card--glass auth-card">
         <div style={{ display: "flex", gap: "6px" }}>
           {mode === "register" && (

From fd5316eabcba951b396a11525a1c7e11b7f2e42d Mon Sep 17 00:00:00 2001
From: Daniel Dias Pereira <86617987+DanielDPereira@users.noreply.github.com>
Date: Thu, 22 Oct 2026 22:27:19 -0300
Subject: [PATCH 5/9] feat(frontend): keep login graphs on their own rotation
 axes

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 frontend/src/index.css               | 31 ++++++++++------------------
 frontend/src/views/auth/AuthView.tsx | 10 +++------
 2 files changed, 14 insertions(+), 27 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 9ee8870..37ecb43 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -16,10 +16,8 @@
 }
 
 .auth-graph {
-  --graph-mouse-x: 0px;
-  --graph-mouse-y: 0px;
   --graph-tilt-x: 0deg;
-  --graph-tilt-y: 0deg;
+  --graph-tilt-z: 0deg;
   position: absolute;
   z-index: -1;
   inset: 0;
@@ -72,28 +70,21 @@
 .auth-graph__cluster-content {
   transform-box: fill-box;
   transform-origin: center;
-  transform: translate3d(
-      var(--graph-mouse-x),
-      var(--graph-mouse-y),
-      0
-    )
-    perspective(700px)
-    rotateX(var(--graph-tilt-x))
-    rotateY(var(--graph-tilt-y));
+  transform: perspective(700px) rotateX(var(--graph-tilt-x)) rotateZ(var(--graph-tilt-z));
   transition: transform 1s cubic-bezier(.2, .75, .2, 1);
   will-change: transform;
 }
 
 .auth-graph__cluster--1 {
-  animation: auth-graph-cluster-one 42s linear infinite;
+  animation: auth-graph-cluster-one 34s linear infinite;
 }
 
 .auth-graph__cluster--2 {
-  animation: auth-graph-cluster-two 58s linear infinite reverse;
+  animation: auth-graph-cluster-two 46s linear infinite reverse;
 }
 
 .auth-graph__cluster--3 {
-  animation: auth-graph-cluster-three 50s linear infinite;
+  animation: auth-graph-cluster-three 40s linear infinite;
 }
 
 .auth-graph__edges line {
@@ -126,18 +117,18 @@
 }
 
 @keyframes auth-graph-cluster-one {
-  from { transform: rotateZ(0deg) rotateX(-4deg) rotateY(-7deg); }
-  to { transform: rotateZ(360deg) rotateX(-4deg) rotateY(-7deg); }
+  from { transform: rotateY(0deg) rotateX(-4deg); }
+  to { transform: rotateY(360deg) rotateX(-4deg); }
 }
 
 @keyframes auth-graph-cluster-two {
-  from { transform: rotateZ(0deg) rotateX(7deg) rotateY(8deg); }
-  to { transform: rotateZ(360deg) rotateX(7deg) rotateY(8deg); }
+  from { transform: rotateY(0deg) rotateX(7deg); }
+  to { transform: rotateY(360deg) rotateX(7deg); }
 }
 
 @keyframes auth-graph-cluster-three {
-  from { transform: rotateZ(0deg) rotateX(-6deg) rotateY(10deg); }
-  to { transform: rotateZ(360deg) rotateX(-6deg) rotateY(10deg); }
+  from { transform: rotateY(0deg) rotateX(-6deg); }
+  to { transform: rotateY(360deg) rotateX(-6deg); }
 }
 
 .auth-card {
diff --git a/frontend/src/views/auth/AuthView.tsx b/frontend/src/views/auth/AuthView.tsx
index f9b8132..795b7e2 100644
--- a/frontend/src/views/auth/AuthView.tsx
+++ b/frontend/src/views/auth/AuthView.tsx
@@ -124,18 +124,14 @@ export function AuthScreen({ initialMode }: { initialMode: "login" | "register"
       const y = Math.max(-1, Math.min(1, ((event.clientY - graphBounds.top) / graphBounds.height) * 2 - 1));
       if (animationFrame.current !== null) window.cancelAnimationFrame(animationFrame.current);
       animationFrame.current = window.requestAnimationFrame(() => {
-        graphRef.current?.style.setProperty("--graph-mouse-x", `${x * 16}px`);
-        graphRef.current?.style.setProperty("--graph-mouse-y", `${y * 12}px`);
-        graphRef.current?.style.setProperty("--graph-tilt-x", `${y * -4}deg`);
-        graphRef.current?.style.setProperty("--graph-tilt-y", `${x * 6}deg`);
+        graphRef.current?.style.setProperty("--graph-tilt-x", `${y * -5}deg`);
+        graphRef.current?.style.setProperty("--graph-tilt-z", `${x * 4}deg`);
       });
     };
 
     const resetGraphInteraction = () => {
-      graphRef.current?.style.setProperty("--graph-mouse-x", "0px");
-      graphRef.current?.style.setProperty("--graph-mouse-y", "0px");
       graphRef.current?.style.setProperty("--graph-tilt-x", "0deg");
-      graphRef.current?.style.setProperty("--graph-tilt-y", "0deg");
+      graphRef.current?.style.setProperty("--graph-tilt-z", "0deg");
     };
 
     window.addEventListener("mousemove", updateGraphInteraction);

From 2094c9e35afb9ebba7b51648d6c8f70319c2c229 Mon Sep 17 00:00:00 2001
From: Daniel Dias Pereira <86617987+DanielDPereira@users.noreply.github.com>
Date: Thu, 22 Oct 2026 22:33:29 -0300
Subject: [PATCH 6/9] feat(frontend): use interactive particle canvas on login

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 frontend/src/index.css               | 103 +-------------
 frontend/src/views/auth/AuthView.tsx | 205 ++++++++++++++-------------
 2 files changed, 115 insertions(+), 193 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 37ecb43..6a2034e 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -16,13 +16,17 @@
 }
 
 .auth-graph {
-  --graph-tilt-x: 0deg;
-  --graph-tilt-z: 0deg;
   position: absolute;
   z-index: -1;
   inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
   pointer-events: none;
   opacity: .9;
+  background:
+    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--brand-primary) 12%, transparent), transparent 24%),
+    radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--brand-primary) 10%, transparent), transparent 26%);
 }
 
 .auth-graph::before,
@@ -47,90 +51,6 @@
   bottom: -22%;
 }
 
-.auth-graph svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.auth-graph__scene {
-  width: 100%;
-  height: 100%;
-  perspective: 900px;
-  transform-style: preserve-3d;
-}
-
-.auth-graph__cluster {
-  transform-box: fill-box;
-  transform-origin: center;
-  transform-style: preserve-3d;
-  will-change: transform;
-}
-
-.auth-graph__cluster-content {
-  transform-box: fill-box;
-  transform-origin: center;
-  transform: perspective(700px) rotateX(var(--graph-tilt-x)) rotateZ(var(--graph-tilt-z));
-  transition: transform 1s cubic-bezier(.2, .75, .2, 1);
-  will-change: transform;
-}
-
-.auth-graph__cluster--1 {
-  animation: auth-graph-cluster-one 34s linear infinite;
-}
-
-.auth-graph__cluster--2 {
-  animation: auth-graph-cluster-two 46s linear infinite reverse;
-}
-
-.auth-graph__cluster--3 {
-  animation: auth-graph-cluster-three 40s linear infinite;
-}
-
-.auth-graph__edges line {
-  stroke: var(--brand-primary);
-  stroke-width: 1;
-  stroke-dasharray: 6 14;
-  opacity: .26;
-  animation: auth-graph-edge 7s ease-in-out infinite alternate;
-  animation-delay: var(--edge-delay);
-}
-
-.auth-graph__nodes circle {
-  fill: var(--accent-secondary);
-  opacity: .58;
-  filter: drop-shadow(0 0 5px var(--brand-primary));
-  transform-box: fill-box;
-  transform-origin: center;
-  animation: auth-graph-node 4.5s ease-in-out infinite;
-  animation-delay: var(--node-delay);
-}
-
-@keyframes auth-graph-edge {
-  from { stroke-dashoffset: 0; opacity: .16; }
-  to { stroke-dashoffset: -42; opacity: .52; }
-}
-
-@keyframes auth-graph-node {
-  0%, 100% { transform: scale(.8); opacity: .36; }
-  50% { transform: scale(1.35); opacity: .9; }
-}
-
-@keyframes auth-graph-cluster-one {
-  from { transform: rotateY(0deg) rotateX(-4deg); }
-  to { transform: rotateY(360deg) rotateX(-4deg); }
-}
-
-@keyframes auth-graph-cluster-two {
-  from { transform: rotateY(0deg) rotateX(7deg); }
-  to { transform: rotateY(360deg) rotateX(7deg); }
-}
-
-@keyframes auth-graph-cluster-three {
-  from { transform: rotateY(0deg) rotateX(-6deg); }
-  to { transform: rotateY(360deg) rotateX(-6deg); }
-}
-
 .auth-card {
   position: relative;
   z-index: 1;
@@ -187,16 +107,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .auth-graph__cluster,
-  .auth-graph__cluster-content {
-    animation: none;
-    transition: none;
-  }
-
-  .auth-graph__edges line,
-  .auth-graph__nodes circle {
-    animation: none;
-  }
+  .auth-graph { opacity: .72; }
 }
 
 button:focus-visible,
diff --git a/frontend/src/views/auth/AuthView.tsx b/frontend/src/views/auth/AuthView.tsx
index 795b7e2..e9566c3 100644
--- a/frontend/src/views/auth/AuthView.tsx
+++ b/frontend/src/views/auth/AuthView.tsx
@@ -1,72 +1,116 @@
 import { Button } from "../common/ui";
-import { useEffect, useRef, useState, type ReactNode, type RefObject } from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
 import { ApiError } from "../../api/api_auth";
 import { useAuth } from "../../viewmodels/useAuthViewModel";
 import { loginDestination, navigate, safeDestination } from "../../models/navigation";
 
-const graphNodes = [
-  [82, 118], [178, 68], [286, 138], [402, 74], [526, 154], [654, 82],
-  [780, 132], [918, 64], [1080, 142], [1128, 286], [978, 332], [842, 268],
-  [704, 370], [566, 292], [418, 382], [274, 300], [126, 382], [42, 524],
-  [190, 594], [344, 536], [488, 650], [644, 548], [792, 660], [946, 560],
-  [1102, 672], [1034, 458], [884, 478], [742, 466], [604, 432], [364, 462],
-] as const;
-
-const graphEdges = [
-  [0, 1], [0, 2], [1, 2], [1, 3], [2, 3], [2, 5], [3, 4], [3, 6],
-  [4, 5], [4, 7], [5, 6], [5, 8], [6, 7], [6, 10], [7, 8], [8, 9],
-  [8, 10], [9, 10], [10, 11], [10, 12], [11, 12], [11, 13], [12, 13],
-  [12, 14], [13, 14], [13, 15], [14, 15], [14, 19], [15, 16], [15, 17],
-  [16, 17], [16, 18], [17, 18], [18, 19], [18, 20], [19, 20], [19, 28],
-  [20, 21], [20, 28], [21, 22], [21, 27], [22, 23], [22, 24], [23, 24],
-  [23, 25], [24, 25], [24, 26], [25, 26], [26, 27], [26, 29], [27, 28],
-  [28, 29], [14, 28], [10, 27],
-] as const;
-
-function LoginGraphBackground({ graphRef }: { graphRef?: RefObject<HTMLDivElement | null> }) {
+type Particle = { x: number; y: number; vx: number; vy: number; radius: number };
+
+function LoginGraphBackground() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const context = canvas.getContext("2d");
+    if (!context) return;
+
+    const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const pointer = { x: -1000, y: -1000 };
+    let particles: Particle[] = [];
+    let animationFrame: number | null = null;
+    let width = 0;
+    let height = 0;
+    let pixelRatio = 1;
+
+    const resize = () => {
+      const bounds = canvas.getBoundingClientRect();
+      width = bounds.width;
+      height = bounds.height;
+      pixelRatio = Math.min(window.devicePixelRatio || 1, 2);
+      canvas.width = Math.floor(width * pixelRatio);
+      canvas.height = Math.floor(height * pixelRatio);
+      context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+      const count = Math.max(34, Math.min(78, Math.floor((width * height) / 15500)));
+      particles = Array.from({ length: count }, (_, index) => ({
+        x: (index * 137.5) % width,
+        y: (index * 83.7) % height,
+        vx: (index % 2 ? 1 : -1) * (0.08 + (index % 4) * 0.025),
+        vy: (index % 3 ? 1 : -1) * (0.06 + (index % 5) * 0.018),
+        radius: index % 7 === 0 ? 2.6 : 1.5,
+      }));
+    };
+
+    const draw = () => {
+      context.clearRect(0, 0, width, height);
+      const linkDistance = Math.min(150, Math.max(95, width * 0.12));
+
+      particles.forEach((particle, index) => {
+        if (!reducedMotion.matches) {
+          const dx = pointer.x - particle.x;
+          const dy = pointer.y - particle.y;
+          const distance = Math.hypot(dx, dy);
+          if (distance < 180 && distance > 0) {
+            particle.vx += dx / distance * 0.0012;
+            particle.vy += dy / distance * 0.0012;
+          }
+          particle.x += particle.vx;
+          particle.y += particle.vy;
+          if (particle.x < -20 || particle.x > width + 20) particle.vx *= -1;
+          if (particle.y < -20 || particle.y > height + 20) particle.vy *= -1;
+          particle.vx = Math.max(-0.24, Math.min(0.24, particle.vx));
+          particle.vy = Math.max(-0.24, Math.min(0.24, particle.vy));
+        }
+
+        for (let nextIndex = index + 1; nextIndex < particles.length; nextIndex += 1) {
+          const other = particles[nextIndex];
+          const distance = Math.hypot(particle.x - other.x, particle.y - other.y);
+          if (distance > linkDistance) continue;
+          context.strokeStyle = `rgba(237, 106, 50, ${(1 - distance / linkDistance) * 0.32})`;
+          context.lineWidth = 0.7;
+          context.beginPath();
+          context.moveTo(particle.x, particle.y);
+          context.lineTo(other.x, other.y);
+          context.stroke();
+        }
+
+        context.fillStyle = index % 7 === 0 ? "#ffad7d" : "#ed6a32";
+        context.shadowColor = "#ed6a32";
+        context.shadowBlur = 8;
+        context.beginPath();
+        context.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
+        context.fill();
+        context.shadowBlur = 0;
+      });
+
+      animationFrame = window.requestAnimationFrame(draw);
+    };
+
+    const movePointer = (event: MouseEvent) => {
+      const bounds = canvas.getBoundingClientRect();
+      pointer.x = event.clientX - bounds.left;
+      pointer.y = event.clientY - bounds.top;
+    };
+    const resetPointer = () => {
+      pointer.x = -1000;
+      pointer.y = -1000;
+    };
+
+    resize();
+    draw();
+    window.addEventListener("resize", resize);
+    window.addEventListener("mousemove", movePointer);
+    window.addEventListener("mouseleave", resetPointer);
+    return () => {
+      window.removeEventListener("resize", resize);
+      window.removeEventListener("mousemove", movePointer);
+      window.removeEventListener("mouseleave", resetPointer);
+      if (animationFrame !== null) window.cancelAnimationFrame(animationFrame);
+    };
+  }, []);
+
   return (
-    <div ref={graphRef} className="auth-graph" aria-hidden="true">
-      <div className="auth-graph__scene">
-        <svg viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice">
-        <defs>
-          <radialGradient id="auth-graph-glow" cx="50%" cy="50%" r="60%">
-            <stop offset="0%" stopColor="var(--brand-primary)" stopOpacity=".12" />
-            <stop offset="100%" stopColor="var(--brand-primary)" stopOpacity="0" />
-          </radialGradient>
-        </defs>
-        <rect width="1200" height="800" fill="url(#auth-graph-glow)" />
-        {[graphEdges.slice(0, 18), graphEdges.slice(18, 36), graphEdges.slice(36)].map((edges, clusterIndex) => (
-          <g className={`auth-graph__cluster auth-graph__cluster--${clusterIndex + 1}`} key={clusterIndex}>
-            <g className="auth-graph__cluster-content">
-              <g className="auth-graph__edges">
-                {edges.map(([from, to], index) => (
-                  <line
-                    key={`${from}-${to}`}
-                    x1={graphNodes[from][0]}
-                    y1={graphNodes[from][1]}
-                    x2={graphNodes[to][0]}
-                    y2={graphNodes[to][1]}
-                    style={{ "--edge-delay": `${(index % 9) * 0.32}s` } as React.CSSProperties}
-                  />
-                ))}
-              </g>
-              <g className="auth-graph__nodes">
-                {graphNodes.slice(clusterIndex * 10, clusterIndex === 2 ? undefined : clusterIndex * 10 + 12).map(([cx, cy], index) => (
-                  <circle
-                    key={`${cx}-${cy}`}
-                    cx={cx}
-                    cy={cy}
-                    r={index % 5 === 0 ? 3.5 : 2.2}
-                    style={{ "--node-delay": `${(index % 8) * 0.45}s` } as React.CSSProperties}
-                  />
-                ))}
-              </g>
-            </g>
-          </g>
-        ))}
-        </svg>
-      </div>
-    </div>
+    <canvas ref={canvasRef} className="auth-graph" aria-hidden="true" />
   );
 }
 
@@ -106,43 +150,10 @@ export function AuthGate({ children }: { children: ReactNode }) {
 
 export function AuthScreen({ initialMode }: { initialMode: "login" | "register" }) {
   const [mode, setMode] = useState<"login" | "register">(initialMode);
-  const graphRef = useRef<HTMLDivElement>(null);
-  const animationFrame = useRef<number | null>(null);
-
   useEffect(() => {
     setMode(initialMode);
   }, [initialMode]);
 
-  useEffect(() => {
-    const updateGraphInteraction = (event: globalThis.MouseEvent) => {
-      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
-
-      const graphBounds = graphRef.current?.getBoundingClientRect();
-      if (!graphBounds || graphBounds.width === 0 || graphBounds.height === 0) return;
-
-      const x = Math.max(-1, Math.min(1, ((event.clientX - graphBounds.left) / graphBounds.width) * 2 - 1));
-      const y = Math.max(-1, Math.min(1, ((event.clientY - graphBounds.top) / graphBounds.height) * 2 - 1));
-      if (animationFrame.current !== null) window.cancelAnimationFrame(animationFrame.current);
-      animationFrame.current = window.requestAnimationFrame(() => {
-        graphRef.current?.style.setProperty("--graph-tilt-x", `${y * -5}deg`);
-        graphRef.current?.style.setProperty("--graph-tilt-z", `${x * 4}deg`);
-      });
-    };
-
-    const resetGraphInteraction = () => {
-      graphRef.current?.style.setProperty("--graph-tilt-x", "0deg");
-      graphRef.current?.style.setProperty("--graph-tilt-z", "0deg");
-    };
-
-    window.addEventListener("mousemove", updateGraphInteraction);
-    window.addEventListener("mouseleave", resetGraphInteraction);
-    return () => {
-      window.removeEventListener("mousemove", updateGraphInteraction);
-      window.removeEventListener("mouseleave", resetGraphInteraction);
-      if (animationFrame.current !== null) window.cancelAnimationFrame(animationFrame.current);
-    };
-  }, []);
-
   const switchMode = (nextMode: "login" | "register") => {
     setMode(nextMode);
     navigate(nextMode === "register" ? "/register" : "/login");
@@ -150,7 +161,7 @@ export function AuthScreen({ initialMode }: { initialMode: "login" | "register"
 
   return (
     <main className="auth-shell">
-      <LoginGraphBackground graphRef={graphRef} />
+      <LoginGraphBackground />
       <section className="ds-card ds-card--glass auth-card">
         <div style={{ display: "flex", gap: "6px" }}>
           {mode === "register" && (

From 92a449a03eee7ea51485f2dc0919c37543690235 Mon Sep 17 00:00:00 2001
From: Daniel Dias Pereira <86617987+DanielDPereira@users.noreply.github.com>
Date: Thu, 22 Oct 2026 22:35:26 -0300
Subject: [PATCH 7/9] feat(frontend): add visible cursor interaction to login
 particles

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 frontend/src/views/auth/AuthView.tsx | 33 +++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/frontend/src/views/auth/AuthView.tsx b/frontend/src/views/auth/AuthView.tsx
index e9566c3..2bf6a20 100644
--- a/frontend/src/views/auth/AuthView.tsx
+++ b/frontend/src/views/auth/AuthView.tsx
@@ -44,15 +44,35 @@ function LoginGraphBackground() {
     const draw = () => {
       context.clearRect(0, 0, width, height);
       const linkDistance = Math.min(150, Math.max(95, width * 0.12));
+      const pointerRadius = 190;
+
+      if (pointer.x > -500) {
+        const pointerGlow = context.createRadialGradient(
+          pointer.x,
+          pointer.y,
+          0,
+          pointer.x,
+          pointer.y,
+          pointerRadius,
+        );
+        pointerGlow.addColorStop(0, "rgba(237, 106, 50, .18)");
+        pointerGlow.addColorStop(.45, "rgba(237, 106, 50, .06)");
+        pointerGlow.addColorStop(1, "rgba(237, 106, 50, 0)");
+        context.fillStyle = pointerGlow;
+        context.beginPath();
+        context.arc(pointer.x, pointer.y, pointerRadius, 0, Math.PI * 2);
+        context.fill();
+      }
 
       particles.forEach((particle, index) => {
         if (!reducedMotion.matches) {
           const dx = pointer.x - particle.x;
           const dy = pointer.y - particle.y;
           const distance = Math.hypot(dx, dy);
-          if (distance < 180 && distance > 0) {
-            particle.vx += dx / distance * 0.0012;
-            particle.vy += dy / distance * 0.0012;
+          if (distance < pointerRadius && distance > 0) {
+            const influence = (1 - distance / pointerRadius) ** 2;
+            particle.vx += dx / distance * 0.0024 * influence;
+            particle.vy += dy / distance * 0.0024 * influence;
           }
           particle.x += particle.vx;
           particle.y += particle.vy;
@@ -66,7 +86,10 @@ function LoginGraphBackground() {
           const other = particles[nextIndex];
           const distance = Math.hypot(particle.x - other.x, particle.y - other.y);
           if (distance > linkDistance) continue;
-          context.strokeStyle = `rgba(237, 106, 50, ${(1 - distance / linkDistance) * 0.32})`;
+          const pointerBoost = pointer.x > -500 && Math.hypot(pointer.x - particle.x, pointer.y - particle.y) < pointerRadius
+            ? .14
+            : 0;
+          context.strokeStyle = `rgba(237, 106, 50, ${Math.min(.65, (1 - distance / linkDistance) * .32 + pointerBoost)})`;
           context.lineWidth = 0.7;
           context.beginPath();
           context.moveTo(particle.x, particle.y);
@@ -76,7 +99,7 @@ function LoginGraphBackground() {
 
         context.fillStyle = index % 7 === 0 ? "#ffad7d" : "#ed6a32";
         context.shadowColor = "#ed6a32";
-        context.shadowBlur = 8;
+        context.shadowBlur = pointer.x > -500 && Math.hypot(pointer.x - particle.x, pointer.y - particle.y) < pointerRadius ? 14 : 8;
         context.beginPath();
         context.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
         context.fill();

From 55286cbc34042e202adbf272935a5b93f0af57f5 Mon Sep 17 00:00:00 2001
From: Daniel Dias Pereira <86617987+DanielDPereira@users.noreply.github.com>
Date: Thu, 22 Oct 2026 22:39:34 -0300
Subject: [PATCH 8/9] feat(frontend): start login particle graph expanded

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 frontend/src/views/auth/AuthView.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/auth/AuthView.tsx b/frontend/src/views/auth/AuthView.tsx
index 2bf6a20..b3ad8d1 100644
--- a/frontend/src/views/auth/AuthView.tsx
+++ b/frontend/src/views/auth/AuthView.tsx
@@ -32,9 +32,11 @@ function LoginGraphBackground() {
       canvas.height = Math.floor(height * pixelRatio);
       context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
       const count = Math.max(34, Math.min(78, Math.floor((width * height) / 15500)));
+      const columns = Math.max(5, Math.ceil(Math.sqrt(count * width / Math.max(height, 1))));
+      const rows = Math.ceil(count / columns);
       particles = Array.from({ length: count }, (_, index) => ({
-        x: (index * 137.5) % width,
-        y: (index * 83.7) % height,
+        x: ((index % columns) + .5 + ((index * 17) % 7 - 3) * .045) * width / columns,
+        y: (Math.floor(index / columns) + .5 + ((index * 11) % 7 - 3) * .045) * height / rows,
         vx: (index % 2 ? 1 : -1) * (0.08 + (index % 4) * 0.025),
         vy: (index % 3 ? 1 : -1) * (0.06 + (index % 5) * 0.018),
         radius: index % 7 === 0 ? 2.6 : 1.5,
@@ -43,7 +45,7 @@ function LoginGraphBackground() {
 
     const draw = () => {
       context.clearRect(0, 0, width, height);
-      const linkDistance = Math.min(150, Math.max(95, width * 0.12));
+      const linkDistance = Math.min(180, Math.max(135, width * 0.22));
       const pointerRadius = 190;
 
       if (pointer.x > -500) {

From da58f6ec109c4b6b354ea3d8c61512b211b911d2 Mon Sep 17 00:00:00 2001
From: AgenciaWiks <agenciawiks@gmail.com>
Date: Sun, 25 Oct 2026 13:34:43 -0300
Subject: [PATCH 9/9] fix(frontend): respect reduced motion on login graph

---
 frontend/src/index.css                        |  43 ++--
 frontend/src/views/auth/AuthView.tsx          | 105 +++++++--
 .../views/auth/LoginGraphBackground.test.tsx  | 211 ++++++++++++++++++
 3 files changed, 323 insertions(+), 36 deletions(-)
 create mode 100644 frontend/src/views/auth/LoginGraphBackground.test.tsx

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 6a2034e..5a3ad04 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -6,51 +6,54 @@
   position: relative;
   isolation: isolate;
   min-height: 100vh;
+  min-height: 100dvh;
   display: grid;
   place-items: center;
   padding: 24px;
-  overflow: hidden;
+  overflow-x: clip;
   background:
     radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--brand-primary) 8%, transparent), transparent 38%),
     var(--surface-base);
 }
 
-.auth-graph {
-  position: absolute;
-  z-index: -1;
-  inset: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  opacity: .9;
-  background:
-    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--brand-primary) 12%, transparent), transparent 24%),
-    radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--brand-primary) 10%, transparent), transparent 26%);
-}
-
-.auth-graph::before,
-.auth-graph::after {
+.auth-shell::before,
+.auth-shell::after {
   position: absolute;
-  content: "";
+  z-index: 0;
   width: 34vw;
   aspect-ratio: 1;
   border-radius: 50%;
   background: var(--accent-glow);
   filter: blur(80px);
   opacity: .22;
+  content: "";
+  pointer-events: none;
 }
 
-.auth-graph::before {
+.auth-shell::before {
   top: -18%;
   left: -12%;
 }
 
-.auth-graph::after {
+.auth-shell::after {
   right: -12%;
   bottom: -22%;
 }
 
+.auth-graph {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  opacity: .9;
+  background:
+    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--brand-primary) 12%, transparent), transparent 24%),
+    radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--brand-primary) 10%, transparent), transparent 26%);
+}
+
 .auth-card {
   position: relative;
   z-index: 1;
diff --git a/frontend/src/views/auth/AuthView.tsx b/frontend/src/views/auth/AuthView.tsx
index b3ad8d1..f444f43 100644
--- a/frontend/src/views/auth/AuthView.tsx
+++ b/frontend/src/views/auth/AuthView.tsx
@@ -17,17 +17,40 @@ function LoginGraphBackground() {
 
     const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
     const pointer = { x: -1000, y: -1000 };
+    const isDocumentHidden = () => document.visibilityState === "hidden";
     let particles: Particle[] = [];
     let animationFrame: number | null = null;
     let width = 0;
     let height = 0;
     let pixelRatio = 1;
+    let brandColor = "rgb(237, 106, 50)";
+    let highlightColor = "rgb(255, 173, 125)";
+    let brandColorWithAlpha = (alpha: number) => `rgba(237, 106, 50, ${alpha})`;
+
+    const parseColor = (value: string) => {
+      const hexMatch = value.match(/^#([\da-f]{3}|[\da-f]{6})$/i);
+      if (hexMatch) {
+        const hex = hexMatch[1].length === 3
+          ? [...hexMatch[1]].map(part => part + part).join("")
+          : hexMatch[1];
+        return [0, 2, 4].map(offset => Number.parseInt(hex.slice(offset, offset + 2), 16));
+      }
+
+      const rgbMatch = value.match(/^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/i);
+      if (rgbMatch) return rgbMatch.slice(1, 4).map(channel => Number.parseFloat(channel));
+      return [237, 106, 50];
+    };
 
     const resize = () => {
       const bounds = canvas.getBoundingClientRect();
       width = bounds.width;
       height = bounds.height;
       pixelRatio = Math.min(window.devicePixelRatio || 1, 2);
+      const configuredBrandColor = window.getComputedStyle(canvas).getPropertyValue("--brand-primary").trim();
+      const [red, green, blue] = parseColor(configuredBrandColor || "#ed6a32");
+      brandColor = `rgb(${red}, ${green}, ${blue})`;
+      highlightColor = `rgb(${Math.round(red + (255 - red) * .48)}, ${Math.round(green + (255 - green) * .48)}, ${Math.round(blue + (255 - blue) * .48)})`;
+      brandColorWithAlpha = (alpha: number) => `rgba(${red}, ${green}, ${blue}, ${alpha})`;
       canvas.width = Math.floor(width * pixelRatio);
       canvas.height = Math.floor(height * pixelRatio);
       context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
@@ -43,12 +66,13 @@ function LoginGraphBackground() {
       }));
     };
 
-    const draw = () => {
+    const drawScene = (advanceParticles: boolean) => {
       context.clearRect(0, 0, width, height);
       const linkDistance = Math.min(180, Math.max(135, width * 0.22));
       const pointerRadius = 190;
+      const pointerActive = advanceParticles && pointer.x > -500;
 
-      if (pointer.x > -500) {
+      if (pointerActive) {
         const pointerGlow = context.createRadialGradient(
           pointer.x,
           pointer.y,
@@ -57,9 +81,9 @@ function LoginGraphBackground() {
           pointer.y,
           pointerRadius,
         );
-        pointerGlow.addColorStop(0, "rgba(237, 106, 50, .18)");
-        pointerGlow.addColorStop(.45, "rgba(237, 106, 50, .06)");
-        pointerGlow.addColorStop(1, "rgba(237, 106, 50, 0)");
+        pointerGlow.addColorStop(0, brandColorWithAlpha(.18));
+        pointerGlow.addColorStop(.45, brandColorWithAlpha(.06));
+        pointerGlow.addColorStop(1, brandColorWithAlpha(0));
         context.fillStyle = pointerGlow;
         context.beginPath();
         context.arc(pointer.x, pointer.y, pointerRadius, 0, Math.PI * 2);
@@ -67,7 +91,7 @@ function LoginGraphBackground() {
       }
 
       particles.forEach((particle, index) => {
-        if (!reducedMotion.matches) {
+        if (advanceParticles) {
           const dx = pointer.x - particle.x;
           const dy = pointer.y - particle.y;
           const distance = Math.hypot(dx, dy);
@@ -88,10 +112,10 @@ function LoginGraphBackground() {
           const other = particles[nextIndex];
           const distance = Math.hypot(particle.x - other.x, particle.y - other.y);
           if (distance > linkDistance) continue;
-          const pointerBoost = pointer.x > -500 && Math.hypot(pointer.x - particle.x, pointer.y - particle.y) < pointerRadius
+          const pointerBoost = pointerActive && Math.hypot(pointer.x - particle.x, pointer.y - particle.y) < pointerRadius
             ? .14
             : 0;
-          context.strokeStyle = `rgba(237, 106, 50, ${Math.min(.65, (1 - distance / linkDistance) * .32 + pointerBoost)})`;
+          context.strokeStyle = brandColorWithAlpha(Math.min(.65, (1 - distance / linkDistance) * .32 + pointerBoost));
           context.lineWidth = 0.7;
           context.beginPath();
           context.moveTo(particle.x, particle.y);
@@ -99,19 +123,36 @@ function LoginGraphBackground() {
           context.stroke();
         }
 
-        context.fillStyle = index % 7 === 0 ? "#ffad7d" : "#ed6a32";
-        context.shadowColor = "#ed6a32";
-        context.shadowBlur = pointer.x > -500 && Math.hypot(pointer.x - particle.x, pointer.y - particle.y) < pointerRadius ? 14 : 8;
+        context.fillStyle = index % 7 === 0 ? highlightColor : brandColor;
+        context.shadowColor = brandColor;
+        context.shadowBlur = pointerActive && Math.hypot(pointer.x - particle.x, pointer.y - particle.y) < pointerRadius ? 14 : 8;
         context.beginPath();
         context.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
         context.fill();
         context.shadowBlur = 0;
       });
+    };
 
-      animationFrame = window.requestAnimationFrame(draw);
+    const cancelPendingFrame = () => {
+      if (animationFrame === null) return;
+      window.cancelAnimationFrame(animationFrame);
+      animationFrame = null;
     };
 
+    function scheduleFrame() {
+      if (animationFrame !== null || reducedMotion.matches || isDocumentHidden()) return;
+      animationFrame = window.requestAnimationFrame(renderFrame);
+    }
+
+    function renderFrame() {
+      animationFrame = null;
+      const advanceParticles = !reducedMotion.matches && !isDocumentHidden();
+      drawScene(advanceParticles);
+      if (advanceParticles) scheduleFrame();
+    }
+
     const movePointer = (event: MouseEvent) => {
+      if (reducedMotion.matches || isDocumentHidden()) return;
       const bounds = canvas.getBoundingClientRect();
       pointer.x = event.clientX - bounds.left;
       pointer.y = event.clientY - bounds.top;
@@ -121,16 +162,48 @@ function LoginGraphBackground() {
       pointer.y = -1000;
     };
 
+    const handleResize = () => {
+      resize();
+      if (reducedMotion.matches) drawScene(false);
+      else scheduleFrame();
+    };
+
+    const handleMotionPreferenceChange = () => {
+      resetPointer();
+      if (reducedMotion.matches) {
+        cancelPendingFrame();
+        drawScene(false);
+      } else {
+        scheduleFrame();
+      }
+    };
+
+    const handleVisibilityChange = () => {
+      resetPointer();
+      if (isDocumentHidden()) {
+        cancelPendingFrame();
+      } else if (reducedMotion.matches) {
+        drawScene(false);
+      } else {
+        scheduleFrame();
+      }
+    };
+
     resize();
-    draw();
-    window.addEventListener("resize", resize);
+    if (reducedMotion.matches) drawScene(false);
+    else scheduleFrame();
+    window.addEventListener("resize", handleResize);
     window.addEventListener("mousemove", movePointer);
     window.addEventListener("mouseleave", resetPointer);
+    reducedMotion.addEventListener("change", handleMotionPreferenceChange);
+    document.addEventListener("visibilitychange", handleVisibilityChange);
     return () => {
-      window.removeEventListener("resize", resize);
+      window.removeEventListener("resize", handleResize);
       window.removeEventListener("mousemove", movePointer);
       window.removeEventListener("mouseleave", resetPointer);
-      if (animationFrame !== null) window.cancelAnimationFrame(animationFrame);
+      reducedMotion.removeEventListener("change", handleMotionPreferenceChange);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+      cancelPendingFrame();
     };
   }, []);
 
diff --git a/frontend/src/views/auth/LoginGraphBackground.test.tsx b/frontend/src/views/auth/LoginGraphBackground.test.tsx
new file mode 100644
index 0000000..169d4a4
--- /dev/null
+++ b/frontend/src/views/auth/LoginGraphBackground.test.tsx
@@ -0,0 +1,211 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { act, cleanup, render, screen } from "@testing-library/react";
+import { AuthScreen } from "./AuthView";
+
+vi.mock("../../viewmodels/useAuthViewModel", () => ({
+  useAuth: () => ({ login: vi.fn(), register: vi.fn(), notice: null }),
+}));
+
+vi.mock("../../models/navigation", () => ({
+  navigate: vi.fn(),
+  safeDestination: vi.fn(),
+  loginDestination: vi.fn(),
+}));
+
+type RafCallback = FrameRequestCallback;
+
+function createMediaQueryList(initialMatch: boolean) {
+  let matches = initialMatch;
+  const listeners = new Set<(event: MediaQueryListEvent) => void>();
+  const query = {
+    media: "(prefers-reduced-motion: reduce)",
+    get matches() { return matches; },
+    onchange: null,
+    addEventListener: vi.fn((type: string, listener: EventListenerOrEventListenerObject) => {
+      if (type === "change") listeners.add(listener as (event: MediaQueryListEvent) => void);
+    }),
+    removeEventListener: vi.fn((type: string, listener: EventListenerOrEventListenerObject) => {
+      if (type === "change") listeners.delete(listener as (event: MediaQueryListEvent) => void);
+    }),
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    dispatch(nextMatch: boolean) {
+      matches = nextMatch;
+      const event = { matches, media: query.media } as MediaQueryListEvent;
+      listeners.forEach(listener => listener(event));
+    },
+  };
+  return query;
+}
+
+function createCanvasContext() {
+  const gradient = { addColorStop: vi.fn() };
+  return {
+    clearRect: vi.fn(),
+    setTransform: vi.fn(),
+    createRadialGradient: vi.fn(() => gradient),
+    beginPath: vi.fn(),
+    arc: vi.fn(),
+    fill: vi.fn(),
+    moveTo: vi.fn(),
+    lineTo: vi.fn(),
+    stroke: vi.fn(),
+    fillStyle: "",
+    strokeStyle: "",
+    lineWidth: 1,
+    shadowColor: "",
+    shadowBlur: 0,
+  } as unknown as CanvasRenderingContext2D;
+}
+
+describe("fundo animado da autenticação", () => {
+  let mediaQuery: ReturnType<typeof createMediaQueryList>;
+  let context: CanvasRenderingContext2D;
+  let rafQueue: Map<number, RafCallback>;
+  let nextRafId: number;
+  let addWindowListener: ReturnType<typeof vi.spyOn>;
+  let removeWindowListener: ReturnType<typeof vi.spyOn>;
+  let addDocumentListener: ReturnType<typeof vi.spyOn>;
+  let removeDocumentListener: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    mediaQuery = createMediaQueryList(false);
+    context = createCanvasContext();
+    rafQueue = new Map();
+    nextRafId = 0;
+    Object.defineProperty(window, "devicePixelRatio", { configurable: true, value: 1 });
+
+    Object.defineProperty(window, "matchMedia", {
+      configurable: true,
+      writable: true,
+      value: vi.fn(() => mediaQuery as unknown as MediaQueryList),
+    });
+    vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue(context);
+    vi.spyOn(HTMLCanvasElement.prototype, "getBoundingClientRect").mockImplementation(() => ({
+      x: 0, y: 0, top: 0, left: 0, right: 800, bottom: 600, width: 800, height: 600,
+      toJSON: () => ({}),
+    } as DOMRect));
+
+    vi.spyOn(window, "requestAnimationFrame").mockImplementation(callback => {
+      const id = ++nextRafId;
+      rafQueue.set(id, callback);
+      return id;
+    });
+    vi.spyOn(window, "cancelAnimationFrame").mockImplementation(id => {
+      rafQueue.delete(id);
+    });
+
+    addWindowListener = vi.spyOn(window, "addEventListener");
+    removeWindowListener = vi.spyOn(window, "removeEventListener");
+    addDocumentListener = vi.spyOn(document, "addEventListener");
+    removeDocumentListener = vi.spyOn(document, "removeEventListener");
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+  });
+
+  const mount = (initialMode: "login" | "register" = "login") =>
+    render(<AuthScreen initialMode={initialMode} />);
+
+  it("renders a static frame without a continuous RAF loop when reduced motion is initially enabled", () => {
+    mediaQuery = createMediaQueryList(true);
+    vi.mocked(window.matchMedia).mockReturnValue(mediaQuery as unknown as MediaQueryList);
+
+    mount();
+
+    expect(context.clearRect).toHaveBeenCalledTimes(1);
+    expect(window.requestAnimationFrame).not.toHaveBeenCalled();
+    expect(rafQueue.size).toBe(0);
+  });
+
+  it("starts, pauses, and resumes animation as the motion preference changes", () => {
+    mount();
+    expect(rafQueue.size).toBe(1);
+
+    act(() => mediaQuery.dispatch(true));
+    expect(rafQueue.size).toBe(0);
+
+    act(() => mediaQuery.dispatch(false));
+    expect(rafQueue.size).toBe(1);
+    expect(mediaQuery.addEventListener).toHaveBeenCalledWith("change", expect.any(Function));
+  });
+
+  it("pauses while the document is hidden and resumes when it becomes visible", () => {
+    mount();
+    expect(rafQueue.size).toBe(1);
+
+    Object.defineProperty(document, "visibilityState", { configurable: true, value: "hidden" });
+    act(() => document.dispatchEvent(new Event("visibilitychange")));
+    expect(rafQueue.size).toBe(0);
+
+    Object.defineProperty(document, "visibilityState", { configurable: true, value: "visible" });
+    act(() => document.dispatchEvent(new Event("visibilitychange")));
+    expect(rafQueue.size).toBe(1);
+  });
+
+  it("resizes the backing canvas and reapplies the pixel-ratio transform", () => {
+    Object.defineProperty(window, "devicePixelRatio", { configurable: true, value: 2 });
+    const bounds = { width: 1024, height: 768 };
+    vi.spyOn(HTMLCanvasElement.prototype, "getBoundingClientRect").mockImplementation(() => ({
+      x: 0, y: 0, top: 0, left: 0, right: bounds.width, bottom: bounds.height,
+      width: bounds.width, height: bounds.height, toJSON: () => ({}),
+    } as DOMRect));
+    mount();
+    const canvas = document.querySelector("canvas")!;
+    expect(canvas.width).toBe(2048);
+    expect(canvas.height).toBe(1536);
+
+    bounds.width = 640;
+    bounds.height = 360;
+    act(() => window.dispatchEvent(new Event("resize")));
+
+    expect(canvas.width).toBe(1280);
+    expect(canvas.height).toBe(720);
+    expect(context.setTransform).toHaveBeenLastCalledWith(2, 0, 0, 2, 0, 0);
+  });
+
+  it("cancels pending RAF and removes registered listeners on unmount", () => {
+    const { unmount } = mount();
+    expect(rafQueue.size).toBe(1);
+    const relevantEvents = new Set(["resize", "mousemove", "mouseleave"]);
+    const windowCalls = addWindowListener.mock.calls as unknown as Array<[
+      string,
+      EventListenerOrEventListenerObject,
+      boolean | AddEventListenerOptions | undefined,
+    ]>;
+    const documentCalls = addDocumentListener.mock.calls as unknown as Array<[
+      string,
+      EventListenerOrEventListenerObject,
+      boolean | AddEventListenerOptions | undefined,
+    ]>;
+    const windowAdds = windowCalls.filter(([type]) => relevantEvents.has(type));
+    const documentAdds = documentCalls.filter(([type]) => type === "visibilitychange");
+
+    unmount();
+
+    expect(rafQueue.size).toBe(0);
+    expect(window.cancelAnimationFrame).toHaveBeenCalledWith(expect.any(Number));
+    for (const [type, listener] of windowAdds) {
+      expect(removeWindowListener.mock.calls).toContainEqual([type, listener]);
+    }
+    for (const [type, listener] of documentAdds) {
+      expect(removeDocumentListener.mock.calls).toContainEqual([type, listener]);
+    }
+    expect(mediaQuery.removeEventListener).toHaveBeenCalledWith("change", expect.any(Function));
+  });
+
+  it.each([
+    ["login" as const, "Entre na sua conta", "E-mail"],
+    ["register" as const, "Criar nova conta", "Nome Completo"],
+  ])("keeps the %s form usable with the decorative canvas", (mode, heading, field) => {
+    mount(mode);
+
+    expect(screen.getByRole("heading", { name: heading })).toBeTruthy();
+    expect(screen.getByLabelText(field)).toBeTruthy();
+    expect(screen.queryByRole("img", { hidden: true })).toBeNull();
+    expect(document.querySelector("canvas")).toHaveAttribute("aria-hidden", "true");
+  });
+});