From 24781f32ec0b7889ddb4a88d994d91b6d8593dec Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Sat, 31 Jan 2026 22:41:16 +0300
Subject: [PATCH] feat: add animated MovingGradient background

---
 src/components/layout/AppShell/AppShell.tsx   |  6 +-
 .../layout/AppShell/MovingGradient.tsx        | 57 +++++++++++++++++++
 src/components/layout/AppShell/index.ts       |  1 +
 3 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 src/components/layout/AppShell/MovingGradient.tsx

diff --git a/src/components/layout/AppShell/AppShell.tsx b/src/components/layout/AppShell/AppShell.tsx
index 490a441..4a6d7ea 100644
--- a/src/components/layout/AppShell/AppShell.tsx
+++ b/src/components/layout/AppShell/AppShell.tsx
@@ -28,6 +28,7 @@ import TicketNotificationBell from '@/components/TicketNotificationBell';
 
 import { MobileBottomNav } from './MobileBottomNav';
 import { AppHeader } from './AppHeader';
+import { MovingGradient } from './MovingGradient';
 
 import { slideUp, slideUpTransition } from '@/components/motion/transitions';
 
@@ -360,7 +361,10 @@ export function AppShell({ children }: AppShellProps) {
     : 64;
 
   return (
-    <div className="min-h-screen bg-dark-950">
+    <div className="min-h-screen">
+      {/* Animated background */}
+      <MovingGradient />
+
       {/* Global components */}
       <WebSocketNotifications />
       <SuccessNotificationModal />
diff --git a/src/components/layout/AppShell/MovingGradient.tsx b/src/components/layout/AppShell/MovingGradient.tsx
new file mode 100644
index 0000000..d53ec30
--- /dev/null
+++ b/src/components/layout/AppShell/MovingGradient.tsx
@@ -0,0 +1,57 @@
+import { motion } from 'framer-motion';
+
+/**
+ * Animated moving gradient background.
+ * Uses CSS variables for colors to support theme switching.
+ * Lightweight - pure CSS gradients with Framer Motion animation.
+ */
+export function MovingGradient() {
+  return (
+    <div className="fixed inset-0 -z-10 overflow-hidden">
+      {/* Base background */}
+      <div className="absolute inset-0 bg-dark-950" />
+
+      {/* Animated gradient layer */}
+      <motion.div
+        className="absolute inset-0 opacity-60"
+        style={{
+          background:
+            'radial-gradient(ellipse 80% 50% at 20% 40%, rgba(var(--color-accent-500), 0.12) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 80% 60%, rgba(var(--color-accent-500), 0.08) 0%, transparent 50%)',
+        }}
+        animate={{
+          backgroundPosition: ['0% 0%', '100% 100%', '0% 0%'],
+        }}
+        transition={{
+          duration: 20,
+          repeat: Infinity,
+          ease: 'linear',
+        }}
+      />
+
+      {/* Second animated layer - moves in opposite direction */}
+      <motion.div
+        className="absolute inset-0 opacity-40"
+        style={{
+          background:
+            'radial-gradient(ellipse 70% 60% at 70% 30%, rgba(var(--color-accent-500), 0.1) 0%, transparent 50%), radial-gradient(ellipse 50% 50% at 30% 70%, rgba(var(--color-accent-500), 0.06) 0%, transparent 50%)',
+        }}
+        animate={{
+          backgroundPosition: ['100% 100%', '0% 0%', '100% 100%'],
+        }}
+        transition={{
+          duration: 25,
+          repeat: Infinity,
+          ease: 'linear',
+        }}
+      />
+
+      {/* Subtle noise texture overlay */}
+      <div
+        className="absolute inset-0 opacity-[0.02]"
+        style={{
+          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/components/layout/AppShell/index.ts b/src/components/layout/AppShell/index.ts
index 233b39d..b21d562 100644
--- a/src/components/layout/AppShell/index.ts
+++ b/src/components/layout/AppShell/index.ts
@@ -2,3 +2,4 @@ export { AppShell } from './AppShell';
 export { DesktopSidebar } from './DesktopSidebar';
 export { MobileBottomNav } from './MobileBottomNav';
 export { AppHeader } from './AppHeader';
+export { MovingGradient } from './MovingGradient';