subh05sus · shivamani-code · Sep 7, 2025
diff --git a/app/auth/signin/page.tsx b/app/auth/signin/page.tsx
@@ -1,10 +1,12 @@
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import AnimatedNetworkBackground from "@/components/ui/animated-network-background"
 
 export default function SignIn() {
   return (
-    <div className="flex items-center justify-center min-h-[50vh]">
-      <Card className="w-full max-w-md">
+    <div className="relative min-h-screen flex items-center justify-center">
+      <AnimatedNetworkBackground />
+      <Card className="w-full max-w-md relative z-10">
         <CardHeader>
           <CardTitle>Sign In</CardTitle>
         </CardHeader>

diff --git a/components/not-logged-in-view.tsx b/components/not-logged-in-view.tsx
@@ -8,19 +8,13 @@ import { TextRotatePreview } from "./home/TextRotation";
 import { Why } from "./home/Why";
 import LatestChangelog from "./latest-changelog";
 // import ProductHunt from "./ProductHunt";
-import { Spotlight } from "./ui/spotlight-new";
+import AnimatedNetworkBackground from "./ui/animated-network-background";
 import FeatureBigPreview from "./FeatureBigPreview";
 
 function NotLoggedInView() {
   return (
-    <div className="max-w-7xl mx-auto p-4">
-      <div className="absolute top-0 right-0 w-full -z-50">
-        <div className="h-[40rem] w-full rounded-md -z-50 dark:flex hidden md:items-center md:justify-center antialiased dark:bg-transparent bg-dot-black/[0.25] relative overflow-hidden">
-          <Spotlight />
-        </div>
-        <div className="h-[40rem] w-full rounded-md -z-50 flex dark:hidden  md:items-center md:justify-center antialiased bg-dot-black/[0.25] relative overflow-hidden" />
-        <div className="absolute bottom-0 left-0 w-full right-0 h-96 bg-gradient-to-t from-background to-transparent dark:bg-transparent dark:hidden" />
-      </div>
+    <div className="relative max-w-7xl mx-auto p-4">
+      <AnimatedNetworkBackground />
       <div>
         <TextRotatePreview />
       </div>

diff --git a/components/ui/animated-network-background.tsx b/components/ui/animated-network-background.tsx
@@ -0,0 +1,199 @@
+"use client";
+
+import React, { useEffect, useRef } from 'react';
+import { useTheme } from 'next-themes';
+
+interface Node {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  radius: number;
+  opacity: number;
+}
+
+interface Connection {
+  node1: Node;
+  node2: Node;
+  opacity: number;
+  distance: number;
+}
+
+const AnimatedNetworkBackground: React.FC = () => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const animationRef = useRef<number>();
+  const nodesRef = useRef<Node[]>([]);
+  const { resolvedTheme } = useTheme();
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const resizeCanvas = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    };
+
+    const createNodes = () => {
+      const nodeCount = Math.floor((canvas.width * canvas.height) / 15000);
+      nodesRef.current = [];
+
+      for (let i = 0; i < nodeCount; i++) {
+        nodesRef.current.push({
+          x: Math.random() * canvas.width,
+          y: Math.random() * canvas.height,
+          vx: (Math.random() - 0.5) * 0.5,
+          vy: (Math.random() - 0.5) * 0.5,
+          radius: Math.random() * 2 + 1,
+          opacity: Math.random() * 0.5 + 0.3,
+        });
+      }
+    };
+
+    const updateNodes = () => {
+      nodesRef.current.forEach(node => {
+        node.x += node.vx;
+        node.y += node.vy;
+
+        // Bounce off edges
+        if (node.x <= 0 || node.x >= canvas.width) node.vx *= -1;
+        if (node.y <= 0 || node.y >= canvas.height) node.vy *= -1;
+
+        // Keep nodes in bounds
+        node.x = Math.max(0, Math.min(canvas.width, node.x));
+        node.y = Math.max(0, Math.min(canvas.height, node.y));
+
+        // Subtle opacity animation
+        node.opacity += (Math.random() - 0.5) * 0.02;
+        node.opacity = Math.max(0.1, Math.min(0.8, node.opacity));
+      });
+    };
+
+    const getConnections = (): Connection[] => {
+      const connections: Connection[] = [];
+      const maxDistance = 120;
+
+      for (let i = 0; i < nodesRef.current.length; i++) {
+        for (let j = i + 1; j < nodesRef.current.length; j++) {
+          const node1 = nodesRef.current[i];
+          const node2 = nodesRef.current[j];
+          const distance = Math.sqrt(
+            Math.pow(node1.x - node2.x, 2) + Math.pow(node1.y - node2.y, 2)
+          );
+
+          if (distance < maxDistance) {
+            const opacity = (1 - distance / maxDistance) * 0.3;
+            connections.push({ node1, node2, opacity, distance });
+          }
+        }
+      }
+
+      return connections;
+    };
+
+    const draw = () => {
+      // Determine if we're in dark mode
+      const isDarkMode = resolvedTheme === 'dark' || 
+        (resolvedTheme === 'system' && 
+         typeof window !== 'undefined' && 
+         window.matchMedia('(prefers-color-scheme: dark)').matches);
+
+      // Set background color based on theme
+      if (isDarkMode) {
+        ctx.fillStyle = '#000000';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+      } else {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+      }
+
+      // Theme-based colors and opacity adjustments
+      const nodeColor = isDarkMode ? '#0ea5e9' : '#0ea5e9';
+      const lineColor = isDarkMode ? '#0ea5e9' : '#0ea5e9';
+      const glowColor = isDarkMode ? '#0ea5e9' : '#0ea5e9';
+
+      // Draw connections
+      const connections = getConnections();
+      connections.forEach(connection => {
+        ctx.beginPath();
+        ctx.moveTo(connection.node1.x, connection.node1.y);
+        ctx.lineTo(connection.node2.x, connection.node2.y);
+
+        const alpha = connection.opacity * (isDarkMode ? 0.6 : 0.4);
+        ctx.strokeStyle = `${lineColor}${Math.floor(alpha * 255).toString(16).padStart(2, '0')}`;
+        ctx.lineWidth = 0.5;
+        ctx.stroke();
+      });
+
+      // Draw nodes
+      nodesRef.current.forEach(node => {
+        // Outer glow
+        const gradient = ctx.createRadialGradient(
+          node.x, node.y, 0,
+          node.x, node.y, node.radius * 4
+        );
+
+        const glowAlpha = node.opacity * (isDarkMode ? 0.3 : 0.15);
+        gradient.addColorStop(0, `${glowColor}${Math.floor(glowAlpha * 255).toString(16).padStart(2, '0')}`);
+        gradient.addColorStop(1, 'transparent');
+
+        ctx.beginPath();
+        ctx.arc(node.x, node.y, node.radius * 4, 0, Math.PI * 2);
+        ctx.fillStyle = gradient;
+        ctx.fill();
+
+        // Inner node
+        ctx.beginPath();
+        ctx.arc(node.x, node.y, node.radius, 0, Math.PI * 2);
+
+        const nodeAlpha = node.opacity * (isDarkMode ? 0.8 : 0.5);
+        ctx.fillStyle = `${nodeColor}${Math.floor(nodeAlpha * 255).toString(16).padStart(2, '0')}`;
+        ctx.fill();
+
+        // Core highlight
+        ctx.beginPath();
+        ctx.arc(node.x, node.y, node.radius * 0.3, 0, Math.PI * 2);
+        ctx.fillStyle = isDarkMode ? '#ffffff40' : '#ffffff80';
+        ctx.fill();
+      });
+    };
+
+    const animate = () => {
+      updateNodes();
+      draw();
+      animationRef.current = requestAnimationFrame(animate);
+    };
+
+    resizeCanvas();
+    createNodes();
+    animate();
+
+    const handleResize = () => {
+      resizeCanvas();
+      createNodes();
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, [resolvedTheme]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className="fixed inset-0 pointer-events-none -z-10"
+      style={{
+        background: 'transparent',
+      }}
+    />
+  );
+};
+
+export default AnimatedNetworkBackground;
diff --git a/components/ui/coding-background.tsx b/components/ui/coding-background.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import React from 'react';
+
+const CodingBackground: React.FC = () => {
+  return (
+    <div className="fixed inset-0 overflow-hidden pointer-events-none bg-gradient-to-br from-gray-950 via-slate-950 to-black">
+      {/* Subtle Grid Overlay */}
+      <div 
+        className="absolute inset-0 opacity-8"
+        style={{
+          backgroundImage: `
+            linear-gradient(to right, #f97316 1px, transparent 1px),
+            linear-gradient(to bottom, #f97316 1px, transparent 1px)
+          `,
+          backgroundSize: '100px 100px'
+        }}
+      />
+
+      {/* Floating Orbs */}
+      <div className="absolute top-[15%] left-[15%] w-2 h-2 bg-orange-500 rounded-full opacity-70 shadow-lg shadow-orange-500/50 animate-pulse" style={{ animationDelay: '0s' }} />
+      <div className="absolute top-[20%] right-[20%] w-3 h-3 bg-purple-500 rounded-full opacity-60 shadow-lg shadow-purple-500/50 animate-pulse" style={{ animationDelay: '1.5s' }} />
+      <div className="absolute bottom-[70%] left-[10%] w-2.5 h-2.5 bg-orange-400 rounded-full opacity-80 shadow-lg shadow-orange-400/50 animate-pulse" style={{ animationDelay: '3s' }} />
+      <div className="absolute top-[50%] left-[50%] w-2 h-2 bg-purple-400 rounded-full opacity-70 shadow-lg shadow-purple-400/50 animate-pulse" style={{ animationDelay: '2s' }} />
+      <div className="absolute bottom-[30%] right-[25%] w-3 h-3 bg-orange-500 rounded-full opacity-65 shadow-lg shadow-orange-500/50 animate-pulse" style={{ animationDelay: '4s' }} />
+
+      {/* Connecting Lines */}
+      <svg className="absolute inset-0 w-full h-full">
+        <defs>
+          <linearGradient id="line1" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stopColor="#f97316" stopOpacity="0.8" />
+            <stop offset="50%" stopColor="#a855f7" stopOpacity="0.6" />
+            <stop offset="100%" stopColor="transparent" />
+          </linearGradient>
+          <linearGradient id="line2" x1="100%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stopColor="#a855f7" stopOpacity="0.7" />
+            <stop offset="50%" stopColor="#f97316" stopOpacity="0.5" />
+            <stop offset="100%" stopColor="transparent" />
+          </linearGradient>
+          <linearGradient id="line3" x1="0%" y1="50%" x2="100%" y2="50%">
+            <stop offset="0%" stopColor="#fb923c" stopOpacity="0.6" />
+            <stop offset="50%" stopColor="#c084fc" stopOpacity="0.8" />
+            <stop offset="100%" stopColor="transparent" />
+          </linearGradient>
+        </defs>
+
+        <line 
+          x1="15%" y1="15%" x2="80%" y2="20%" 
+          stroke="url(#line1)" 
+          strokeWidth="0.8"
+          className="animate-pulse"
+          style={{ animationDelay: '1s' }}
+        />
+        <line 
+          x1="10%" y1="30%" x2="50%" y2="50%" 
+          stroke="url(#line2)" 
+          strokeWidth="1"
+          className="animate-pulse"
+          style={{ animationDelay: '2.5s' }}
+        />
+        <line 
+          x1="50%" y1="50%" x2="75%" y2="70%" 
+          stroke="url(#line3)" 
+          strokeWidth="0.9"
+          className="animate-pulse"
+          style={{ animationDelay: '4s' }}
+        />
+      </svg>
+
+      {/* Coding Symbols */}
+      <div className="absolute top-[25%] left-[30%] text-orange-500 opacity-40 font-mono text-xl animate-pulse" style={{ animationDelay: '0.5s' }}>
+        {'</>'}
+      </div>
+      <div className="absolute top-[60%] right-[35%] text-purple-500 opacity-25 font-mono text-lg animate-pulse" style={{ animationDelay: '2s' }}>
+        ;
+      </div>
+      <div className="absolute bottom-[40%] left-[25%] text-orange-400 opacity-35 font-mono text-base animate-pulse" style={{ animationDelay: '3.5s' }}>
+        ()
+      </div>
+      <div className="absolute top-[40%] right-[15%] text-purple-400 opacity-30 font-mono text-xl animate-pulse" style={{ animationDelay: '1.5s' }}>
+        []
+      </div>
+      <div className="absolute bottom-[60%] right-[50%] text-orange-500 opacity-25 font-mono text-lg animate-pulse" style={{ animationDelay: '4.5s' }}>
+        {'{}'}
+      </div>
+
+      {/* Binary Rain */}
+      <div className="absolute left-[10%] top-0 h-full flex flex-col justify-evenly">
+        <div className="text-orange-500 opacity-60 font-mono text-sm animate-pulse" style={{ animationDelay: '1s' }}>1010</div>
+        <div className="text-purple-500 opacity-60 font-mono text-sm animate-pulse" style={{ animationDelay: '2.5s' }}>0110</div>
+        <div className="text-orange-400 opacity-60 font-mono text-sm animate-pulse" style={{ animationDelay: '4s' }}>1101</div>
+        <div className="text-purple-400 opacity-60 font-mono text-sm animate-pulse" style={{ animationDelay: '0.5s' }}>0011</div>
+      </div>
+
+      <div className="absolute right-[15%] top-0 h-full flex flex-col justify-evenly">
+        <div className="text-purple-500 opacity-60 font-mono text-sm animate-pulse" style={{ animationDelay: '3s' }}>1001</div>
+        <div className="text-orange-500 opacity-60 font-mono text-sm animate-pulse" style={{ animationDelay: '1.5s' }}>0101</div>
+        <div className="text-purple-400 opacity-60 font-mono text-sm animate-pulse" style={{ animationDelay: '4.5s' }}>1110</div>
+        <div className="text-orange-400 opacity-60 font-mono text-sm animate-pulse" style={{ animationDelay: '2s' }}>0010</div>
+      </div>
+
+      {/* Programming Keywords */}
+      <div className="absolute top-[10%] left-[5%] text-orange-500 opacity-25 font-mono text-xs animate-pulse" style={{ animationDelay: '2s' }}>
+        function
+      </div>
+      <div className="absolute top-[10%] right-[5%] text-purple-500 opacity-25 font-mono text-xs animate-pulse" style={{ animationDelay: '3.5s' }}>
+        const
+      </div>
+      <div className="absolute bottom-[10%] left-[5%] text-orange-400 opacity-25 font-mono text-xs animate-pulse" style={{ animationDelay: '1s' }}>
+        return
+      </div>
+      <div className="absolute bottom-[10%] right-[5%] text-purple-400 opacity-25 font-mono text-xs animate-pulse" style={{ animationDelay: '4s' }}>
+        async
+      </div>
+
+      {/* Terminal Cursor */}
+      <div className="absolute bottom-[25%] left-[50%] transform -translate-x-1/2 flex items-center opacity-70">
+        <span className="text-orange-500 font-mono text-lg animate-pulse" style={{ animationDelay: '0s' }}>$</span>
+        <span className="ml-1 w-2 h-5 bg-orange-500 animate-pulse" style={{ animationDelay: '0.5s' }}></span>
+      </div>
+
+      {/* Code Comment */}
+      <div className="absolute top-[35%] left-[60%] text-gray-500 opacity-30 font-mono text-xs animate-pulse" style={{ animationDelay: '3s' }}>
+        // code
+      </div>
+    </div>
+  );
+};
+
+export default CodingBackground;