Visualize Stone's Law of Universiality

Here is an interactive graduated field concentration program representing Travis Raymond-Charlie Stone's Law Of Universiality and Unified Fields Theory of Everything. Supportive documentation gives reasoning, imagery, logic and information about how this conceptual structure can explain our existence in the universe. 

Published link:

https://claude.ai/public/artifacts/f02efea6-23b2-4d0f-8250-1f57299bafff

This is an interactive 3D tensor field visualization system that represents complex multi-dimensional data relationships. Here's what it does and how to use it:

What It Represents

The system visualizes a tensor field - a mathematical structure that contains values arranged in a 3D grid (like a cube of numbers). Each position in the grid holds a value between -9 and +9, represented as colored spheres in 3D space.

The visualization implements several advanced concepts:

• Thread Sets: Six different computational "threads" that process the tensor data using different mathematical operations (like a + b → c). Each thread set has its own color scheme.
• Coherence States: The system can be in "coherent" (synchronized, stable) or "decoherent" (noisy, quantum-like) modes.
• Aspect Permutations: Different ways to arrange the coordinate system (XYZ, ZYX, YXZ, etc.).
• F(n) Calculations: Shows exponential growth calculations based on the formula F(n) = 6 × 19^(n³).

How to Use It

3D Visualization

• Drag with mouse to rotate the camera around the tensor field
• Sphere colors indicate which thread set is active
• Sphere sizes represent the magnitude of values at each position
• Numbers floating above spheres show the actual tensor values
• Lines between spheres (if enabled) show connections in the grid

Key Controls

1. n-Field Size Slider (2-5): Changes the grid dimensions from 2×2×2 up to 5×5×5 cubes
2. Coherence Mode: Switch between "Coherent" (stable, synchronized) and "Decoherent" (noisy, quantum-like) states
3. Thread Set Selection: Click on any of the 6 colored thread sets to change the visualization color scheme and computational focus
4. Aspect Permutation: Choose how the coordinate system is arranged (XYZ, ZYX, etc.)
5. Suspicion Index: Influences how the thread calculations correlate with each other

Interactive Buttons

• Start/Stop Rotation: Auto-rotates the 3D view
• Regenerate Field: Creates new random tensor values
• Show/Hide Connections: Toggles the lines connecting grid points

What You'll See

The system displays live calculations, thread outputs, and system status. As you adjust parameters, you'll see how different mathematical operations affect the tensor field, how coherence modes change the visual appearance, and how the exponential F(n) calculations scale dramatically with grid size.

This appears to be designed for exploring complex mathematical relationships, possibly related to quantum computing, tensor mathematics, or multi-dimensional data analysis in an interactive, visual way.

code:

import React, { useState, useRef, useEffect, useCallback } from 'react';
import * as THREE from 'three';

const TensorVisualization = () => {
  const mountRef = useRef(null);
  const sceneRef = useRef(null);
  const rendererRef = useRef(null);
  const cameraRef = useRef(null);
  const gridGroupRef = useRef(null);
  const animationIdRef = useRef(null);
  const mouseRef = useRef({ x: 0, y: 0, isDown: false });
  
  const [selectedAspect, setSelectedAspect] = useState('XYZ');
  const [isAnimating, setIsAnimating] = useState(false);
  const [nField, setNField] = useState(3);
  const [selectedThreadSet, setSelectedThreadSet] = useState(0);
  const [showConnections, setShowConnections] = useState(true);
  const [tensorValues, setTensorValues] = useState(() => {
    // Initialize random tensor values for 3x3x3 grid
    const values = {};
    for (let i = 0; i < 27; i++) {
      values[i] = Math.floor(Math.random() * 19) - 9;
    }
    return values;
  });
  const [coherenceMode, setCoherenceMode] = useState('coherent');
  const [suspicionIndex, setSuspicionIndex] = useState(1);

  const aspects = ['XYZ', 'ZYX', 'YXZ', 'ZXY', 'XZY', 'YZX'];
  const threadSets = [
    { name: 'a,b,c', axis: 'X (b)', color: '#ff4444', logic: 'a + b → c', output: 'x_b' },
    { name: 'd,e,f', axis: 'Y (e)', color: '#44ff44', logic: 'd + f → e', output: 'y_e' },
    { name: 'g,h,i', axis: 'Z (h)', color: '#4444ff', logic: 'g + i → h', output: 'z_h' },
    { name: 'j,k,l', axis: "X' (k)", color: '#ff44ff', logic: 'j + l → k', output: 'x_k' },
    { name: 'm,n,o', axis: "Y' (n)", color: '#44ffff', logic: 'm + o → n', output: 'y_n' },
    { name: 'p,q,r', axis: "Z' (q)", color: '#ffff44', logic: 'p + r → q', output: 'z_q' }
  ];

  // Calculate F(n) values
  const calculateFn = (n) => {
    const exponent = Math.pow(n, 3);
    const logResult = Math.log10(6) + exponent * Math.log10(19);
    return { exponent, logResult, scientific: Math.pow(10, logResult).toExponential(3) };
  };

  // Generate tensor field based on current settings
  const generateTensorField = useCallback(() => {
    const newValues = {};
    const gridSize = Math.pow(nField, 3);
    
    if (coherenceMode === 'coherent') {
      // Coherent state - values follow pattern
      for (let i = 0; i < gridSize; i++) {
        const baseValue = Math.floor(Math.random() * 19) - 9;
        newValues[i] = baseValue;
      }
    } else {
      // Decoherent state - add significant noise
      for (let i = 0; i < gridSize; i++) {
        const baseValue = Math.floor(Math.random() * 19) - 9;
        const noise = Math.floor(Math.random() * 12) - 6; // -6 to 6 noise
        newValues[i] = Math.max(-9, Math.min(9, baseValue + noise));
      }
    }
    
    setTensorValues(newValues);
  }, [nField, coherenceMode]);

  // Calculate thread logic outputs
  const calculateThreadOutputs = useCallback(() => {
    const outputs = {};
    threadSets.forEach((set, index) => {
      // Get values from different positions for each thread set
      const gridSize = Math.pow(nField, 3);
      const a = tensorValues[Math.min(index * 3, gridSize - 1)] || 0;
      const b = tensorValues[Math.min(index * 3 + 1, gridSize - 1)] || 0;
      const c = tensorValues[Math.min(index * 3 + 2, gridSize - 1)] || 0;
      
      // Apply thread logic with suspicion index influence
      let result;
      switch (index % 3) {
        case 0:
          result = ((a + b) * suspicionIndex) % 19 - 9;
          break;
        case 1:
          result = ((a * c) + suspicionIndex) % 19 - 9;
          break;
        case 2:
          result = ((b - c + suspicionIndex)) % 19 - 9;
          break;
        default:
          result = (a + c) % 19 - 9;
      }
      
      outputs[set.output] = Math.max(-9, Math.min(9, result));
    });
    return outputs;
  }, [tensorValues, nField, suspicionIndex]);

  // Handle mouse interactions
  const handleMouseDown = useCallback((event) => {
    event.preventDefault();
    mouseRef.current.isDown = true;
    mouseRef.current.x = event.clientX;
    mouseRef.current.y = event.clientY;
  }, []);

  const handleMouseMove = useCallback((event) => {
    if (!mouseRef.current.isDown || !cameraRef.current) return;
    
    event.preventDefault();
    const deltaX = event.clientX - mouseRef.current.x;
    const deltaY = event.clientY - mouseRef.current.y;
    
    // Rotate camera around the scene
    const spherical = new THREE.Spherical();
    spherical.setFromVector3(cameraRef.current.position);
    spherical.theta -= deltaX * 0.01;
    spherical.phi += deltaY * 0.01;
    spherical.phi = Math.max(0.1, Math.min(Math.PI - 0.1, spherical.phi));
    
    cameraRef.current.position.setFromSpherical(spherical);
    cameraRef.current.lookAt(0, 0, 0);
    
    mouseRef.current.x = event.clientX;
    mouseRef.current.y = event.clientY;
  }, []);

  const handleMouseUp = useCallback((event) => {
    event.preventDefault();
    mouseRef.current.isDown = false;
  }, []);

  // Initialize Three.js scene
  useEffect(() => {
    if (!mountRef.current) return;

    // Clear any existing renderer
    while (mountRef.current.firstChild) {
      mountRef.current.removeChild(mountRef.current.firstChild);
    }

    // Scene setup
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x000015);
    sceneRef.current = scene;

    const camera = new THREE.PerspectiveCamera(75, 580/400, 0.1, 1000);
    cameraRef.current = camera;
    
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(580, 400);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    rendererRef.current = renderer;
    mountRef.current.appendChild(renderer.domElement);

    // Add lighting
    const ambientLight = new THREE.AmbientLight(0x404040, 0.4);
    scene.add(ambientLight);
    
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
    directionalLight.position.set(10, 10, 5);
    directionalLight.castShadow = true;
    directionalLight.shadow.mapSize.width = 2048;
    directionalLight.shadow.mapSize.height = 2048;
    scene.add(directionalLight);

    // Create grid group
    const gridGroup = new THREE.Group();
    gridGroupRef.current = gridGroup;
    scene.add(gridGroup);

    // Add coordinate axes
    const axesHelper = new THREE.AxesHelper(5);
    scene.add(axesHelper);

    // Camera position based on nField
    const distance = Math.max(8, nField * 3);
    camera.position.set(distance, distance * 0.8, distance);
    camera.lookAt(0, 0, 0);

    // Add mouse event listeners to the canvas
    const canvas = renderer.domElement;
    canvas.style.display = 'block';
    canvas.style.touchAction = 'none';
    canvas.addEventListener('mousedown', handleMouseDown, { passive: false });
    canvas.addEventListener('mousemove', handleMouseMove, { passive: false });
    canvas.addEventListener('mouseup', handleMouseUp, { passive: false });
    canvas.addEventListener('mouseleave', handleMouseUp, { passive: false });

    // Animation loop
    const animate = () => {
      animationIdRef.current = requestAnimationFrame(animate);
      
      if (isAnimating && gridGroupRef.current) {
        gridGroupRef.current.rotation.y += 0.008;
        gridGroupRef.current.rotation.x += 0.004;
      }
      
      renderer.render(scene, camera);
    };
    animate();

    return () => {
      if (animationIdRef.current) {
        cancelAnimationFrame(animationIdRef.current);
      }
      if (canvas) {
        canvas.removeEventListener('mousedown', handleMouseDown);
        canvas.removeEventListener('mousemove', handleMouseMove);
        canvas.removeEventListener('mouseup', handleMouseUp);
        canvas.removeEventListener('mouseleave', handleMouseUp);
      }
      renderer.dispose();
    };
  }, [handleMouseDown, handleMouseMove, handleMouseUp, isAnimating]);

  // Update visualization when parameters change
  useEffect(() => {
    if (!gridGroupRef.current) return;

    // Clear existing objects
    while (gridGroupRef.current.children.length > 0) {
      const child = gridGroupRef.current.children[0];
      gridGroupRef.current.remove(child);
      if (child.geometry) child.geometry.dispose();
      if (child.material) {
        if (Array.isArray(child.material)) {
          child.material.forEach(mat => mat.dispose());
        } else {
          child.material.dispose();
        }
      }
    }

    const gridSize = nField;
    const spacing = 2.5;
    const positions = [];
    
    // Generate positions based on selected aspect (coordinate permutation)
    for (let i = 0; i < gridSize; i++) {
      for (let j = 0; j < gridSize; j++) {
        for (let k = 0; k < gridSize; k++) {
          let x, y, z;
          
          // Apply aspect permutation
          switch (selectedAspect) {
            case 'XYZ': [x, y, z] = [i, j, k]; break;
            case 'ZYX': [x, y, z] = [k, j, i]; break;
            case 'YXZ': [x, y, z] = [j, i, k]; break;
            case 'ZXY': [x, y, z] = [k, i, j]; break;
            case 'XZY': [x, y, z] = [i, k, j]; break;
            case 'YZX': [x, y, z] = [j, k, i]; break;
            default: [x, y, z] = [i, j, k];
          }
          
          const pos = {
            x: (x - (gridSize - 1) / 2) * spacing,
            y: (y - (gridSize - 1) / 2) * spacing,
            z: (z - (gridSize - 1) / 2) * spacing,
            index: i * gridSize * gridSize + j * gridSize + k
          };
          positions.push(pos);
        }
      }
    }

    // Create spheres for each position
    positions.forEach((pos) => {
      const value = tensorValues[pos.index] || 0;
      const normalizedValue = (value + 9) / 18; // Normalize -9 to 9 → 0 to 1
      
      // Size based on absolute value and coherence mode
      const baseSize = coherenceMode === 'coherent' ? 0.15 : 0.12;
      const size = baseSize + Math.abs(value) * 0.03;
      
      const geometry = new THREE.SphereGeometry(size, 16, 16);
      
      // Color based on thread set and value
      const threadSetIndex = selectedThreadSet;
      const baseColor = new THREE.Color(threadSets[threadSetIndex].color);
      const color = baseColor.clone();
      
      if (value < 0) {
        color.multiplyScalar(0.4); // Much darker for negative values
      } else {
        color.multiplyScalar(0.6 + normalizedValue * 0.4);
      }
      
      // Add coherence effect to material
      const material = new THREE.MeshPhongMaterial({ 
        color: color,
        transparent: true,
        opacity: coherenceMode === 'coherent' ? 0.9 : 0.7,
        shininess: coherenceMode === 'coherent' ? 150 : 80,
        emissive: coherenceMode === 'decoherent' ? new THREE.Color(0x111111) : new THREE.Color(0x000000)
      });
      
      const sphere = new THREE.Mesh(geometry, material);
      sphere.position.set(pos.x, pos.y, pos.z);
      sphere.castShadow = true;
      sphere.receiveShadow = true;
      
      // Add value label
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      canvas.width = 64;
      canvas.height = 64;
      context.fillStyle = value < 0 ? '#ff6666' : '#66ff66';
      context.font = 'bold 20px Arial';
      context.textAlign = 'center';
      context.fillText(value.toString(), 32, 40);
      
      const texture = new THREE.CanvasTexture(canvas);
      const spriteMaterial = new THREE.SpriteMaterial({ 
        map: texture, 
        transparent: true,
        opacity: 0.8
      });
      const sprite = new THREE.Sprite(spriteMaterial);
      sprite.position.set(pos.x, pos.y + size + 0.4, pos.z);
      sprite.scale.set(0.6, 0.6, 0.6);
      
      gridGroupRef.current.add(sphere);
      gridGroupRef.current.add(sprite);
    });

    // Add connections if enabled
    if (showConnections && positions.length > 1) {
      const lineColor = new THREE.Color(threadSets[selectedThreadSet].color);
      const lineMaterial = new THREE.LineBasicMaterial({ 
        color: lineColor,
        transparent: true,
        opacity: coherenceMode === 'coherent' ? 0.5 : 0.2
      });
      
      // Connect adjacent points based on grid structure
      for (let i = 0; i < positions.length; i++) {
        const pos1 = positions[i];
        
        // Connect to nearby grid neighbors
        for (let j = i + 1; j < positions.length; j++) {
          const pos2 = positions[j];
          const distance = Math.sqrt(
            Math.pow(pos1.x - pos2.x, 2) + 
            Math.pow(pos1.y - pos2.y, 2) + 
            Math.pow(pos1.z - pos2.z, 2)
          );
          
          // Only connect immediate neighbors
          if (distance <= spacing * 1.1) {
            const points = [
              new THREE.Vector3(pos1.x, pos1.y, pos1.z),
              new THREE.Vector3(pos2.x, pos2.y, pos2.z)
            ];
            const geometry = new THREE.BufferGeometry().setFromPoints(points);
            const line = new THREE.Line(geometry, lineMaterial);
            gridGroupRef.current.add(line);
          }
        }
      }
    }

    // Update camera position based on grid size
    if (cameraRef.current) {
      const distance = Math.max(8, nField * 3.5);
      const currentPos = cameraRef.current.position.clone().normalize().multiplyScalar(distance);
      cameraRef.current.position.copy(currentPos);
      cameraRef.current.lookAt(0, 0, 0);
    }
  }, [nField, tensorValues, selectedThreadSet, showConnections, selectedAspect, coherenceMode]);

  // Regenerate tensor field when nField changes
  useEffect(() => {
    generateTensorField();
  }, [nField, generateTensorField]);

  const fnResults = Array.from({ length: 5 }, (_, i) => {
    const n = i + 1;
    const result = calculateFn(n);
    return { n, ...result };
  });

  const threadOutputs = calculateThreadOutputs();

  return (
    <div className="w-full max-w-7xl mx-auto p-4 bg-gray-900 text-white min-h-screen">
      <h1 className="text-2xl font-bold mb-6 text-center bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
        Interactive Multi-Dimensional Tensor Field
      </h1>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* 3D Visualization */}
        <div className="bg-gray-800 rounded-lg p-4">
          <h2 className="text-lg font-semibold mb-3">Interactive 3D Tensor Field (n={nField})</h2>
          <div 
            ref={mountRef} 
            className="w-full bg-gray-900 border border-gray-600 rounded overflow-hidden flex justify-center"
            style={{ height: '400px' }}
          />
          
          {/* Controls directly below the 3D view */}
          <div className="mt-4 space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="text-sm block mb-2 text-gray-300">Aspect Permutation:</label>
                <select 
                  value={selectedAspect}
                  onChange={(e) => setSelectedAspect(e.target.value)}
                  className="w-full bg-gray-700 text-white px-3 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none"
                >
                  {aspects.map(aspect => (
                    <option key={aspect} value={aspect}>{aspect}</option>
                  ))}
                </select>
              </div>
              
              <div>
                <label className="text-sm block mb-2 text-gray-300">Coherence Mode:</label>
                <select 
                  value={coherenceMode}
                  onChange={(e) => setCoherenceMode(e.target.value)}
                  className="w-full bg-gray-700 text-white px-3 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none"
                >
                  <option value="coherent">Coherent</option>
                  <option value="decoherent">Decoherent</option>
                </select>
              </div>
            </div>
            
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="text-sm block mb-2 text-gray-300">n-Field Size: {nField}</label>
                <input
                  type="range"
                  min="2"
                  max="5"
                  value={nField}
                  onChange={(e) => setNField(parseInt(e.target.value))}
                  className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
                />
              </div>
              
              <div>
                <label className="text-sm block mb-2 text-gray-300">Suspicion Index: {suspicionIndex}</label>
                <input
                  type="range"
                  min="1"
                  max="10"
                  value={suspicionIndex}
                  onChange={(e) => setSuspicionIndex(parseInt(e.target.value))}
                  className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
                />
              </div>
            </div>

            <div className="flex flex-wrap gap-2">
              <button
                onClick={() => setIsAnimating(!isAnimating)}
                className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500"
              >
                {isAnimating ? 'Stop' : 'Start'} Rotation
              </button>
              
              <button
                onClick={generateTensorField}
                className="bg-green-600 hover:bg-green-700 px-4 py-2 rounded text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-green-500"
              >
                Regenerate Field
              </button>
              
              <button
                onClick={() => setShowConnections(!showConnections)}
                className={`px-4 py-2 rounded text-sm transition-colors focus:outline-none focus:ring-2 ${
                  showConnections 
                    ? 'bg-yellow-600 hover:bg-yellow-700 focus:ring-yellow-500' 
                    : 'bg-gray-600 hover:bg-gray-700 focus:ring-gray-500'
                }`}
              >
                {showConnections ? ' Hide' : 'Show'} Connections
              </button>
            </div>
          </div>
        </div>

        {/* Control Panel */}
        <div className="space-y-4">
          {/* Thread Set Selection */}
          <div className="bg-gray-800 rounded-lg p-4">
            <h2 className="text-lg font-semibold mb-3">Thread Set Selection</h2>
            <div className="space-y-2 max-h-48 overflow-y-auto">
              {threadSets.map((set, index) => (
                <div 
                  key={index} 
                  className={`flex items-center gap-3 p-3 rounded cursor-pointer transition-all ${
                    index === selectedThreadSet 
                      ? 'bg-blue-900 border border-blue-600 shadow-lg' 
                      : 'bg-gray-700 hover:bg-gray-600 border border-transparent'
                  }`}
                  onClick={() => setSelectedThreadSet(index)}
                >
                  <div 
                    className="w-4 h-4 rounded-full flex-shrink-0 border border-gray-400" 
                    style={{ backgroundColor: set.color }}
                  />
                  <div className="flex-1 min-w-0">
                    <div className="font-mono text-sm font-semibold">{set.name}</div>
                    <div className="text-xs text-gray-300">{set.axis} • {set.logic}</div>
                  </div>
                  <div className="font-mono text-sm text-green-400 font-bold">
                    {threadOutputs[set.output] || 0}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Active Thread Details */}
          <div className="bg-gray-800 rounded-lg p-4">
            <h2 className="text-lg font-semibold mb-3">Active Thread Details</h2>
            <div className="bg-gray-700 rounded p-4">
              <div className="flex items-center gap-3 mb-3">
                <div 
                  className="w-6 h-6 rounded-full border border-gray-400" 
                  style={{ backgroundColor: threadSets[selectedThreadSet].color }}
                />
                <div className="font-mono text-xl font-bold">{threadSets[selectedThreadSet].name}</div>
              </div>
              <div className="space-y-2 text-sm">
                <div><span className="text-gray-400">Axis:</span> <span className="font-mono">{threadSets[selectedThreadSet].axis}</span></div>
                <div><span className="text-gray-400">Logic:</span> <span className="font-mono">{threadSets[selectedThreadSet].logic}</span></div>
                <div><span className="text-gray-400">Output:</span> <span className="font-mono text-blue-400">{threadSets[selectedThreadSet].output}</span></div>
                <div className="pt-2 border-t border-gray-600">
                  <span className="text-gray-400">Current Result:</span> 
                  <span className="font-mono text-green-400 text-lg font-bold ml-2">
                    {threadOutputs[threadSets[selectedThreadSet].output] || 0}
                  </span>
                </div>
              </div>
            </div>
          </div>

          {/* F(n) Calculations */}
          <div className="bg-gray-800 rounded-lg p-4">
            <h2 className="text-lg font-semibold mb-3">F(n) Live Calculations</h2>
            <div className="space-y-2 text-sm font-mono max-h-40 overflow-y-auto">
              {fnResults.map(({ n, exponent, scientific }) => (
                <div key={n} className={`p-3 rounded transition-all border ${
                  n === nField 
                    ? 'bg-blue-900 border-blue-600 shadow-lg' 
                    : 'bg-gray-700 border-transparent'
                }`}>
                  <div className={`text-sm font-semibold ${n === nField ? 'text-blue-300' : 'text-gray-200'}`}>
                    F({n}) = 6 × 19^{exponent}
                  </div>
                  <div className={`text-xs ${n === nField ? 'text-blue-200' : 'text-gray-300'}`}>
                    ≈ {scientific}
                  </div>
                  {n === nField && (
                    <div className="text-xs text-green-400 mt-1 font-semibold">
                      ← Current n-Field
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* System Status */}
      <div className="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4">
        <div className="bg-gray-800 rounded-lg p-4 text-center">
          <div className="font-semibold text-blue-400 text-sm">Current State</div>
          <div className="text-lg mt-1">{coherenceMode === 'coherent' ? 'Coherent' : ' Decoherent'}</div>
          <div className="text-xs text-gray-400 mt-1">
            {coherenceMode === 'coherent' ? 'Synchronized plots' : 'Quantum decoherence'}
          </div>
        </div>
        
        <div className="bg-gray-800 rounded-lg p-4 text-center">
          <div className="font-semibold text-green-400 text-sm">Asyncio Streams</div>
          <div className="text-lg font-mono mt-1">{suspicionIndex}</div>
          <div className="text-xs text-gray-400 mt-1">Correlation threads</div>
        </div>
        
        <div className="bg-gray-800 rounded-lg p-4 text-center">
          <div className="font-semibold text-purple-400 text-sm">Tensor Positions</div>
          <div className="text-lg font-mono mt-1">{Math.pow(nField, 3)}</div>
          <div className="text-xs text-gray-400 mt-1">{nField}×{nField}×{nField} grid</div>
        </div>
        
        <div className="bg-gray-800 rounded-lg p-4 text-center">
          <div className="font-semibold text-yellow-400 text-sm">Active Aspect</div>
          <div className="text-lg font-mono mt-1">{selectedAspect}</div>
          <div className="text-xs text-gray-400 mt-1">Coordinate permutation</div>
        </div>
      </div>

      {/* Help Text */}
      <div className="mt-6 bg-gray-800 rounded-lg p-4">
        <h3 className="text-lg font-semibold mb-3">Interactive Controls Guide</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
          <div>
            <div className="font-semibold text-blue-400 mb-2"> 3D Viewport:</div>
            <ul className="text-gray-300 space-y-1 ml-4">
              <li>• Drag to rotate the camera around the tensor field</li>
              <li>• Sphere colors match the selected thread set</li>
              <li>• Sphere sizes represent value magnitudes</li>
              <li>• Numbers show actual tensor values (-9 to +9)</li>
            </ul>
          </div>
          <div>
            <div className="font-semibold text-green-400 mb-2"> Parameter Controls:</div>
            <ul className="text-gray-300 space-y-1 ml-4">
              <li>• <strong>n-Field:</strong> Changes grid dimensions (2³ to 5³)</li>
              <li>• <strong>Coherence:</strong> Switches quantum states</li>
              <li>• <strong>Suspicion Index:</strong> Influences thread correlations</li>
              <li>• <strong>Aspect:</strong> Permutes coordinate system</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TensorVisualization;