Digital Brain Animation

1npm install framer-motion clsx tailwind-merge

1"use client";
2
3import { motion } from "framer-motion";
4import { useEffect, useState } from "react";
5
6const Node = ({ x, y, delay }) => (
7  <motion.circle
8    cx={x}
9    cy={y}
10    r="4"
11    fill="#8b5cf6"
12    initial={{ opacity: 0.2, scale: 0.8 }}
13    animate={{ opacity: [0.2, 1, 0.2], scale: [0.8, 1.2, 0.8] }}
14    transition={{ duration: 2, delay, repeat: Infinity, ease: "easeInOut" }}
15  />
16);
17
18const Connection = ({ x1, y1, x2, y2, delay }) => (
19  <motion.line
20    x1={x1}
21    y1={y1}
22    x2={x2}
23    y2={y2}
24    stroke="#8b5cf6"
25    strokeWidth="1.5"
26    initial={{ pathLength: 0, opacity: 0 }}
27    animate={{ pathLength: [0, 1, 1], opacity: [0, 0.5, 0] }}
28    transition={{ duration: 3, delay, repeat: Infinity, ease: "easeInOut" }}
29  />
30);
31
32export default function DigitalBrainAnimation() {
33  const [mounted, setMounted] = useState(false);
34
35  useEffect(() => {
36    setMounted(true);
37  }, []);
38
39  if (!mounted) return null;
40
41  // Manually plotted nodes to vaguely resemble a brain hemisphere
42  const nodes = [
43    { x: 150, y: 50 }, { x: 200, y: 40 }, { x: 250, y: 60 },
44    { x: 120, y: 100 }, { x: 180, y: 90 }, { x: 230, y: 110 }, { x: 280, y: 100 },
45    { x: 100, y: 160 }, { x: 160, y: 150 }, { x: 210, y: 160 }, { x: 270, y: 150 }, { x: 310, y: 140 },
46    { x: 130, y: 220 }, { x: 190, y: 210 }, { x: 250, y: 220 }, { x: 290, y: 190 },
47    { x: 170, y: 270 }, { x: 220, y: 260 }, { x: 260, y: 240 }
48  ];
49
50  // Random connections
51  const connections = [];
52  for (let i = 0; i < nodes.length; i++) {
53    for (let j = i + 1; j < nodes.length; j++) {
54      const dist = Math.hypot(nodes[i].x - nodes[j].x, nodes[i].y - nodes[j].y);
55      if (dist < 80) {
56        connections.push({ n1: nodes[i], n2: nodes[j], delay: Math.random() * 2 });
57      }
58    }
59  }
60
61  return (
62    <div className="relative w-full h-[400px] flex items-center justify-center bg-[#030303] rounded-2xl border border-white/5 overflow-hidden">
63      
64      {/* Background glow */}
65      <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
66        <div className="w-[300px] h-[300px] bg-violet-600/10 rounded-full blur-[100px]" />
67      </div>
68
69      <svg width="400" height="320" className="relative z-10" viewBox="0 0 400 320">
70        {/* Draw connections */}
71        {connections.map((conn, idx) => (
72          <Connection 
73            key={`conn-${idx}`} 
74            x1={conn.n1.x} 
75            y1={conn.n1.y} 
76            x2={conn.n2.x} 
77            y2={conn.n2.y} 
78            delay={conn.delay} 
79          />
80        ))}
81
82        {/* Draw nodes */}
83        {nodes.map((n, idx) => (
84          <Node key={`node-${idx}`} x={n.x} y={n.y} delay={Math.random() * 2} />
85        ))}
86      </svg>
87      
88      <div className="absolute bottom-6 left-6 z-20">
89        <h3 className="text-xl font-bold text-white tracking-wide">Neural Engine</h3>
90        <p className="text-sm text-violet-400">Processing nodes active...</p>
91      </div>
92    </div>
93  );
94}
95