Main page

ui/src/components/animated-embeddings-background.tsx

@@ -0,0 +1,124 @@
+import { useEffect, useRef } from 'react';
+
+interface Point {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  connections: number[];
+}
+
+export const AnimatedEmbeddingsBackground = () => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const pointsRef = useRef<Point[]>([]);
+  const animationFrameRef = useRef<number>();
+
+  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;
+    };
+
+    resizeCanvas();
+    window.addEventListener('resize', resizeCanvas);
+
+    // Initialize points
+    const numPoints = 100;
+    pointsRef.current = Array.from({ length: numPoints }, () => ({
+      x: Math.random() * canvas.width,
+      y: Math.random() * canvas.height,
+      vx: (Math.random() - 0.5) * 0.5,
+      vy: (Math.random() - 0.5) * 0.5,
+      connections: [],
+    }));
+
+    const animate = () => {
+      if (!canvas || !ctx) return;
+
+      // Subtle gradient background
+      const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
+      gradient.addColorStop(0, 'rgba(248, 249, 250, 1)');
+      gradient.addColorStop(0.5, 'rgba(240, 245, 255, 1)');
+      gradient.addColorStop(1, 'rgba(248, 249, 250, 1)');
+      ctx.fillStyle = gradient;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      const points = pointsRef.current;
+      const maxDistance = 120;
+
+      // Update and draw points
+      points.forEach((point, i) => {
+        // Update position
+        point.x += point.vx;
+        point.y += point.vy;
+
+        // Bounce off edges
+        if (point.x < 0 || point.x > canvas.width) point.vx *= -1;
+        if (point.y < 0 || point.y > canvas.height) point.vy *= -1;
+
+        // Keep within bounds
+        point.x = Math.max(0, Math.min(canvas.width, point.x));
+        point.y = Math.max(0, Math.min(canvas.height, point.y));
+
+        // Draw connections
+        points.forEach((otherPoint, j) => {
+          if (i >= j) return;
+
+          const dx = point.x - otherPoint.x;
+          const dy = point.y - otherPoint.y;
+          const distance = Math.sqrt(dx * dx + dy * dy);
+
+          if (distance < maxDistance) {
+            const opacity = (1 - distance / maxDistance) * 0.2;
+            ctx.strokeStyle = `rgba(13, 110, 253, ${opacity})`; // Bootstrap primary color
+            ctx.lineWidth = 0.5;
+            ctx.beginPath();
+            ctx.moveTo(point.x, point.y);
+            ctx.lineTo(otherPoint.x, otherPoint.y);
+            ctx.stroke();
+          }
+        });
+
+        // Draw point with glow effect
+        ctx.shadowBlur = 10;
+        ctx.shadowColor = 'rgba(13, 110, 253, 0.5)';
+        ctx.fillStyle = 'rgba(13, 110, 253, 0.7)';
+        ctx.beginPath();
+        ctx.arc(point.x, point.y, 2.5, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.shadowBlur = 0;
+      });
+
+      animationFrameRef.current = requestAnimationFrame(animate);
+    };
+
+    animate();
+
+    return () => {
+      window.removeEventListener('resize', resizeCanvas);
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        zIndex: 0,
+      }}
+    />
+  );
+};