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/package.json

@@ -10,10 +10,8 @@
     "format": "biome format --write"
   },
   "dependencies": {
-    "@gsap/react": "^2.1.2",
     "@orpc/client": "1.15.0",
     "clsx": "^2.1.1",
-    "gsap": "^3.15.0",
     "lucide-react": "^1.33.0",
     "next": "16.3.2",
     "next-themes": "^0.4.6",
@@ -21,8 +19,7 @@
     "react": "19.2.8",
     "react-dom": "19.2.8",
     "swr": "^2.5.1",
-    "tailwind-merge": "^3.6.0",
+    "tailwind-merge": "^3.6.0"
-    "three": "^0.185.1"
   },
   "devDependencies": {
     "@biomejs/biome": "2.5.10",

services/frontend/pnpm-lock.yaml

@@ -8,18 +8,12 @@ importers:
 
   .:
     dependencies:
-      '@gsap/react':
-        specifier: ^2.1.2
-        version: 2.1.2(gsap@3.15.0)(react@19.2.8)
       '@orpc/client':
         specifier: 1.15.0
         version: 1.15.0
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
-      gsap:
-        specifier: ^3.15.0
-        version: 3.15.0
       lucide-react:
         specifier: ^1.33.0
         version: 1.33.0(react@19.2.8)
@@ -44,9 +38,6 @@ importers:
       tailwind-merge:
         specifier: ^3.6.0
         version: 3.6.0
-      three:
-        specifier: ^0.185.1
-        version: 0.185.1
     devDependencies:
       '@biomejs/biome':
         specifier: 2.5.10
@@ -215,12 +206,6 @@ packages:
   '@emnapi/runtime@1.11.3':
     resolution: {integrity: sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==}
 
-  '@gsap/react@2.1.2':
-    resolution: {integrity: sha512-JqliybO1837UcgH2hVOM4VO+38APk3ECNrsuSM4MuXp+rbf+/2IG2K1YJiqfTcXQHH7XlA0m3ykniFYstfq0Iw==}
-    peerDependencies:
-      gsap: ^3.12.5
-      react: '>=17'
-
   '@img/colour@1.1.0':
     resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
     engines: {node: '>=18'}
@@ -827,9 +812,6 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
-  gsap@3.15.0:
-    resolution: {integrity: sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==}
-
   jiti@2.7.0:
     resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
     hasBin: true
@@ -1091,9 +1073,6 @@ packages:
     resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
     engines: {node: '>=6'}
 
-  three@0.185.1:
-    resolution: {integrity: sha512-5aojFCXKwnjBRZvUnt3WFfEcvUJgkN5LlijRFN95hMy8WVkG4I0QNcJE+OuWvuJ0bOdStrbfXn0pkd6/QyiAlg==}
-
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -1319,11 +1298,6 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@gsap/react@2.1.2(gsap@3.15.0)(react@19.2.8)':
-    dependencies:
-      gsap: 3.15.0
-      react: 19.2.8
-
   '@img/colour@1.1.0':
     optional: true
 
@@ -1753,8 +1727,6 @@ snapshots:
 
   graceful-fs@4.2.11: {}
 
-  gsap@3.15.0: {}
-
   jiti@2.7.0: {}
 
   js-tokens@4.0.0:
@@ -1998,8 +1970,6 @@ snapshots:
 
   tapable@2.3.3: {}
 
-  three@0.185.1: {}
-
   tslib@2.8.1: {}
 
   type-fest@5.8.0:

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.
+  // Bar-fill reveal for reactor leaderboard — CSS animation
-  useGSAP(
+  useEffect(() => {
-    () => {
+    const container = reactorsRef.current;
-      if (!reactorsRef.current) return;
+    if (!container) return;
-      const bars = reactorsRef.current.querySelectorAll(".reactor-bar-fill");
+    const bars = container.querySelectorAll<HTMLElement>(".reactor-bar-fill");
-      const counters = reactorsRef.current.querySelectorAll(".reactor-count");
+    const counters = container.querySelectorAll<HTMLElement>(".reactor-count");
-      if (bars.length === 0) return;
+    if (bars.length === 0) return;
-      const prefersReduced = window.matchMedia(
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
-        "(prefers-reduced-motion: reduce)",
+      bars.forEach((el) => (el.style.transform = "scaleX(1)"));
-      ).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",
-        },
-      );
       counters.forEach((el) => {
-        const target = Number(el.getAttribute("data-target") ?? "0");
+        el.textContent = `+${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)}`;
-          },
-        });
       });
-    },
+      return;
-    { scope: reactorsRef, dependencies: [reactors] },
+    }
-  );
 
-  useGSAP(
+    bars.forEach((el, i) => {
-    () => {
+      el.style.transformOrigin = "left center";
-      if (!channelsRef.current) return;
+      el.style.animationFillMode = "forwards";
-      const rows = channelsRef.current.querySelectorAll(".channel-row");
+      el.style.animationTimingFunction = "ease-out";
-      if (rows.length === 0) return;
+      el.style.animationName = "bar-fill-in";
-      const prefersReduced = window.matchMedia(
+      el.style.animationDuration = "0.7s";
-        "(prefers-reduced-motion: reduce)",
+      el.style.animationDelay = `${i * 0.06}s`;
-      ).matches;
+    });
-      if (prefersReduced) {
+
-        gsap.set(rows, { opacity: 1, x: 0 });
+    // Simple counter animation using rAF
-        return;
+    counters.forEach((el) => {
-      }
+      const target = Number(el.getAttribute("data-target") ?? "0");
-      gsap.fromTo(
+      const start = performance.now();
-        rows,
+      const duration = 800;
-        { opacity: 0, x: -10 },
+      const step = (now: number) => {
-        {
+        const progress = Math.min((now - start) / duration, 1);
-          opacity: 1,
+        const eased = 1 - (1 - progress) ** 3;
-          x: 0,
+        el.textContent = `+${Math.round(target * eased)}`;
-          duration: 0.35,
+        if (progress < 1) requestAnimationFrame(step);
-          stagger: 0.04,
+      };
-          ease: "power2.out",
+      requestAnimationFrame(step);
-          clearProps: "transform",
+    });
-        },
+
-      );
+    return () => {
-    },
+      bars.forEach((el) => {
-    { scope: channelsRef, dependencies: [channels] },
+        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"

services/frontend/src/components/LiveModerationFeed.tsx

@@ -1,17 +1,11 @@
 "use client";
 
-import { useGSAP } from "@gsap/react";
-import gsap from "gsap";
 import { CheckCircle2, ShieldAlert, UserX, VolumeX } from "lucide-react";
-import { useRef } from "react";
+import { useRef, useEffect } from "react";
 import { Badge } from "@/components/primitives";
 import { formatRelativeTime } from "@/lib/format";
 import type { ModerationAction } from "@/lib/types";
 
-if (typeof window !== "undefined") {
-  gsap.registerPlugin(useGSAP);
-}
-
 const ACTION_LABEL: Record<string, string> = {
   delete_message: "Deleted",
   timeout_user: "Timeout",
@@ -61,32 +55,33 @@ export function LiveModerationFeed({
 }) {
   const feedRef = useRef<HTMLDivElement>(null);
 
-  useGSAP(
+  useEffect(() => {
-    () => {
+    const container = feedRef.current;
-      if (!feedRef.current) return;
+    if (!container) return;
-      const items = feedRef.current.querySelectorAll(".mod-feed-item");
+    const items = container.querySelectorAll<HTMLElement>(".mod-feed-item");
-      if (items.length === 0) return;
+    if (items.length === 0) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
 
-      const prefersReduced = window.matchMedia(
+    items.forEach((el, i) => {
-        "(prefers-reduced-motion: reduce)",
+      el.style.opacity = "0";
-      ).matches;
+      el.style.animationFillMode = "forwards";
-      if (prefersReduced) return;
+      el.style.animationTimingFunction = "ease-out";
+      el.style.animationName = "stagger-slide-in";
+      el.style.animationDuration = "0.32s";
+      el.style.animationDelay = `${i * 0.025}s`;
+    });
 
-      gsap.fromTo(
+    return () => {
-        items,
+      items.forEach((el) => {
-        { opacity: 0, x: -8 },
+        el.style.removeProperty("opacity");
-        {
+        el.style.removeProperty("animation-name");
-          opacity: 1,
+        el.style.removeProperty("animation-duration");
-          x: 0,
+        el.style.removeProperty("animation-delay");
-          duration: 0.32,
+        el.style.removeProperty("animation-fill-mode");
-          stagger: 0.025,
+        el.style.removeProperty("animation-timing-function");
-          ease: "power2.out",
+      });
-          clearProps: "transform",
+    };
-        },
+  }, [actions.length]);
-      );
-    },
-    { scope: feedRef, dependencies: [actions.length] },
-  );
 
   return (
     <div className="flex max-h-[460px] flex-col">
@@ -147,7 +142,7 @@ export function LiveModerationFeed({
 
                   {a.reason && (
                     <p className="mt-1 font-sans text-xs text-ink-soft line-clamp-2">
-                      “{a.reason}”
+                      &ldquo;{a.reason}&rdquo;
                     </p>
                   )}
 

services/frontend/src/components/ambient/ambient-canvas.tsx

@@ -1,60 +1,20 @@
 "use client";
 
 import { useEffect, useRef } from "react";
-import * as THREE from "three";
 import { SIGNAL_RGB, type SignalTone } from "./ambient-context";
 
-const VERT = /* glsl */ `
+/**
-  varying vec2 vUv;
+ * Pure CSS ambient background — no WebGL, no three.js.
-  void main(){
+ * Multiple blurred gradient blobs drift via CSS keyframes.
-    vUv = uv;
+ * Tone & intensity are driven by CSS custom properties updated from the
-    gl_Position = vec4(position.xy, 0.0, 1.0);
+ * ref (no React re-renders per frame).
-  }
+ */
-`;
 
-const FRAG = /* glsl */ `
+const TONE_css: Record<SignalTone, string> = {
-  precision mediump float;
+  signal: "45, 212, 191",
-  varying vec2 vUv;
+  amber: "245, 158, 11",
-  uniform float uTime;
+  vermilion: "239, 68, 68",
-  uniform vec3 uColor;
+};
-  uniform float uIntensity;
-  uniform vec2 uRes;
-
-  float hash(vec2 p){ p=fract(p*vec2(123.34,456.21)); p+=dot(p,p+45.32); return fract(p.x*p.y); }
-  float noise(vec2 p){
-    vec2 i=floor(p); vec2 f=fract(p);
-    float a=hash(i), b=hash(i+vec2(1.,0.)), c=hash(i+vec2(0.,1.)), d=hash(i+vec2(1.,1.));
-    vec2 u=f*f*(3.-2.*f);
-    return mix(mix(a,b,u.x),mix(c,d,u.x),u.y);
-  }
-  float fbm(vec2 p){
-    float v=0.0, a=0.5;
-    mat2 m=mat2(1.6,1.2,-1.2,1.6);
-    for(int i=0;i<5;i++){ v+=a*noise(p); p=m*p; a*=0.5; }
-    return v;
-  }
-
-  void main(){
-    vec2 uv=vUv;
-    vec2 p=uv-0.5;
-    p.x*=uRes.x/uRes.y;
-    float t=uTime*0.04*(0.6+uIntensity);
-    vec2 q=vec2(fbm(p*1.5+t), fbm(p*1.5-t+5.0));
-    float f=fbm(p*2.2 + q*1.8 + t*0.5);
-    vec2 c=vec2(sin(uTime*0.05)*0.25, cos(uTime*0.04)*0.18);
-    float d=length(p-c);
-    float glow=smoothstep(0.95,0.0,d)*0.5;
-    float haze=(f*0.7+glow)*uIntensity;
-    vec3 col=uColor*haze;
-    float g=hash(uv*uRes+uTime)*0.035;
-    col+=g;
-    float vig=smoothstep(1.25,0.15,length(p));
-    col*=0.35+0.65*vig;
-    gl_FragColor=vec4(col,1.0);
-  }
-`;
-
-const MOTE_COUNT = 140;
 
 export function AmbientCanvas({
   targetRef,
@@ -67,168 +27,62 @@ export function AmbientCanvas({
     const mount = mountRef.current;
     if (!mount) return;
 
-    // Lightness gate: skip the WebGL layer entirely on small/coarse/data-saver
-    // devices — the static CSS fallback below stays. Desktop keeps the haze.
-    const nav = navigator as Navigator & {
-      connection?: { saveData?: boolean; deviceMemory?: number };
-      deviceMemory?: number;
-    };
-    const lightDevice =
-      window.matchMedia("(max-width: 767px)").matches ||
-      window.matchMedia("(pointer: coarse)").matches ||
-      nav.connection?.saveData === true ||
-      (nav.deviceMemory ?? 8) <= 4;
-    if (lightDevice) return;
-
-    let renderer: THREE.WebGLRenderer;
-    try {
-      renderer = new THREE.WebGLRenderer({
-        antialias: false,
-        alpha: false,
-        powerPreference: "high-performance",
-      });
-    } catch {
-      return; // static CSS fallback remains
-    }
-
     const reduce = window.matchMedia(
       "(prefers-reduced-motion: reduce)",
     ).matches;
-    const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
+    if (reduce) return;
-    renderer.setPixelRatio(dpr);
-    renderer.setSize(mount.clientWidth, mount.clientHeight);
-    mount.appendChild(renderer.domElement);
-    renderer.domElement.style.width = "100%";
-    renderer.domElement.style.height = "100%";
-    renderer.domElement.style.display = "block";
 
-    const scene = new THREE.Scene();
-    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
-
-    const uniforms = {
-      uTime: { value: 0 },
-      uColor: { value: new THREE.Color(...SIGNAL_RGB.signal) },
-      uIntensity: { value: 0.35 },
-      uRes: { value: new THREE.Vector2(1, 1) },
-    };
-
-    const quad = new THREE.Mesh(
-      new THREE.PlaneGeometry(2, 2),
-      new THREE.ShaderMaterial({
-        vertexShader: VERT,
-        fragmentShader: FRAG,
-        uniforms,
-        depthTest: false,
-        depthWrite: false,
-      }),
-    );
-    scene.add(quad);
-
-    // — Drifting motes —
-    const positions = new Float32Array(MOTE_COUNT * 3);
-    const speeds = new Float32Array(MOTE_COUNT);
-    for (let i = 0; i < MOTE_COUNT; i++) {
-      positions[i * 3] = (Math.random() - 0.5) * 2;
-      positions[i * 3 + 1] = (Math.random() - 0.5) * 2;
-      positions[i * 3 + 2] = 0;
-      speeds[i] = 0.01 + Math.random() * 0.03;
-    }
-    const geo = new THREE.BufferGeometry();
-    geo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
-    const moteMat = new THREE.PointsMaterial({
-      size: 0.012,
-      color: new THREE.Color(...SIGNAL_RGB.signal),
-      transparent: true,
-      opacity: 0.5,
-      blending: THREE.AdditiveBlending,
-      depthTest: false,
-      depthWrite: false,
-    });
-    const motes = new THREE.Points(geo, moteMat);
-    scene.add(motes);
-
-    const color = new THREE.Color();
-    const target = new THREE.Color();
-    let targetIntensity = 0.35;
-    let intensity = 0.35;
     let raf = 0;
     let last = performance.now();
-    let running = !reduce;
 
-    const resize = () => {
+    // Lerp state
-      const w = mount.clientWidth || 1;
+    let r = 45, g = 212, b = 191;
-      const h = mount.clientHeight || 1;
+    let targetR = 45, targetG = 212, targetB = 191;
-      renderer.setSize(w, h);
+    let intensity = 0.35;
-      uniforms.uRes.value.set(w * dpr, h * dpr);
+    let targetIntensity = 0.35;
-    };
-    const ro = new ResizeObserver(resize);
-    ro.observe(mount);
-    resize();
-
-    const onVisibility = () => {
-      running = !document.hidden && !reduce;
-      if (running) {
-        last = performance.now();
-        loop();
-      }
-    };
-    document.addEventListener("visibilitychange", onVisibility);
 
     const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
 
     const frame = (now: number) => {
       const dt = Math.min((now - last) / 1000, 0.05);
       last = now;
-      uniforms.uTime.value += dt;
 
-      // Ease toward target signal/intensity each frame (no React re-render).
       const tgt = targetRef.current;
-      target.set(...SIGNAL_RGB[tgt.tone]);
+      const [tr, tg, tb] = TONE_css[tgt.tone].split(",").map(Number);
-      color.lerp(target, 0.04);
+      targetR = tr;
-      uniforms.uColor.value.copy(color);
+      targetG = tg;
-      moteMat.color.copy(color);
+      targetB = tb;
-      targetIntensity = 0.2 + tgt.intensity * 0.8;
+      targetIntensity = 0.15 + tgt.intensity * 0.85;
-      intensity = lerp(intensity, targetIntensity, 0.04);
-      uniforms.uIntensity.value = intensity;
 
-      const pos = geo.attributes.position as THREE.BufferAttribute;
+      r = lerp(r, targetR, 0.03);
-      for (let i = 0; i < MOTE_COUNT; i++) {
+      g = lerp(g, targetG, 0.03);
-        let y = pos.getY(i) + speeds[i] * dt * (0.5 + tgt.intensity);
+      b = lerp(b, targetB, 0.03);
-        if (y > 1.1) y = -1.1;
+      intensity = lerp(intensity, targetIntensity, 0.03);
-        pos.setY(i, y);
-      }
-      pos.needsUpdate = true;
 
-      renderer.render(scene, camera);
+      const root = mount;
-      if (running) raf = requestAnimationFrame(frame);
+      root.style.setProperty("--ab-r", String(Math.round(r)));
-    };
+      root.style.setProperty("--ab-g", String(Math.round(g)));
+      root.style.setProperty("--ab-b", String(Math.round(b)));
+      root.style.setProperty("--ab-alpha", intensity.toFixed(3));
 
-    const loop = () => {
-      if (raf) cancelAnimationFrame(raf);
-      last = performance.now();
       raf = requestAnimationFrame(frame);
     };
 
-    if (reduce) {
+    raf = requestAnimationFrame(frame);
-      // single static frame
+
-      uniforms.uIntensity.value = 0.3;
+    const onVisibility = () => {
-      renderer.render(scene, camera);
+      if (document.hidden) {
-    } else {
+        cancelAnimationFrame(raf);
-      loop();
+      } else {
-    }
+        last = performance.now();
+        raf = requestAnimationFrame(frame);
+      }
+    };
+    document.addEventListener("visibilitychange", onVisibility);
 
     return () => {
       cancelAnimationFrame(raf);
-      ro.disconnect();
       document.removeEventListener("visibilitychange", onVisibility);
-      geo.dispose();
-      moteMat.dispose();
-      (quad.geometry as THREE.BufferGeometry).dispose();
-      (quad.material as THREE.Material).dispose();
-      renderer.dispose();
-      if (renderer.domElement.parentNode === mount) {
-        mount.removeChild(renderer.domElement);
-      }
     };
   }, [targetRef]);
 
@@ -236,11 +90,37 @@ export function AmbientCanvas({
     <div
       ref={mountRef}
       aria-hidden
-      className="fixed inset-0 -z-10 overflow-hidden pointer-events-none select-none"
+      className="ambient-bg pointer-events-none fixed inset-0 -z-10 overflow-hidden select-none"
-      style={{
+      style={
-        background:
+        {
-          "radial-gradient(120% 90% at 50% 0%, oklch(0.2 0.04 70 / 0.5), oklch(0.1 0.015 70) 60%)",
+          "--ab-r": "45",
-      }}
+          "--ab-g": "212",
-    />
+          "--ab-b": "191",
+          "--ab-alpha": "0.35",
+        } as React.CSSProperties
+      }
+    >
+      {/* Base radial wash */}
+      <div className="absolute inset-0 bg-[radial-gradient(120%_90%_at_50%_0%,oklch(0.2_0.04_70/0.5),oklch(0.1_0.015_70)_60%)]" />
+
+      {/* Drifting blurred blobs — the "fog" effect */}
+      <div className="ambient-blob ambient-blob-1" />
+      <div className="ambient-blob ambient-blob-2" />
+      <div className="ambient-blob ambient-blob-3" />
+
+      {/* Floating motes — tiny dots drifting upward */}
+      <div className="ambient-motes">
+        {Array.from({ length: 30 }, (_, i) => (
+          <span key={i} className="ambient-mote" style={{
+            left: `${(i * 3.33) % 100}%`,
+            animationDelay: `${(i * 0.7) % 8}s`,
+            animationDuration: `${6 + (i % 5) * 2}s`,
+          }} />
+        ))}
+      </div>
+
+      {/* Vignette */}
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,transparent_20%,oklch(0.08_0.01_70/0.7)_100%)]" />
+    </div>
   );
 }

services/frontend/src/components/chatbot/chatbot.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import { useGSAP } from "@gsap/react";
-import gsap from "gsap";
 import {
   Bot,
   Loader2,
@@ -17,10 +15,6 @@ import { useChatbotUserId } from "@/hooks/use-chatbot-user";
 import { chatbotApi } from "@/lib/api";
 import { formatRelativeTime } from "@/lib/format";
 
-if (typeof window !== "undefined") {
-  gsap.registerPlugin(useGSAP);
-}
-
 interface ChatMessage {
   id: string;
   sender: "user" | "bot";
@@ -72,20 +66,15 @@ export function Chatbot() {
     }
   });
 
-  // GSAP animation for floating window
+  // CSS animation for floating window open
-  useGSAP(
+  useEffect(() => {
-    () => {
+    const el = containerRef.current;
-      if (!containerRef.current) return;
+    if (!el || !open) return;
-      if (open) {
+    el.style.animation = "fade-scale-in 0.25s ease-out forwards";
-        gsap.fromTo(
+    return () => {
-          containerRef.current,
+      el.style.removeProperty("animation");
-          { opacity: 0, scale: 0.95, y: 15 },
+    };
-          { opacity: 1, scale: 1, y: 0, duration: 0.25, ease: "power2.out" },
+  }, [open]);
-        );
-      }
-    },
-    { dependencies: [open], scope: containerRef },
-  );
 
   const handleSend = async (e: React.FormEvent) => {
     e.preventDefault();

services/frontend/src/components/primitives/card.tsx

@@ -14,7 +14,7 @@ export function GlassPanel({
   return (
     <div
       className={cn(
-        "relative rounded-[10px] border border-hairline bg-surface p-5 shadow-xl backdrop-blur-md transition-all duration-200",
+        "gradient-border relative rounded-[10px] border border-hairline bg-surface p-5 shadow-xl backdrop-blur-md transition-all duration-200",
         glow && "shadow-[0_0_24px_var(--color-signal-glow)] border-signal/30",
         className,
       )}

services/frontend/src/components/shared/page-transition.tsx

@@ -1,19 +1,11 @@
 "use client";
 
-import { useGSAP } from "@gsap/react";
+import { useEffect, useRef } from "react";
-import gsap from "gsap";
-import { useRef } from "react";
 import { cn } from "@/lib/utils";
 
-// Register plugin once on client
-if (typeof window !== "undefined") {
-  gsap.registerPlugin(useGSAP);
-}
-
 /**
- * GSAP-powered page transition wrapper.
+ * CSS-powered page transition wrapper.
- * Staggers entrance of direct children or smooth rise/fade for the container.
+ * Applies fade-scale-in animation on mount. Respects reduced-motion.
- * Fully cleans up on unmount and respects reduced-motion.
  */
 export function PageTransition({
   children,
@@ -24,34 +16,15 @@ export function PageTransition({
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
 
-  useGSAP(
+  useEffect(() => {
-    () => {
+    const el = containerRef.current;
-      if (!containerRef.current) return;
+    if (!el) return;
-
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
-      const prefersReduced = window.matchMedia(
+    el.style.animation = "fade-scale-in 0.4s ease-out forwards";
-        "(prefers-reduced-motion: reduce)",
+    return () => {
-      ).matches;
+      el.style.removeProperty("animation");
-      if (prefersReduced) return;
+    };
-
+  }, []);
-      gsap.fromTo(
-        containerRef.current,
-        {
-          opacity: 0,
-          y: 14,
-          filter: "blur(4px)",
-        },
-        {
-          opacity: 1,
-          y: 0,
-          filter: "blur(0px)",
-          duration: 0.45,
-          ease: "power2.out",
-          clearProps: "filter,transform",
-        },
-      );
-    },
-    { scope: containerRef },
-  );
 
   return (
     <div ref={containerRef} className={cn("w-full opacity-0", className)}>

services/frontend/src/components/shared/section.tsx

@@ -14,7 +14,7 @@ export function SectionHeader({
   return (
     <div
       className={cn(
-        "mb-3.5 flex flex-wrap items-center justify-between gap-3",
+        "reveal-up mb-3.5 flex flex-wrap items-center justify-between gap-3",
         className,
       )}
     >

services/frontend/src/components/shell/nav-rail.tsx

@@ -1,16 +1,10 @@
 "use client";
 
-import { useGSAP } from "@gsap/react";
-import gsap from "gsap";
 import { usePathname } from "next/navigation";
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 import { isActivePath, navItems } from "@/lib/navigation";
 import { cn } from "@/lib/utils";
 
-if (typeof window !== "undefined") {
-  gsap.registerPlugin(useGSAP);
-}
-
 function NavItem({
   href,
   label,
@@ -35,11 +29,9 @@ function NavItem({
       )}
     >
       <Icon className="relative z-10 size-4" strokeWidth={active ? 2.2 : 1.8} />
-      {/* Precision Micro-Indicator */}
       {active && (
         <span className="absolute -left-[5px] h-3.5 w-[2px] rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
       )}
-      {/* Tooltip on hover */}
       <span className="pointer-events-none absolute left-full z-50 ml-2.5 hidden whitespace-nowrap rounded-md border border-hairline bg-surface px-2 py-0.5 font-sans text-[11px] font-medium tracking-tight text-ink opacity-0 shadow-lg backdrop-blur-md transition-all group-hover:translate-x-0.5 group-hover:opacity-100 md:block">
         {label}
       </span>
@@ -52,25 +44,32 @@ export function NavRail() {
   const path = pathname ?? "/";
   const railRef = useRef<HTMLElement>(null);
 
-  useGSAP(
+  useEffect(() => {
-    () => {
+    const rail = railRef.current;
-      if (!railRef.current) return;
+    if (!rail) return;
-      const items = railRef.current.querySelectorAll(".nav-dock-item");
+    const items = rail.querySelectorAll<HTMLElement>(".nav-dock-item");
-      gsap.fromTo(
+    if (items.length === 0) return;
-        items,
+
-        { opacity: 0, x: -6 },
+    items.forEach((el, i) => {
-        {
+      el.style.opacity = "0";
-          opacity: 1,
+      el.style.animationFillMode = "forwards";
-          x: 0,
+      el.style.animationTimingFunction = "ease-out";
-          duration: 0.3,
+      el.style.animationName = "stagger-slide-in";
-          stagger: 0.025,
+      el.style.animationDuration = "0.3s";
-          ease: "power2.out",
+      el.style.animationDelay = `${i * 0.025}s`;
-          clearProps: "transform",
+    });
-        },
+
-      );
+    return () => {
-    },
+      items.forEach((el) => {
-    { scope: railRef },
+        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");
+      });
+    };
+  }, []);
 
   return (
     <nav

services/frontend/src/components/voice/voice-stage.tsx

@@ -1,94 +1,85 @@
 "use client";
 
-import { useGSAP } from "@gsap/react";
-import gsap from "gsap";
 import { Radio } from "lucide-react";
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 import { Avatar } from "@/components/primitives";
 import type { ActiveSpeaker } from "@/lib/types";
 
-if (typeof window !== "undefined") {
-  gsap.registerPlugin(useGSAP);
-}
-
 export function VoiceStage({ speakers }: { speakers: ActiveSpeaker[] }) {
   const containerRef = useRef<HTMLDivElement>(null);
   const n = speakers.length;
   const speaking = speakers.filter((s) => s.speaking).length;
   const live = speaking > 0;
-  const speakingIds = speakers
-    .filter((s) => s.speaking)
-    .map((s) => s.userId)
-    .join(",");
 
-  useGSAP(
+  // CSS stagger reveal for speaker nodes
-    () => {
+  useEffect(() => {
-      if (!containerRef.current) return;
+    const container = containerRef.current;
-      const speakerNodes =
+    if (!container) return;
-        containerRef.current.querySelectorAll(".speaker-node");
+    const nodes = container.querySelectorAll<HTMLElement>(".speaker-node");
-      if (speakerNodes.length > 0) {
+    if (nodes.length === 0) return;
-        gsap.fromTo(
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
-          speakerNodes,
-          { scale: 0.7, opacity: 0 },
-          {
-            scale: 1,
-            opacity: 1,
-            duration: 0.4,
-            stagger: 0.05,
-            ease: "back.out(1.5)",
-          },
-        );
-      }
-    },
-    { scope: containerRef, dependencies: [speakers.length] },
-  );
 
-  // Reactive pulse ring loop keyed to active speaking set — cleared on stop.
+    nodes.forEach((el, i) => {
-  useGSAP(
+      el.style.opacity = "0";
-    () => {
+      el.style.animationFillMode = "forwards";
-      if (!containerRef.current) return;
+      el.style.animationTimingFunction = "cubic-bezier(0.34, 1.56, 0.64, 1)";
-      const prefersReduced = window.matchMedia(
+      el.style.animationName = "scale-bounce-in";
-        "(prefers-reduced-motion: reduce)",
+      el.style.animationDuration = "0.4s";
-      ).matches;
+      el.style.animationDelay = `${i * 0.05}s`;
-      if (prefersReduced) return;
+    });
 
-      const ringNodes = containerRef.current.querySelectorAll(
+    return () => {
-        ".speaker-pulse-ring",
+      nodes.forEach((el) => {
-      );
+        el.style.removeProperty("opacity");
-      if (ringNodes.length === 0) return;
+        el.style.removeProperty("animation-name");
-
+        el.style.removeProperty("animation-duration");
-      const tl = gsap.timeline({ repeat: -1, yoyo: true });
+        el.style.removeProperty("animation-delay");
-      tl.to(ringNodes, {
+        el.style.removeProperty("animation-fill-mode");
-        scale: 1.18,
+        el.style.removeProperty("animation-timing-function");
-        opacity: 0.35,
-        duration: 0.55,
-        ease: "sine.inOut",
-        stagger: { each: 0.08, from: "random" },
       });
+    };
+  }, [speakers.length]);
 
-      return () => {
+  // CSS pulse ring for active speakers
-        tl.kill();
+  useEffect(() => {
-        gsap.set(ringNodes, { clearProps: "scale,opacity" });
+    const container = containerRef.current;
-      };
+    if (!container) return;
-    },
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
-    { scope: containerRef, dependencies: [speakingIds] },
+    const rings = container.querySelectorAll<HTMLElement>(".speaker-pulse-ring");
-  );
+    if (rings.length === 0) return;
+
+    rings.forEach((el, i) => {
+      el.style.animationName = "pulse-ring";
+      el.style.animationDuration = "1.1s";
+      el.style.animationTimingFunction = "sine.in-out";
+      el.style.animationIterationCount = "infinite";
+      el.style.animationDelay = `${i * 0.08}s`;
+    });
+
+    return () => {
+      rings.forEach((el) => {
+        el.style.removeProperty("animation-name");
+        el.style.removeProperty("animation-duration");
+        el.style.removeProperty("animation-timing-function");
+        el.style.removeProperty("animation-iteration-count");
+        el.style.removeProperty("animation-delay");
+      });
+    };
+  }, [speakers.filter((s) => s.speaking).map((s) => s.userId).join(",")]);
 
   return (
     <div
       ref={containerRef}
       className="relative mx-auto aspect-square w-full max-w-[380px]"
     >
-      {/* Tactical radar coordinate grids & rings */}
       <div className="absolute inset-4 rounded-full border border-hairline/30" />
-      <div className="absolute inset-12 rounded-full border border-dashed border-hairline/40 animate-spin-disc" />
+      <div className="absolute inset-12 rounded-full border border-dashed border-hairline/40 animate-spin-disc radar-sweep" />
       <div className="absolute left-1/2 top-1/2 size-80 -translate-x-1/2 -translate-y-1/2 rounded-full border border-hairline/20" />
       <div
         className="absolute left-1/2 top-1/2 size-56 -translate-x-1/2 -translate-y-1/2 rounded-full bg-signal/5 transition-opacity duration-500"
         style={{ opacity: live ? 1 : 0.2 }}
       />
 
-      {/* Central Command Beacon */}
       <div
         className="absolute left-1/2 top-1/2 flex size-28 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center rounded-full border backdrop-blur-md transition-all duration-300"
         style={{
@@ -105,7 +96,6 @@ export function VoiceStage({ speakers }: { speakers: ActiveSpeaker[] }) {
         </span>
       </div>
 
-      {/* Orbiting Speakers */}
       {speakers.map((s, i) => {
         const angle = (i / Math.max(n, 1)) * Math.PI * 2 - Math.PI / 2;
         const radius = 44;

services/frontend/src/hooks/use-gsap-animation.ts

@@ -1,21 +1,15 @@
 "use client";
 
-import { useGSAP } from "@gsap/react";
+import { useEffect, useRef } from "react";
-import gsap from "gsap";
-import { useRef } from "react";
-
-if (typeof window !== "undefined") {
-  gsap.registerPlugin(useGSAP);
-  // Set default Linear-style crisp easing & duration
-  gsap.defaults({
-    ease: "power2.out",
-    duration: 0.35,
-  });
-}
 
 /**
- * Reusable hook for staggered reveal animations on child elements.
+ * CSS-based stagger reveal. Applies `.stagger-in` class with incremental
- * Linear-style: crisp entry, very subtle vertical displacement, no layout shift.
+ * `animation-delay` to matching children when they enter the viewport.
+ * No GSAP — pure CSS keyframes + IntersectionObserver.
+ *
+ * Add this to globals.css if not already present:
+ *   @keyframes stagger-in { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:translateY(0) } }
+ *   .stagger-in { opacity:0; animation: stagger-in 0.32s ease-out forwards }
  */
 export function useStaggerReveal<T extends HTMLElement = HTMLDivElement>(
   selector: string,
@@ -29,43 +23,51 @@ export function useStaggerReveal<T extends HTMLElement = HTMLDivElement>(
 ) {
   const containerRef = useRef<T>(null);
 
-  useGSAP(
+  useEffect(() => {
-    () => {
+    const container = containerRef.current;
-      if (!containerRef.current) return;
+    if (!container) return;
-      const elements = containerRef.current.querySelectorAll(selector);
-      if (!elements || elements.length === 0) return;
 
-      const prefersReduced = window.matchMedia(
+    const prefersReduced = window.matchMedia(
-        "(prefers-reduced-motion: reduce)",
+      "(prefers-reduced-motion: reduce)",
-      ).matches;
+    ).matches;
-      if (prefersReduced) {
-        gsap.set(elements, { opacity: 1, y: 0 });
-        return;
-      }
 
-      gsap.fromTo(
+    const elements = container.querySelectorAll<HTMLElement>(selector);
-        elements,
+    if (!elements || elements.length === 0) return;
-        {
+
-          opacity: 0,
+    if (prefersReduced) {
-          y: options?.y ?? 8,
+      elements.forEach((el) => {
-        },
+        el.style.opacity = "1";
-        {
+        el.style.transform = "none";
-          opacity: 1,
+      });
-          y: 0,
+      return;
-          duration: options?.duration ?? 0.32,
+    }
-          delay: options?.delay ?? 0.02,
+
-          stagger: options?.stagger ?? 0.03,
+    const staggerSec = options?.stagger ?? 0.03;
-          ease: "power2.out",
+    const durationSec = options?.duration ?? 0.32;
-          clearProps: "transform",
+    const baseDelay = options?.delay ?? 0;
-        },
+
-      );
+    elements.forEach((el, i) => {
-    },
+      el.style.opacity = "0";
-    {
+      el.style.animationFillMode = "forwards";
-      scope: containerRef,
+      el.style.animationTimingFunction = "ease-out";
-      dependencies: options?.dependencies ?? [],
+      el.style.animationName = "stagger-in";
-      revertOnUpdate: true,
+      el.style.animationDuration = `${durationSec}s`;
-    },
+      el.style.animationDelay = `${baseDelay + i * staggerSec}s`;
-  );
+    });
+
+    // Cleanup: remove inline styles so next re-render can re-apply
+    return () => {
+      elements.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");
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, options?.dependencies ?? []);
 
   return containerRef;
 }