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/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(
-    () => {
-      if (!feedRef.current) return;
-      const items = feedRef.current.querySelectorAll(".mod-feed-item");
-      if (items.length === 0) return;
+  useEffect(() => {
+    const container = feedRef.current;
+    if (!container) return;
+    const items = container.querySelectorAll<HTMLElement>(".mod-feed-item");
+    if (items.length === 0) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
 
-      const prefersReduced = window.matchMedia(
-        "(prefers-reduced-motion: reduce)",
-      ).matches;
-      if (prefersReduced) return;
+    items.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.32s";
+      el.style.animationDelay = `${i * 0.025}s`;
+    });
 
-      gsap.fromTo(
-        items,
-        { opacity: 0, x: -8 },
-        {
-          opacity: 1,
-          x: 0,
-          duration: 0.32,
-          stagger: 0.025,
-          ease: "power2.out",
-          clearProps: "transform",
-        },
-      );
-    },
-    { scope: feedRef, dependencies: [actions.length] },
-  );
+    return () => {
+      items.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");
+      });
+    };
+  }, [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;
-  void main(){
-    vUv = uv;
-    gl_Position = vec4(position.xy, 0.0, 1.0);
-  }
-`;
+/**
+ * Pure CSS ambient background — no WebGL, no three.js.
+ * Multiple blurred gradient blobs drift via CSS keyframes.
+ * Tone & intensity are driven by CSS custom properties updated from the
+ * ref (no React re-renders per frame).
+ */
 
-const FRAG = /* glsl */ `
-  precision mediump float;
-  varying vec2 vUv;
-  uniform float uTime;
-  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;
+const TONE_css: Record<SignalTone, string> = {
+  signal: "45, 212, 191",
+  amber: "245, 158, 11",
+  vermilion: "239, 68, 68",
+};
 
 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);
-    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";
+    if (reduce) return;
 
-    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 = () => {
-      const w = mount.clientWidth || 1;
-      const h = mount.clientHeight || 1;
-      renderer.setSize(w, h);
-      uniforms.uRes.value.set(w * dpr, h * dpr);
-    };
-    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);
+    // Lerp state
+    let r = 45, g = 212, b = 191;
+    let targetR = 45, targetG = 212, targetB = 191;
+    let intensity = 0.35;
+    let targetIntensity = 0.35;
 
     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]);
-      color.lerp(target, 0.04);
-      uniforms.uColor.value.copy(color);
-      moteMat.color.copy(color);
-      targetIntensity = 0.2 + tgt.intensity * 0.8;
-      intensity = lerp(intensity, targetIntensity, 0.04);
-      uniforms.uIntensity.value = intensity;
+      const [tr, tg, tb] = TONE_css[tgt.tone].split(",").map(Number);
+      targetR = tr;
+      targetG = tg;
+      targetB = tb;
+      targetIntensity = 0.15 + tgt.intensity * 0.85;
 
-      const pos = geo.attributes.position as THREE.BufferAttribute;
-      for (let i = 0; i < MOTE_COUNT; i++) {
-        let y = pos.getY(i) + speeds[i] * dt * (0.5 + tgt.intensity);
-        if (y > 1.1) y = -1.1;
-        pos.setY(i, y);
-      }
-      pos.needsUpdate = true;
+      r = lerp(r, targetR, 0.03);
+      g = lerp(g, targetG, 0.03);
+      b = lerp(b, targetB, 0.03);
+      intensity = lerp(intensity, targetIntensity, 0.03);
 
-      renderer.render(scene, camera);
-      if (running) raf = requestAnimationFrame(frame);
-    };
+      const root = mount;
+      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) {
-      // single static frame
-      uniforms.uIntensity.value = 0.3;
-      renderer.render(scene, camera);
-    } else {
-      loop();
-    }
+    raf = requestAnimationFrame(frame);
+
+    const onVisibility = () => {
+      if (document.hidden) {
+        cancelAnimationFrame(raf);
+      } 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"
-      style={{
-        background:
-          "radial-gradient(120% 90% at 50% 0%, oklch(0.2 0.04 70 / 0.5), oklch(0.1 0.015 70) 60%)",
-      }}
-    />
+      className="ambient-bg pointer-events-none fixed inset-0 -z-10 overflow-hidden select-none"
+      style={
+        {
+          "--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
-  useGSAP(
-    () => {
-      if (!containerRef.current) return;
-      if (open) {
-        gsap.fromTo(
-          containerRef.current,
-          { opacity: 0, scale: 0.95, y: 15 },
-          { opacity: 1, scale: 1, y: 0, duration: 0.25, ease: "power2.out" },
-        );
-      }
-    },
-    { dependencies: [open], scope: containerRef },
-  );
+  // CSS animation for floating window open
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el || !open) return;
+    el.style.animation = "fade-scale-in 0.25s ease-out forwards";
+    return () => {
+      el.style.removeProperty("animation");
+    };
+  }, [open]);
 
   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 gsap from "gsap";
-import { useRef } from "react";
+import { useEffect, 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.
- * Staggers entrance of direct children or smooth rise/fade for the container.
- * Fully cleans up on unmount and respects reduced-motion.
+ * CSS-powered page transition wrapper.
+ * Applies fade-scale-in animation on mount. Respects reduced-motion.
  */
 export function PageTransition({
   children,
@@ -24,34 +16,15 @@ export function PageTransition({
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
 
-  useGSAP(
-    () => {
-      if (!containerRef.current) return;
-
-      const prefersReduced = window.matchMedia(
-        "(prefers-reduced-motion: reduce)",
-      ).matches;
-      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 },
-  );
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    el.style.animation = "fade-scale-in 0.4s ease-out forwards";
+    return () => {
+      el.style.removeProperty("animation");
+    };
+  }, []);
 
   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(
-    () => {
-      if (!railRef.current) return;
-      const items = railRef.current.querySelectorAll(".nav-dock-item");
-      gsap.fromTo(
-        items,
-        { opacity: 0, x: -6 },
-        {
-          opacity: 1,
-          x: 0,
-          duration: 0.3,
-          stagger: 0.025,
-          ease: "power2.out",
-          clearProps: "transform",
-        },
-      );
-    },
-    { scope: railRef },
-  );
+  useEffect(() => {
+    const rail = railRef.current;
+    if (!rail) return;
+    const items = rail.querySelectorAll<HTMLElement>(".nav-dock-item");
+    if (items.length === 0) return;
+
+    items.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.3s";
+      el.style.animationDelay = `${i * 0.025}s`;
+    });
+
+    return () => {
+      items.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");
+      });
+    };
+  }, []);
 
   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(
-    () => {
-      if (!containerRef.current) return;
-      const speakerNodes =
-        containerRef.current.querySelectorAll(".speaker-node");
-      if (speakerNodes.length > 0) {
-        gsap.fromTo(
-          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] },
-  );
+  // CSS stagger reveal for speaker nodes
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const nodes = container.querySelectorAll<HTMLElement>(".speaker-node");
+    if (nodes.length === 0) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
 
-  // Reactive pulse ring loop keyed to active speaking set — cleared on stop.
-  useGSAP(
-    () => {
-      if (!containerRef.current) return;
-      const prefersReduced = window.matchMedia(
-        "(prefers-reduced-motion: reduce)",
-      ).matches;
-      if (prefersReduced) return;
+    nodes.forEach((el, i) => {
+      el.style.opacity = "0";
+      el.style.animationFillMode = "forwards";
+      el.style.animationTimingFunction = "cubic-bezier(0.34, 1.56, 0.64, 1)";
+      el.style.animationName = "scale-bounce-in";
+      el.style.animationDuration = "0.4s";
+      el.style.animationDelay = `${i * 0.05}s`;
+    });
 
-      const ringNodes = containerRef.current.querySelectorAll(
-        ".speaker-pulse-ring",
-      );
-      if (ringNodes.length === 0) return;
-
-      const tl = gsap.timeline({ repeat: -1, yoyo: true });
-      tl.to(ringNodes, {
-        scale: 1.18,
-        opacity: 0.35,
-        duration: 0.55,
-        ease: "sine.inOut",
-        stagger: { each: 0.08, from: "random" },
+    return () => {
+      nodes.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");
       });
+    };
+  }, [speakers.length]);
 
-      return () => {
-        tl.kill();
-        gsap.set(ringNodes, { clearProps: "scale,opacity" });
-      };
-    },
-    { scope: containerRef, dependencies: [speakingIds] },
-  );
+  // CSS pulse ring for active speakers
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    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;