refactor: replace GSAP animations with CSS animations across components

- Updated RootLayout to include a noise overlay class.
- Refactored LiveModerationFeed to use CSS animations for item entry.
- Simplified AmbientCanvas by removing WebGL and using pure CSS for ambient effects.
- Converted Chatbot to use CSS for floating window animations.
- Updated Card component to include a gradient border.
- Refactored PageTransition to use CSS for fade-scale animations.
- Enhanced SectionHeader with reveal-up animation class.
- Replaced GSAP animations in NavRail with CSS animations for item entry.
- Refactored VoiceStage to use CSS for speaker node animations and pulse rings.
- Removed GSAP dependencies from use-gsap-animation hook, implementing CSS-based stagger reveal.

services/frontend/src/app/(dashboard)/analysis/view.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import { useGSAP } from "@gsap/react";
-import gsap from "gsap";
 import { Hash, Search, Sparkles, TrendingUp } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { useAmbient } from "@/components/ambient/ambient-context";
@@ -16,10 +14,6 @@ import {
   renderMessageContent,
 } from "@/lib/format";
 
-if (typeof window !== "undefined") {
-  gsap.registerPlugin(useGSAP);
-}
-
 export function AnalysisView() {
   const [query, setQuery] = useState("");
   const search = useMessageSearch(query, query.trim().length >= 2);
@@ -44,88 +38,101 @@ export function AnalysisView() {
     );
   }, [query, ambient]);
 
-  // Count-up + bar-fill reveal for the reactor leaderboard — HUD gauge motif.
-  useGSAP(
-    () => {
-      if (!reactorsRef.current) return;
-      const bars = reactorsRef.current.querySelectorAll(".reactor-bar-fill");
-      const counters = reactorsRef.current.querySelectorAll(".reactor-count");
-      if (bars.length === 0) return;
-      const prefersReduced = window.matchMedia(
-        "(prefers-reduced-motion: reduce)",
-      ).matches;
-      if (prefersReduced) {
-        gsap.set(bars, { scaleX: 1 });
-        return;
-      }
-      gsap.fromTo(
-        bars,
-        { scaleX: 0 },
-        {
-          scaleX: 1,
-          duration: 0.7,
-          stagger: 0.06,
-          ease: "power2.out",
-          transformOrigin: "left center",
-        },
-      );
+  // Bar-fill reveal for reactor leaderboard — CSS animation
+  useEffect(() => {
+    const container = reactorsRef.current;
+    if (!container) return;
+    const bars = container.querySelectorAll<HTMLElement>(".reactor-bar-fill");
+    const counters = container.querySelectorAll<HTMLElement>(".reactor-count");
+    if (bars.length === 0) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      bars.forEach((el) => (el.style.transform = "scaleX(1)"));
       counters.forEach((el) => {
-        const target = Number(el.getAttribute("data-target") ?? "0");
-        const obj = { val: 0 };
-        gsap.to(obj, {
-          val: target,
-          duration: 0.8,
-          ease: "power2.out",
-          onUpdate: () => {
-            el.textContent = `+${Math.round(obj.val)}`;
-          },
-        });
+        el.textContent = `+${el.getAttribute("data-target") ?? "0"}`;
       });
-    },
-    { scope: reactorsRef, dependencies: [reactors] },
-  );
+      return;
+    }
 
-  useGSAP(
-    () => {
-      if (!channelsRef.current) return;
-      const rows = channelsRef.current.querySelectorAll(".channel-row");
-      if (rows.length === 0) return;
-      const prefersReduced = window.matchMedia(
-        "(prefers-reduced-motion: reduce)",
-      ).matches;
-      if (prefersReduced) {
-        gsap.set(rows, { opacity: 1, x: 0 });
-        return;
-      }
-      gsap.fromTo(
-        rows,
-        { opacity: 0, x: -10 },
-        {
-          opacity: 1,
-          x: 0,
-          duration: 0.35,
-          stagger: 0.04,
-          ease: "power2.out",
-          clearProps: "transform",
-        },
-      );
-    },
-    { scope: channelsRef, dependencies: [channels] },
-  );
+    bars.forEach((el, i) => {
+      el.style.transformOrigin = "left center";
+      el.style.animationFillMode = "forwards";
+      el.style.animationTimingFunction = "ease-out";
+      el.style.animationName = "bar-fill-in";
+      el.style.animationDuration = "0.7s";
+      el.style.animationDelay = `${i * 0.06}s`;
+    });
+
+    // Simple counter animation using rAF
+    counters.forEach((el) => {
+      const target = Number(el.getAttribute("data-target") ?? "0");
+      const start = performance.now();
+      const duration = 800;
+      const step = (now: number) => {
+        const progress = Math.min((now - start) / duration, 1);
+        const eased = 1 - (1 - progress) ** 3;
+        el.textContent = `+${Math.round(target * eased)}`;
+        if (progress < 1) requestAnimationFrame(step);
+      };
+      requestAnimationFrame(step);
+    });
+
+    return () => {
+      bars.forEach((el) => {
+        el.style.removeProperty("animation-name");
+        el.style.removeProperty("animation-duration");
+        el.style.removeProperty("animation-delay");
+        el.style.removeProperty("animation-fill-mode");
+        el.style.removeProperty("animation-timing-function");
+        el.style.removeProperty("transform-origin");
+      });
+    };
+  }, [reactors]);
+
+  // Channel rows stagger slide-in — CSS animation
+  useEffect(() => {
+    const container = channelsRef.current;
+    if (!container) return;
+    const rows = container.querySelectorAll<HTMLElement>(".channel-row");
+    if (rows.length === 0) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+    rows.forEach((el, i) => {
+      el.style.opacity = "0";
+      el.style.animationFillMode = "forwards";
+      el.style.animationTimingFunction = "ease-out";
+      el.style.animationName = "stagger-slide-in";
+      el.style.animationDuration = "0.35s";
+      el.style.animationDelay = `${i * 0.04}s`;
+    });
+
+    return () => {
+      rows.forEach((el) => {
+        el.style.removeProperty("opacity");
+        el.style.removeProperty("animation-name");
+        el.style.removeProperty("animation-duration");
+        el.style.removeProperty("animation-delay");
+        el.style.removeProperty("animation-fill-mode");
+        el.style.removeProperty("animation-timing-function");
+      });
+    };
+  }, [channels]);
 
   return (
     <div className="space-y-4">
       {/* Tactical HUD Header Bar */}
       <div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
         <div className="flex items-center gap-2.5">
-          <span className="h-2 w-2 rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
+          <span className="h-2 w-2 rounded-full bg-signal glow-pulse" />
           <h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
             Deep Scan · Semantic Search & Telemetry Analysis
           </h1>
         </div>
         <div className="flex items-center gap-2 font-mono text-[11px] text-ink-muted">
           <span>ENGINE:</span>
-          <span className="rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30">
+          <span
+            className="glitch-text rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30"
+            data-text={query.trim().length >= 2 ? "SCANNING" : "STANDBY"}
+          >
             {query.trim().length >= 2 ? "SCANNING" : "STANDBY"}
           </span>
         </div>

services/frontend/src/app/(dashboard)/dashboard/view.tsx

@@ -105,7 +105,7 @@ export function DashboardView({
         {/* Tactical HUD Header Bar */}
         <div className="linear-tile flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
           <div className="flex items-center gap-2.5">
-            <span className="h-2 w-2 rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
+            <span className="h-2 w-2 rounded-full bg-signal glow-pulse" />
             <h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
               Telemetry Overview · Node 01
             </h1>

services/frontend/src/app/(dashboard)/messages/view.tsx

@@ -236,7 +236,7 @@ export function MessagesView({
       {/* Tactical HUD Header Bar */}
       <div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
         <div className="flex items-center gap-2.5">
-          <span className="h-2 w-2 rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
+          <span className="h-2 w-2 rounded-full bg-signal glow-pulse" />
           <h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
             Chat Log Stream · Ingestion Stream
           </h1>
@@ -249,7 +249,10 @@ export function MessagesView({
         </div>
         <div className="flex items-center gap-2 font-mono text-[11px] text-ink-muted">
           <span>MODE:</span>
-          <span className="rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30">
+          <span
+            className="glitch-text rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30"
+            data-text={searching ? "SEARCH_ACTIVE" : viewMode.toUpperCase()}
+          >
             {searching ? "SEARCH_ACTIVE" : viewMode.toUpperCase()}
           </span>
         </div>
@@ -407,6 +410,7 @@ export function MessagesView({
                     <span className="flex items-center gap-1.5 font-mono text-xs text-ink-muted">
                       <Loader2 className="size-3.5 animate-spin text-signal" />
                       FETCHING EARLIER PACKETS...
+                      <span className="typing-dots"><span /><span /><span /></span>
                     </span>
                   ) : hasMore && loadedPages < MAX_OLDER_PAGES ? (
                     <button

services/frontend/src/app/(dashboard)/moderation/view.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import { useGSAP } from "@gsap/react";
-import gsap from "gsap";
 import { AlertTriangle, CheckCircle2, Shield } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useAmbient } from "@/components/ambient/ambient-context";
@@ -29,10 +27,6 @@ import type {
   ModerationStats,
 } from "@/lib/types";
 
-if (typeof window !== "undefined") {
-  gsap.registerPlugin(useGSAP);
-}
-
 export function ModerationView({
   initialStats,
   initialActions,

services/frontend/src/app/(dashboard)/recordings/view.tsx

@@ -144,14 +144,17 @@ export function RecordingsView({
       {/* Tactical HUD Header Bar */}
       <div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
         <div className="flex items-center gap-2.5">
-          <span className="h-2 w-2 rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
+          <span className="h-2 w-2 rounded-full bg-signal glow-pulse" />
           <h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
             Tape Deck · Captured Audio Archive
           </h1>
         </div>
         <div className="flex items-center gap-2 font-mono text-[11px] text-ink-muted">
           <span>STATUS:</span>
-          <span className="rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30">
+          <span
+            className="glitch-text rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30"
+            data-text={`${totalRecordings} CLIPS_LOADED`}
+          >
             {totalRecordings} CLIPS_LOADED
           </span>
         </div>
@@ -289,6 +292,7 @@ export function RecordingsView({
                 <span className="flex items-center justify-center gap-2 font-mono text-xs text-ink-muted">
                   <Loader2 className="size-4 animate-spin text-signal" />
                   LOADING EARLIER RECORDINGS...
+                  <span className="typing-dots"><span /><span /><span /></span>
                 </span>
               ) : hasMore && loadedPages < MAX_OLDER_PAGES ? (
                 <button

services/frontend/src/app/globals.css

@@ -162,6 +162,79 @@
     transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
   }
 
+  /* ── Ambient CSS Background (replaces WebGL/three.js) ── */
+  .ambient-blob {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(80px);
+    opacity: calc(var(--ab-alpha, 0.35) * 0.8);
+    will-change: transform;
+  }
+
+  .ambient-blob-1 {
+    width: 50vw;
+    height: 50vw;
+    top: -10%;
+    left: 20%;
+    background: rgb(var(--ab-r, 45) var(--ab-g, 212) var(--ab-b, 191) / 0.25);
+    animation: ambient-drift-1 25s ease-in-out infinite alternate;
+  }
+
+  .ambient-blob-2 {
+    width: 40vw;
+    height: 40vw;
+    bottom: 10%;
+    right: -5%;
+    background: rgb(var(--ab-r, 45) var(--ab-g, 212) var(--ab-b, 191) / 0.18);
+    animation: ambient-drift-2 30s ease-in-out infinite alternate;
+  }
+
+  .ambient-blob-3 {
+    width: 35vw;
+    height: 35vw;
+    top: 40%;
+    left: -10%;
+    background: rgb(var(--ab-r, 45) var(--ab-g, 212) var(--ab-b, 191) / 0.15);
+    animation: ambient-drift-3 20s ease-in-out infinite alternate;
+  }
+
+  @keyframes ambient-drift-1 {
+    0%   { transform: translate(0, 0) scale(1); }
+    100% { transform: translate(8vw, 5vh) scale(1.15); }
+  }
+  @keyframes ambient-drift-2 {
+    0%   { transform: translate(0, 0) scale(1); }
+    100% { transform: translate(-6vw, -8vh) scale(1.1); }
+  }
+  @keyframes ambient-drift-3 {
+    0%   { transform: translate(0, 0) scale(0.9); }
+    100% { transform: translate(5vw, 6vh) scale(1.1); }
+  }
+
+  /* Floating motes — tiny dots drifting upward */
+  .ambient-motes {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+  }
+
+  .ambient-mote {
+    position: absolute;
+    bottom: -4px;
+    width: 2px;
+    height: 2px;
+    border-radius: 50%;
+    background: rgb(var(--ab-r, 45) var(--ab-g, 212) var(--ab-b, 191) / 0.5);
+    animation: mote-rise linear infinite;
+  }
+
+  @keyframes mote-rise {
+    0%   { transform: translateY(0) translateX(0); opacity: 0; }
+    10%  { opacity: 0.6; }
+    90%  { opacity: 0.4; }
+    100% { transform: translateY(-100vh) translateX(20px); opacity: 0; }
+  }
+
   .glass:hover {
     border-color: var(--panel-border-hover);
   }
@@ -174,12 +247,246 @@
     border-radius: var(--radius-r-panel);
     backdrop-filter: blur(12px);
     box-shadow: var(--shadow-hud);
-    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
   }
 
   .hud-card:hover {
     border-color: var(--panel-border-hover);
-    transform: translateY(-1px);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-hud), 0 8px 32px -8px rgba(45, 212, 191, 0.08);
+  }
+
+  /* ── Noise grain overlay (applied via pseudo-element) ── */
+  .noise-overlay::after {
+    content: "";
+    position: fixed;
+    inset: 0;
+    z-index: 9998;
+    pointer-events: none;
+    opacity: 0.025;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+    background-repeat: repeat;
+    background-size: 128px 128px;
+  }
+
+  /* ── Animated gradient border (use on glass panels) ── */
+  .gradient-border {
+    position: relative;
+    overflow: hidden;
+  }
+  .gradient-border::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1px;
+    background: conic-gradient(
+      from var(--gb-angle, 0deg),
+      transparent 40%,
+      var(--color-signal) 50%,
+      transparent 60%
+    );
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    animation: gradient-rotate 4s linear infinite;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+  }
+  .gradient-border:hover::before {
+    opacity: 1;
+  }
+
+  @keyframes gradient-rotate {
+    to { --gb-angle: 360deg; }
+  }
+
+  @property --gb-angle {
+    syntax: "<angle>";
+    initial-value: 0deg;
+    inherits: false;
+  }
+
+  /* ── Glitch text effect (use on status labels) ── */
+  .glitch-text {
+    position: relative;
+  }
+  .glitch-text::before,
+  .glitch-text::after {
+    content: attr(data-text);
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  .glitch-text::before {
+    color: var(--color-signal);
+    animation: glitch-shift-1 3s infinite steps(2);
+    clip-path: inset(0 0 65% 0);
+  }
+  .glitch-text::after {
+    color: var(--color-vermilion);
+    animation: glitch-shift-2 3s infinite steps(2);
+    clip-path: inset(65% 0 0 0);
+  }
+
+  @keyframes glitch-shift-1 {
+    0%, 92% { transform: translate(0); }
+    93% { transform: translate(-2px, 1px); }
+    94% { transform: translate(2px, -1px); }
+    95%, 100% { transform: translate(0); }
+  }
+  @keyframes glitch-shift-2 {
+    0%, 94% { transform: translate(0); }
+    95% { transform: translate(2px, 1px); }
+    96% { transform: translate(-1px, -1px); }
+    97%, 100% { transform: translate(0); }
+  }
+
+  /* ── Terminal cursor blink ── */
+  .cursor-blink::after {
+    content: "█";
+    animation: cursor-blink 1s step-end infinite;
+    color: var(--color-signal);
+    margin-left: 2px;
+  }
+
+  @keyframes cursor-blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0; }
+  }
+
+  /* ── Radar sweep ── */
+  .radar-sweep {
+    position: relative;
+    overflow: hidden;
+  }
+  .radar-sweep::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 50%;
+    height: 2px;
+    transform-origin: left center;
+    background: linear-gradient(90deg, var(--color-signal), transparent);
+    animation: radar-spin 3s linear infinite;
+    opacity: 0.4;
+  }
+
+  @keyframes radar-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  /* ── Data flash — quick bright pulse on content update ── */
+  .data-flash {
+    animation: data-flash 0.5s ease-out;
+  }
+
+  @keyframes data-flash {
+    0% { background-color: rgba(45, 212, 191, 0.15); }
+    100% { background-color: transparent; }
+  }
+
+  /* ── Border trace — animated border drawing effect ── */
+  .border-trace {
+    position: relative;
+  }
+  .border-trace::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    border: 1px solid transparent;
+    background: linear-gradient(var(--panel-bg), var(--panel-bg)) padding-box,
+                linear-gradient(var(--trace-angle, 0deg), transparent 30%, var(--color-signal) 50%, transparent 70%) border-box;
+    animation: trace-rotate 3s linear infinite;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+  .border-trace:hover::before {
+    opacity: 0.6;
+  }
+
+  @keyframes trace-rotate {
+    to { --trace-angle: 360deg; }
+  }
+
+  @property --trace-angle {
+    syntax: "<angle>";
+    initial-value: 0deg;
+    inherits: false;
+  }
+
+  /* ── Typing dots (loading indicator) ── */
+  .typing-dots span {
+    display: inline-block;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: var(--color-signal);
+    animation: typing-bounce 1.4s ease-in-out infinite;
+    margin: 0 2px;
+  }
+  .typing-dots span:nth-child(2) { animation-delay: 0.15s; }
+  .typing-dots span:nth-child(3) { animation-delay: 0.3s; }
+
+  @keyframes typing-bounce {
+    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
+    30% { transform: translateY(-4px); opacity: 1; }
+  }
+
+  /* ── Glow pulse — breathing glow for live indicators ── */
+  .glow-pulse {
+    animation: glow-pulse 2s ease-in-out infinite;
+  }
+
+  @keyframes glow-pulse {
+    0%, 100% { box-shadow: 0 0 4px 1px var(--color-signal-glow); }
+    50% { box-shadow: 0 0 12px 3px var(--color-signal-glow); }
+  }
+
+  /* ── Reveal slide-up — elements rising into view ── */
+  .reveal-up {
+    opacity: 0;
+    transform: translateY(12px);
+    animation: reveal-up 0.5s ease-out forwards;
+  }
+
+  @keyframes reveal-up {
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  /* ── Number ticker — digit roll effect ── */
+  .ticker-digit {
+    display: inline-block;
+    overflow: hidden;
+    height: 1.2em;
+    line-height: 1.2;
+  }
+  .ticker-digit-inner {
+    animation: ticker-roll 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  }
+
+  @keyframes ticker-roll {
+    from { transform: translateY(-100%); }
+    to { transform: translateY(0); }
+  }
+
+  /* ── Status indicator colors ── */
+  .status-live {
+    animation: glow-pulse 2s ease-in-out infinite;
+    background: var(--color-success);
+  }
+  .status-warning {
+    animation: glow-pulse 2s ease-in-out infinite;
+    background: var(--color-amber);
+  }
+  .status-error {
+    animation: glow-pulse 1.5s ease-in-out infinite;
+    background: var(--color-vermilion);
   }
 
   .eyebrow {
@@ -270,6 +577,36 @@
   to { opacity: 1; transform: translateY(0); }
 }
 
+@keyframes stagger-in {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes stagger-slide-in {
+  from { opacity: 0; transform: translateX(-8px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes scale-bounce-in {
+  from { opacity: 0; transform: scale(0.7); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes bar-fill-in {
+  from { transform: scaleX(0); }
+  to { transform: scaleX(1); }
+}
+
+@keyframes pulse-ring {
+  0%, 100% { transform: scale(1); opacity: 0.2; }
+  50% { transform: scale(1.18); opacity: 0.45; }
+}
+
+@keyframes fade-scale-in {
+  from { opacity: 0; transform: scale(0.95) translateY(15px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
 @keyframes toast-in {
   from { opacity: 0; transform: translateY(8px) scale(0.98); }
   to { opacity: 1; transform: translateY(0) scale(1); }
@@ -353,7 +690,15 @@
   .animate-eq,
   .animate-fade-up,
   .animate-toast-in,
-  .scan-line {
+  .scan-line,
+  .ambient-blob,
+  .ambient-mote,
+  .glitch-text::before,
+  .glitch-text::after,
+  .cursor-blink::after,
+  .radar-sweep::after,
+  .border-trace::before,
+  .gradient-border::before {
     animation: none !important;
   }
   *,

services/frontend/src/app/layout.tsx

@@ -59,7 +59,7 @@ export default function RootLayout({
           }}
         />
       </head>
-      <body className="min-h-full flex flex-col">
+      <body className="noise-overlay min-h-full flex flex-col">
         <SwrProvider>
           <ThemeProvider
             attribute="class"