4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T20a2,"use client"; import { Canvas, useFrame } from "@react-three/fiber"; import * as React from "react"; import * as THREE from "three"; import { useTheme } from "@/components/theme"; // Shared geometry for tunnel rings - created once const ringGeometry = new THREE.TorusGeometry(3, 0.02, 6, 32); // Instanced tunnel rings for better performance function TunnelRings({ color, count = 15 }: { color: string; count?: number }) { const meshRef = React.useRef(null); const materialRef = React.useRef(null); // Store ring data const ringData = React.useMemo( () => Array.from({ length: count }, (_, i) => ({ radius: 3 + Math.random() * 0.5, rotation: 0, speed: 0.08 + Math.random() * 0.04, z: -2 - i * 2, })), [count] ); // Setup initial positions React.useEffect(() => { if (!meshRef.current) { return; } const matrix = new THREE.Matrix4(); const scale = new THREE.Vector3(); ringData.forEach((ring, i) => { scale.set(ring.radius / 3, ring.radius / 3, 1); matrix.makeScale(scale.x, scale.y, scale.z); matrix.setPosition(0, 0, ring.z); meshRef.current?.setMatrixAt(i, matrix); }); meshRef.current.instanceMatrix.needsUpdate = true; }, [ringData]); // Cleanup React.useEffect( () => () => { materialRef.current?.dispose(); }, [] ); useFrame(() => { if (!meshRef.current) { return; } const matrix = new THREE.Matrix4(); const position = new THREE.Vector3(); const quaternion = new THREE.Quaternion(); const scale = new THREE.Vector3(); ringData.forEach((ring, i) => { // Move towards camera ring.z += ring.speed; if (ring.z > 5) { ring.z = -30; } // Update rotation ring.rotation += 0.001; // Build matrix position.set(0, 0, ring.z); quaternion.setFromEuler(new THREE.Euler(0, 0, ring.rotation)); scale.set(ring.radius / 3, ring.radius / 3, 1); matrix.compose(position, quaternion, scale); meshRef.current?.setMatrixAt(i, matrix); }); meshRef.current.instanceMatrix.needsUpdate = true; // Update opacity based on average distance if (materialRef.current) { const avgDist = ringData.reduce((sum, r) => sum + Math.abs(r.z), 0) / count; materialRef.current.opacity = Math.max(0.2, 0.6 - avgDist / 60); } }); return ( ); } // Tunnel shader - hoisted outside component const tunnelVertexShader = ` varying vec2 vUv; varying vec3 vPosition; void main() { vUv = uv; vPosition = position; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `; const tunnelFragmentShader = ` uniform float uTime; uniform vec3 uColor; varying vec2 vUv; varying vec3 vPosition; void main() { // Grid pattern vec2 grid = abs(fract(vec2(vUv.x * 20.0, vUv.y * 5.0 - uTime * 0.5) - 0.5) - 0.5); float line = min(grid.x, grid.y); line = 1.0 - smoothstep(0.0, 0.05, line); // Fade based on depth float fade = smoothstep(0.0, 0.3, vUv.y) * (1.0 - smoothstep(0.7, 1.0, vUv.y)); float alpha = line * fade * 0.4; gl_FragColor = vec4(uColor, alpha); } `; // Grid tunnel walls function TunnelWalls({ color }: { color: string }) { const meshRef = React.useRef(null); const materialRef = React.useRef(null); const colorRef = React.useRef(color); colorRef.current = color; const uniforms = React.useMemo( () => ({ uColor: { value: new THREE.Color(color) }, uTime: { value: 0 }, }), [color] ); useFrame((state) => { if (materialRef.current) { materialRef.current.uniforms.uTime.value = state.clock.elapsedTime; materialRef.current.uniforms.uColor.value.set(colorRef.current); } }); // Cleanup React.useEffect( () => () => { meshRef.current?.geometry?.dispose(); materialRef.current?.dispose(); }, [] ); return ( {/* Reduced segments from 32x20 to 24x12 */} ); } // Shared geometry for speed lines const speedLineGeometry = new THREE.BoxGeometry(0.02, 0.02, 1); // Speed lines using InstancedMesh function SpeedLines({ color, count = 50 }: { color: string; count?: number }) { const meshRef = React.useRef(null); const materialRef = React.useRef(null); // Store line data for animation const linesData = React.useMemo( () => Array.from({ length: count }, (_, i) => ({ angle: (i / count) * Math.PI * 2, length: 0.5 + Math.random() * 1.5, radius: 2 + Math.random() * 2, speed: 0.1 + Math.random() * 0.2, z: Math.random() * -30, })), [count] ); // Setup initial positions React.useEffect(() => { if (!meshRef.current) { return; } const matrix = new THREE.Matrix4(); const position = new THREE.Vector3(); const scale = new THREE.Vector3(); const quaternion = new THREE.Quaternion(); linesData.forEach((line, i) => { position.set( Math.cos(line.angle) * line.radius, Math.sin(line.angle) * line.radius, line.z ); scale.set(1, 1, line.length); matrix.compose(position, quaternion, scale); meshRef.current?.setMatrixAt(i, matrix); }); meshRef.current.instanceMatrix.needsUpdate = true; }, [linesData]); // Cleanup React.useEffect( () => () => { materialRef.current?.dispose(); }, [] ); useFrame(() => { if (!meshRef.current) { return; } const matrix = new THREE.Matrix4(); const position = new THREE.Vector3(); const scale = new THREE.Vector3(); const quaternion = new THREE.Quaternion(); linesData.forEach((line, i) => { // Move towards camera line.z += line.speed; if (line.z > 5) { line.z = -30; } // Update matrix position.set( Math.cos(line.angle) * line.radius, Math.sin(line.angle) * line.radius, line.z ); scale.set(1, 1, line.length); matrix.compose(position, quaternion, scale); meshRef.current?.setMatrixAt(i, matrix); }); meshRef.current.instanceMatrix.needsUpdate = true; }); return ( ); } // Theme colors - hoisted outside component const themeColors: Record = { aphrodite: "#ff1493", ares: "#ff3333", athena: "#ffd700", clu: "#ff6600", poseidon: "#0066ff", tron: "#00d4ff", }; // Main tunnel component interface TunnelProps { className?: string; enableSpeedLines?: boolean; ringCount?: number; } export function Tunnel({ className, ringCount = 15, enableSpeedLines = true, }: TunnelProps) { const { theme } = useTheme(); const color = themeColors[theme] || themeColors.tron; return (

); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@react-three/fiber",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40react-three%2Ffiber","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@react-three/fiber"}]]}]}],["$","li","three",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/three","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"three"}]]}]}]]}],["$","$L4e",null,{"namespace":"@thegridcn","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/components/thegridcn/tunnel.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]