claude-cortex 1.0.0 → 1.1.0

package/dashboard/src/components/brain/DataStreamRings.tsx

@@ -0,0 +1,161 @@
+'use client';
+
+/**
+ * Data Stream Rings
+ * Creates orbital rings around the brain with data particles flowing along them
+ * Part of the Jarvis holographic aesthetic - particles flow around ring circumferences
+ * Uses BufferGeometry with Float32Array for GPU efficiency
+ */
+
+import { useMemo, useRef } from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+
+interface RingConfig {
+  radius: number;
+  tiltX: number;
+  tiltZ: number;
+  particleCount: number;
+  speed: number;
+  colorIndex: number; // 0 = gold, 1 = warm gold, 2 = deep orange
+}
+
+// Ring configurations with different radii and tilts for visual variety
+const RING_CONFIGS: RingConfig[] = [
+  { radius: 4.0, tiltX: 0.3, tiltZ: 0.1, particleCount: 16, speed: 0.8, colorIndex: 0 },
+  { radius: 4.5, tiltX: -0.2, tiltZ: 0.4, particleCount: 18, speed: 0.6, colorIndex: 1 },
+  { radius: 5.0, tiltX: 0.5, tiltZ: -0.2, particleCount: 20, speed: 0.7, colorIndex: 2 },
+  { radius: 5.5, tiltX: -0.4, tiltZ: -0.3, particleCount: 14, speed: 0.9, colorIndex: 0 },
+  { radius: 6.0, tiltX: 0.1, tiltZ: 0.5, particleCount: 12, speed: 0.5, colorIndex: 1 },
+];
+
+// Golden color palette matching the Jarvis aesthetic
+const COLORS = [
+  { r: 1.0, g: 0.843, b: 0.0 },   // #FFD700 - Bright gold
+  { r: 1.0, g: 0.702, b: 0.278 }, // #FFB347 - Warm gold
+  { r: 1.0, g: 0.549, b: 0.0 },   // #FF8C00 - Deep orange
+];
+
+interface DataStreamRingProps {
+  config: RingConfig;
+}
+
+/**
+ * Single orbital ring with flowing particles
+ */
+function DataStreamRing({ config }: DataStreamRingProps) {
+  const pointsRef = useRef<THREE.Points>(null);
+  const groupRef = useRef<THREE.Group>(null);
+
+  // Initialize particle positions and phases along the ring circumference
+  const { positions, phases, colors } = useMemo(() => {
+    const { radius, particleCount, colorIndex } = config;
+    const positions = new Float32Array(particleCount * 3);
+    const phases = new Float32Array(particleCount);
+    const colors = new Float32Array(particleCount * 3);
+
+    const baseColor = COLORS[colorIndex];
+
+    for (let i = 0; i < particleCount; i++) {
+      // Distribute particles evenly around the ring with some randomness
+      const baseAngle = (i / particleCount) * Math.PI * 2;
+      const angleOffset = (Math.random() - 0.5) * 0.2; // Small random offset
+      const angle = baseAngle + angleOffset;
+
+      phases[i] = angle;
+
+      // Position on ring circumference (XZ plane, will be tilted by group rotation)
+      positions[i * 3] = Math.cos(angle) * radius;
+      positions[i * 3 + 1] = (Math.random() - 0.5) * 0.1; // Slight Y variation
+      positions[i * 3 + 2] = Math.sin(angle) * radius;
+
+      // Color with slight variation for visual interest
+      const colorVariation = 0.9 + Math.random() * 0.2;
+      colors[i * 3] = baseColor.r * colorVariation;
+      colors[i * 3 + 1] = baseColor.g * colorVariation;
+      colors[i * 3 + 2] = baseColor.b * colorVariation;
+    }
+
+    return { positions, phases, colors };
+  }, [config]);
+
+  // Animate particles flowing around the ring
+  useFrame((state, delta) => {
+    if (!pointsRef.current) return;
+
+    const { radius, particleCount, speed } = config;
+    const positionAttr = pointsRef.current.geometry.attributes
+      .position as THREE.BufferAttribute;
+    const positions = positionAttr.array as Float32Array;
+    const time = state.clock.elapsedTime;
+
+    for (let i = 0; i < particleCount; i++) {
+      // Update phase (angle) to create flow around the ring
+      phases[i] += delta * speed;
+
+      // Wrap angle
+      if (phases[i] > Math.PI * 2) {
+        phases[i] -= Math.PI * 2;
+      }
+
+      const angle = phases[i];
+
+      // Add subtle wave motion to the radius for organic feel
+      const radiusWave = radius + Math.sin(time * 2 + angle * 3) * 0.05;
+
+      // Update position on ring circumference
+      positions[i * 3] = Math.cos(angle) * radiusWave;
+      positions[i * 3 + 1] = Math.sin(time * 1.5 + angle) * 0.08; // Gentle vertical oscillation
+      positions[i * 3 + 2] = Math.sin(angle) * radiusWave;
+    }
+
+    positionAttr.needsUpdate = true;
+  });
+
+  return (
+    <group ref={groupRef} rotation={[config.tiltX, 0, config.tiltZ]}>
+      <points ref={pointsRef}>
+        <bufferGeometry>
+          <bufferAttribute
+            attach="attributes-position"
+            args={[positions, 3]}
+          />
+          <bufferAttribute
+            attach="attributes-color"
+            args={[colors, 3]}
+          />
+        </bufferGeometry>
+        <pointsMaterial
+          size={0.04}
+          vertexColors
+          transparent
+          opacity={0.4}
+          blending={THREE.AdditiveBlending}
+          depthWrite={false}
+          sizeAttenuation
+        />
+      </points>
+    </group>
+  );
+}
+
+interface DataStreamRingsProps {
+  visible?: boolean;
+}
+
+/**
+ * All orbital data stream rings around the brain
+ */
+export function DataStreamRings({ visible = true }: DataStreamRingsProps) {
+  if (!visible) return null;
+
+  return (
+    <group>
+      {RING_CONFIGS.map((config, index) => (
+        <DataStreamRing key={index} config={config} />
+      ))}
+    </group>
+  );
+}
+
+export default DataStreamRings;

package/dashboard/src/components/brain/ElectronFlow.tsx

@@ -0,0 +1,323 @@
+'use client';
+
+/**
+ * Electron Flow
+ * GPU-efficient particle system showing electrical signals flowing through the brain
+ * Uses buffer attributes for performant animation of many particles
+ */
+
+import { useMemo, useRef } from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+
+interface ElectronFlowProps {
+  count?: number;
+  speed?: number;
+  color?: string;
+  size?: number;
+}
+
+/**
+ * Main electron flow through the brain
+ * Particles flow from front (STM) to back (LTM) with some randomness
+ */
+export function ElectronFlow({
+  count = 250,
+  speed = 0.5,
+  color = '#FFD700',
+  size = 0.04,
+}: ElectronFlowProps) {
+  const pointsRef = useRef<THREE.Points>(null);
+
+  // Initialize particle positions, velocities, and properties
+  const { positions, velocities, phases, colors } = useMemo(() => {
+    const positions = new Float32Array(count * 3);
+    const velocities = new Float32Array(count * 3);
+    const phases = new Float32Array(count);
+    const colors = new Float32Array(count * 3);
+
+    for (let i = 0; i < count; i++) {
+      // Random position within brain volume
+      const theta = Math.random() * Math.PI * 2;
+      const phi = Math.PI * 0.2 + Math.random() * Math.PI * 0.6;
+      const r = 1.5 + Math.random() * 2;
+
+      positions[i * 3] = r * Math.sin(phi) * Math.cos(theta);
+      positions[i * 3 + 1] = r * Math.cos(phi);
+      positions[i * 3 + 2] = -3 + Math.random() * 6;
+
+      // Velocity - mostly flowing backward (STM to LTM direction)
+      velocities[i * 3] = (Math.random() - 0.5) * 0.3;
+      velocities[i * 3 + 1] = (Math.random() - 0.5) * 0.2;
+      velocities[i * 3 + 2] = -0.5 - Math.random() * 0.5; // Backward flow
+
+      // Random phase for varied animation
+      phases[i] = Math.random() * Math.PI * 2;
+
+      // Color gradient based on Z position (front=bright gold, middle=warm gold, back=deep orange)
+      const normalizedZ = (positions[i * 3 + 2] + 3) / 6;
+      if (normalizedZ > 0.6) {
+        // Front - bright gold (#FFD700)
+        colors[i * 3] = 1.0;
+        colors[i * 3 + 1] = 0.843;
+        colors[i * 3 + 2] = 0.0;
+      } else if (normalizedZ > 0.4) {
+        // Middle - warm gold (#FFB347)
+        colors[i * 3] = 1.0;
+        colors[i * 3 + 1] = 0.702;
+        colors[i * 3 + 2] = 0.278;
+      } else {
+        // Back - deep orange (#FF8C00)
+        colors[i * 3] = 1.0;
+        colors[i * 3 + 1] = 0.549;
+        colors[i * 3 + 2] = 0.0;
+      }
+    }
+
+    return { positions, velocities, phases, colors };
+  }, [count]);
+
+  // Animate particles
+  useFrame((state, delta) => {
+    if (!pointsRef.current) return;
+
+    const positionAttr = pointsRef.current.geometry.attributes
+      .position as THREE.BufferAttribute;
+    const colorAttr = pointsRef.current.geometry.attributes
+      .color as THREE.BufferAttribute;
+    const positions = positionAttr.array as Float32Array;
+    const colors = colorAttr.array as Float32Array;
+
+    for (let i = 0; i < count; i++) {
+      // Update position based on velocity
+      positions[i * 3] += velocities[i * 3] * delta * speed;
+      positions[i * 3 + 1] += velocities[i * 3 + 1] * delta * speed;
+      positions[i * 3 + 2] += velocities[i * 3 + 2] * delta * speed;
+
+      // Add some wave motion
+      const phase = phases[i];
+      positions[i * 3] += Math.sin(state.clock.elapsedTime * 2 + phase) * 0.002;
+      positions[i * 3 + 1] += Math.cos(state.clock.elapsedTime * 1.5 + phase) * 0.002;
+
+      // Wrap around when reaching back of brain
+      if (positions[i * 3 + 2] < -3.5) {
+        positions[i * 3 + 2] = 3.5;
+        // Randomize X and Y on wrap
+        const theta = Math.random() * Math.PI * 2;
+        const r = 1 + Math.random() * 2;
+        positions[i * 3] = r * Math.cos(theta);
+        positions[i * 3 + 1] = (Math.random() - 0.5) * 2;
+      }
+
+      // Update color based on new Z position (golden gradient)
+      const normalizedZ = (positions[i * 3 + 2] + 3.5) / 7;
+      if (normalizedZ > 0.6) {
+        // Front - bright gold (#FFD700)
+        colors[i * 3] = 1.0;
+        colors[i * 3 + 1] = 0.843;
+        colors[i * 3 + 2] = 0.0;
+      } else if (normalizedZ > 0.35) {
+        // Middle - warm gold (#FFB347)
+        colors[i * 3] = 1.0;
+        colors[i * 3 + 1] = 0.702;
+        colors[i * 3 + 2] = 0.278;
+      } else {
+        // Back - deep orange (#FF8C00)
+        colors[i * 3] = 1.0;
+        colors[i * 3 + 1] = 0.549;
+        colors[i * 3 + 2] = 0.0;
+      }
+    }
+
+    positionAttr.needsUpdate = true;
+    colorAttr.needsUpdate = true;
+  });
+
+  return (
+    <points ref={pointsRef}>
+      <bufferGeometry>
+        <bufferAttribute
+          attach="attributes-position"
+          args={[positions, 3]}
+        />
+        <bufferAttribute
+          attach="attributes-color"
+          args={[colors, 3]}
+        />
+      </bufferGeometry>
+      <pointsMaterial
+        size={size}
+        vertexColors
+        transparent
+        opacity={0.8}
+        blending={THREE.AdditiveBlending}
+        depthWrite={false}
+        sizeAttenuation
+      />
+    </points>
+  );
+}
+
+/**
+ * Radial burst of electrons (for action potential visualization)
+ */
+interface ElectronBurstProps {
+  origin: [number, number, number];
+  count?: number;
+  duration?: number;
+  color?: string;
+  onComplete?: () => void;
+}
+
+export function ElectronBurst({
+  origin,
+  count = 20,
+  duration = 1,
+  color = '#ffffff',
+  onComplete,
+}: ElectronBurstProps) {
+  const pointsRef = useRef<THREE.Points>(null);
+  const progressRef = useRef(0);
+
+  const { positions, velocities } = useMemo(() => {
+    const positions = new Float32Array(count * 3);
+    const velocities = new Float32Array(count * 3);
+
+    for (let i = 0; i < count; i++) {
+      // Start at origin
+      positions[i * 3] = origin[0];
+      positions[i * 3 + 1] = origin[1];
+      positions[i * 3 + 2] = origin[2];
+
+      // Random outward velocity
+      const theta = Math.random() * Math.PI * 2;
+      const phi = Math.random() * Math.PI;
+      const speed = 1 + Math.random() * 2;
+
+      velocities[i * 3] = Math.sin(phi) * Math.cos(theta) * speed;
+      velocities[i * 3 + 1] = Math.cos(phi) * speed;
+      velocities[i * 3 + 2] = Math.sin(phi) * Math.sin(theta) * speed;
+    }
+
+    return { positions, velocities };
+  }, [origin, count]);
+
+  useFrame((_, delta) => {
+    if (!pointsRef.current) return;
+
+    progressRef.current += delta / duration;
+
+    if (progressRef.current >= 1) {
+      onComplete?.();
+      return;
+    }
+
+    const positionAttr = pointsRef.current.geometry.attributes
+      .position as THREE.BufferAttribute;
+    const positions = positionAttr.array as Float32Array;
+
+    for (let i = 0; i < count; i++) {
+      positions[i * 3] += velocities[i * 3] * delta;
+      positions[i * 3 + 1] += velocities[i * 3 + 1] * delta;
+      positions[i * 3 + 2] += velocities[i * 3 + 2] * delta;
+    }
+
+    positionAttr.needsUpdate = true;
+
+    // Fade out
+    (pointsRef.current.material as THREE.PointsMaterial).opacity =
+      0.9 * (1 - progressRef.current);
+  });
+
+  return (
+    <points ref={pointsRef}>
+      <bufferGeometry>
+        <bufferAttribute
+          attach="attributes-position"
+          args={[positions, 3]}
+        />
+      </bufferGeometry>
+      <pointsMaterial
+        size={0.06}
+        color={color}
+        transparent
+        opacity={0.9}
+        blending={THREE.AdditiveBlending}
+        depthWrite={false}
+      />
+    </points>
+  );
+}
+
+/**
+ * Spiral flow around the brain (decorative)
+ */
+export function SpiralFlow({
+  count = 60,
+  radius = 4,
+  speed = 0.3,
+  color = '#FFB347',
+}: {
+  count?: number;
+  radius?: number;
+  speed?: number;
+  color?: string;
+}) {
+  const pointsRef = useRef<THREE.Points>(null);
+
+  const { positions, phases } = useMemo(() => {
+    const positions = new Float32Array(count * 3);
+    const phases = new Float32Array(count);
+
+    for (let i = 0; i < count; i++) {
+      const t = i / count;
+      phases[i] = t * Math.PI * 4; // Multiple loops
+
+      positions[i * 3] = Math.cos(phases[i]) * radius;
+      positions[i * 3 + 1] = (t - 0.5) * 6;
+      positions[i * 3 + 2] = Math.sin(phases[i]) * radius;
+    }
+
+    return { positions, phases };
+  }, [count, radius]);
+
+  useFrame((state) => {
+    if (!pointsRef.current) return;
+
+    const positionAttr = pointsRef.current.geometry.attributes
+      .position as THREE.BufferAttribute;
+    const positions = positionAttr.array as Float32Array;
+    const time = state.clock.elapsedTime * speed;
+
+    for (let i = 0; i < count; i++) {
+      const t = i / count;
+      const phase = phases[i] + time;
+      const r = radius + Math.sin(phase * 2) * 0.3;
+
+      positions[i * 3] = Math.cos(phase) * r;
+      positions[i * 3 + 1] = (t - 0.5) * 6 + Math.sin(time + t * Math.PI * 2) * 0.2;
+      positions[i * 3 + 2] = Math.sin(phase) * r;
+    }
+
+    positionAttr.needsUpdate = true;
+  });
+
+  return (
+    <points ref={pointsRef}>
+      <bufferGeometry>
+        <bufferAttribute
+          attach="attributes-position"
+          args={[positions, 3]}
+        />
+      </bufferGeometry>
+      <pointsMaterial
+        size={0.05}
+        color={color}
+        transparent
+        opacity={0.4}
+        blending={THREE.AdditiveBlending}
+        depthWrite={false}
+      />
+    </points>
+  );
+}

package/dashboard/src/components/brain/HolographicGrid.tsx

@@ -0,0 +1,235 @@
+'use client';
+
+/**
+ * Holographic Grid
+ * Geodesic wireframe sphere surrounding the brain
+ * Creates the iconic Jarvis-style holographic grid effect
+ *
+ * Features:
+ * - IcosahedronGeometry with detail level 2 for geodesic look
+ * - EdgesGeometry for clean wireframe rendering
+ * - Subtle pulsing animation (opacity oscillation)
+ * - Scan line effect (bright band moving vertically through the grid)
+ */
+
+import { useMemo, useRef, useEffect } from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+
+interface HolographicGridProps {
+  /** Radius of the geodesic sphere (default: 6) */
+  radius?: number;
+  /** Base color of the grid (default: #FFB347 - warm gold) */
+  color?: string;
+  /** Base opacity of the grid (default: 0.08) */
+  opacity?: number;
+  /** Enable pulsing animation (default: true) */
+  enablePulse?: boolean;
+  /** Enable scan line effect (default: true) */
+  enableScanLine?: boolean;
+  /** Speed of the scan line (default: 1) */
+  scanLineSpeed?: number;
+  /** Visibility toggle */
+  visible?: boolean;
+}
+
+/**
+ * Custom shader material for the holographic grid with scan line effect
+ */
+function createGridShaderMaterial(color: THREE.Color, baseOpacity: number) {
+  return new THREE.ShaderMaterial({
+    uniforms: {
+      uColor: { value: color },
+      uBaseOpacity: { value: baseOpacity },
+      uPulseOpacity: { value: 0 },
+      uScanLineY: { value: 0 },
+      uScanLineWidth: { value: 0.3 },
+      uScanLineIntensity: { value: 0.15 },
+      uTime: { value: 0 },
+    },
+    vertexShader: `
+      varying vec3 vPosition;
+
+      void main() {
+        vPosition = position;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      }
+    `,
+    fragmentShader: `
+      uniform vec3 uColor;
+      uniform float uBaseOpacity;
+      uniform float uPulseOpacity;
+      uniform float uScanLineY;
+      uniform float uScanLineWidth;
+      uniform float uScanLineIntensity;
+      uniform float uTime;
+
+      varying vec3 vPosition;
+
+      void main() {
+        // Base opacity with pulse
+        float opacity = uBaseOpacity + uPulseOpacity;
+
+        // Scan line effect - bright band at current Y position
+        float scanLineDist = abs(vPosition.y - uScanLineY);
+        float scanLineEffect = smoothstep(uScanLineWidth, 0.0, scanLineDist);
+
+        // Add scan line brightness
+        float finalOpacity = opacity + scanLineEffect * uScanLineIntensity;
+
+        // Slight color shift for scan line (more white/bright)
+        vec3 finalColor = mix(uColor, vec3(1.0, 0.95, 0.8), scanLineEffect * 0.5);
+
+        gl_FragColor = vec4(finalColor, finalOpacity);
+      }
+    `,
+    transparent: true,
+    depthWrite: false,
+    side: THREE.DoubleSide,
+    blending: THREE.AdditiveBlending,
+  });
+}
+
+export function HolographicGrid({
+  radius = 6,
+  color = '#FFB347',
+  opacity = 0.04,
+  enablePulse = true,
+  enableScanLine = true,
+  scanLineSpeed = 1,
+  visible = true,
+}: HolographicGridProps) {
+  const lineSegmentsRef = useRef<THREE.LineSegments>(null);
+  const materialRef = useRef<THREE.ShaderMaterial | null>(null);
+
+  // Create the geodesic geometry and edges
+  const { geometry, edgesGeometry } = useMemo(() => {
+    // IcosahedronGeometry with detail level 2 creates a nice geodesic sphere
+    const icosahedron = new THREE.IcosahedronGeometry(radius, 2);
+    // EdgesGeometry extracts the edges for wireframe rendering
+    const edges = new THREE.EdgesGeometry(icosahedron);
+
+    return { geometry: icosahedron, edgesGeometry: edges };
+  }, [radius]);
+
+  // Create shader material
+  const material = useMemo(() => {
+    const colorObj = new THREE.Color(color);
+    return createGridShaderMaterial(colorObj, opacity);
+  }, [color, opacity]);
+
+  // Sync materialRef with material (cannot update ref during render)
+  useEffect(() => {
+    materialRef.current = material;
+  }, [material]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      geometry.dispose();
+      edgesGeometry.dispose();
+      material.dispose();
+    };
+  }, [geometry, edgesGeometry, material]);
+
+  // Animation loop
+  useFrame((state) => {
+    if (!materialRef.current || !visible) return;
+
+    const time = state.clock.elapsedTime;
+    const uniforms = materialRef.current.uniforms;
+
+    // Update time uniform
+    uniforms.uTime.value = time;
+
+    // Subtle pulsing animation - opacity varies slightly
+    if (enablePulse) {
+      // Slow breathing effect with slight random flicker
+      const breathe = Math.sin(time * 0.8) * 0.015;
+      const flicker = Math.random() > 0.97 ? 0.02 : 0;
+      uniforms.uPulseOpacity.value = breathe + flicker;
+    } else {
+      uniforms.uPulseOpacity.value = 0;
+    }
+
+    // Scan line effect - bright band moving vertically
+    if (enableScanLine) {
+      // Scan line moves from bottom (-radius) to top (+radius) and wraps
+      const scanCycle = (time * scanLineSpeed * 0.3) % 1;
+      // Smooth ease in/out for the scan position
+      const eased = scanCycle < 0.5
+        ? 2 * scanCycle * scanCycle
+        : 1 - Math.pow(-2 * scanCycle + 2, 2) / 2;
+      const scanY = (eased * 2 - 1) * radius;
+      uniforms.uScanLineY.value = scanY;
+    }
+  });
+
+  if (!visible) return null;
+
+  return (
+    <lineSegments ref={lineSegmentsRef} geometry={edgesGeometry} material={material} />
+  );
+}
+
+/**
+ * Alternative simpler version using LineBasicMaterial (no scan line effect)
+ * Use this if you don't need the scan line or want better performance
+ */
+export function HolographicGridSimple({
+  radius = 6,
+  color = '#FFB347',
+  opacity = 0.04,
+  enablePulse = true,
+  visible = true,
+}: Omit<HolographicGridProps, 'enableScanLine' | 'scanLineSpeed'>) {
+  const lineSegmentsRef = useRef<THREE.LineSegments>(null);
+
+  // Create the geodesic geometry and edges
+  const { geometry, edgesGeometry } = useMemo(() => {
+    const icosahedron = new THREE.IcosahedronGeometry(radius, 2);
+    const edges = new THREE.EdgesGeometry(icosahedron);
+    return { geometry: icosahedron, edgesGeometry: edges };
+  }, [radius]);
+
+  // Create line material
+  const material = useMemo(() => {
+    return new THREE.LineBasicMaterial({
+      color: new THREE.Color(color),
+      transparent: true,
+      opacity: opacity,
+      depthWrite: false,
+      blending: THREE.AdditiveBlending,
+    });
+  }, [color, opacity]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      geometry.dispose();
+      edgesGeometry.dispose();
+      material.dispose();
+    };
+  }, [geometry, edgesGeometry, material]);
+
+  // Pulsing animation
+  useFrame((state) => {
+    if (!lineSegmentsRef.current || !visible || !enablePulse) return;
+
+    const time = state.clock.elapsedTime;
+    const mat = lineSegmentsRef.current.material as THREE.LineBasicMaterial;
+
+    // Subtle breathing effect
+    const breathe = Math.sin(time * 0.8) * 0.015;
+    const flicker = Math.random() > 0.97 ? 0.02 : 0;
+    mat.opacity = opacity + breathe + flicker;
+  });
+
+  if (!visible) return null;
+
+  return (
+    <lineSegments ref={lineSegmentsRef} geometry={edgesGeometry} material={material} />
+  );
+}
+
+export default HolographicGrid;