AI Tools Directory - Discover Amazing AI Tools

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_280":281,"_282":283},"routes/_app.x.$handle.$name",{"_102":101,"_32":51,"_110":92,"_27":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_21":-5,"_122":-5,"_123":-5,"_124":25,"_125":126,"_127":25,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_49":50,"_32":51,"_37":52,"_53":-5,"_54":25,"_55":56,"_57":56,"_58":-5,"_59":-5,"_18":60,"_61":62,"_63":64,"_65":64,"_66":-5,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":25},"version",9,"changes",[19,20],"aiChatInfo","userId",{"_21":42,"_23":-7,"_24":25,"_26":25,"_27":43,"_29":43},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":-5,"_37":38,"_39":14,"_40":41,"_24":25},"previous","deleted",false,"deletedHere","path","frontend/components","latestPath","fileId","69c171a6-4f75-4ddf-b5ac-27cdc056baf7","name","components","fileType","directory","content","createdAt",["D",1749363478408],"branchVersion","branchId","a080dd64-442f-11f0-9005-76b3cceeab13",{"_30":44,"_32":45,"_34":46,"_36":47,"_37":48,"_39":14,"_40":41,"_24":25},"frontend/components/Scene3D.tsx","52a5849a-4430-11f0-bcbe-76b3cceeab13","Scene3D.tsx","script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\ndeclare global {\n interface Window {\n THREE: any;\n }\n}\n\nexport default function Scene3D() {\n const canvasRef = useRef(null);\n\n useEffect(() => {\n if (!canvasRef.current || !window.THREE) return;\n\n const canvas = canvasRef.current;\n const scene = new window.THREE.Scene();\n const camera = new window.THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\n const renderer = new window.THREE.WebGLRenderer({ canvas, alpha: true });\n\n renderer.setSize(window.innerWidth, window.innerHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n\n // Create floating ice crystals\n const crystalGeometry = new window.THREE.OctahedronGeometry(0.5, 0);\n const crystalMaterial = new window.THREE.MeshBasicMaterial({\n color: 0x00d4ff,\n transparent: true,\n opacity: 0.6,\n wireframe: true\n });\n\n const crystals: any[] = [];\n for (let i = 0; i < 50; i++) {\n const crystal = new window.THREE.Mesh(crystalGeometry, crystalMaterial);\n crystal.position.x = (Math.random() - 0.5) * 100;\n crystal.position.y = (Math.random() - 0.5) * 100;\n crystal.position.z = (Math.random() - 0.5) * 100;\n crystal.rotation.x = Math.random() * Math.PI;\n crystal.rotation.y = Math.random() * Math.PI;\n crystal.userData = {\n rotationSpeed: {\n x: (Math.random() - 0.5) * 0.02,\n y: (Math.random() - 0.5) * 0.02,\n z: (Math.random() - 0.5) * 0.02\n },\n floatSpeed: Math.random() * 0.01 + 0.005\n };\n scene.add(crystal);\n crystals.push(crystal);\n }\n\n // Create particle system\n const particleCount = 200;\n const particles = new window.THREE.BufferGeometry();\n const positions = new Float32Array(particleCount * 3);\n const colors = new Float32Array(particleCount * 3);\n\n for (let i = 0; i < particleCount * 3; i += 3) {\n positions[i] = (Math.random() - 0.5) * 200;\n positions[i + 1] = (Math.random() - 0.5) * 200;\n positions[i + 2] = (Math.random() - 0.5) * 200;\n\n // Ice blue colors\n colors[i] = 0; // R\n colors[i + 1] = 0.8 + Math.random() * 0.2; // G\n colors[i + 2] = 1; // B\n }\n\n particles.setAttribute('position', new window.THREE.BufferAttribute(positions, 3));\n particles.setAttribute('color', new window.THREE.BufferAttribute(colors, 3));\n\n const particleMaterial = new window.THREE.PointsMaterial({\n size: 2,\n vertexColors: true,\n transparent: true,\n opacity: 0.8\n });\n\n const particleSystem = new window.THREE.Points(particles, particleMaterial);\n scene.add(particleSystem);\n\n camera.position.z = 30;\n\n // Animation loop\n let animationId: number;\n const animate = () => {\n animationId = requestAnimationFrame(animate);\n\n // Rotate crystals\n crystals.forEach(crystal => {\n crystal.rotation.x += crystal.userData.rotationSpeed.x;\n crystal.rotation.y += crystal.userData.rotationSpeed.y;\n crystal.rotation.z += crystal.userData.rotationSpeed.z;\n \n // Floating motion\n crystal.position.y += Math.sin(Date.now() * crystal.userData.floatSpeed) * 0.01;\n });\n\n // Rotate particle system\n particleSystem.rotation.y += 0.001;\n particleSystem.rotation.x += 0.0005;\n\n // Camera movement based on mouse (if mouse position is available)\n const time = Date.now() * 0.0005;\n camera.position.x = Math.cos(time) * 5;\n camera.position.y = Math.sin(time * 0.7) * 3;\n camera.lookAt(0, 0, 0);\n\n renderer.render(scene, camera);\n };\n\n animate();\n\n // Handle window resize\n const handleResize = () => {\n camera.aspect = window.innerWidth / window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n };\n\n window.addEventListener('resize', handleResize);\n\n // Mouse interaction\n const handleMouseMove = (event: MouseEvent) => {\n const mouseX = (event.clientX / window.innerWidth) * 2 - 1;\n const mouseY = -(event.clientY / window.innerHeight) * 2 + 1;\n \n camera.position.x += (mouseX * 10 - camera.position.x) * 0.05;\n camera.position.y += (mouseY * 10 - camera.position.y) * 0.05;\n };\n\n window.addEventListener('mousemove', handleMouseMove);\n\n // Cleanup\n return () => {\n cancelAnimationFrame(animationId);\n window.removeEventListener('resize', handleResize);\n window.removeEventListener('mousemove', handleMouseMove);\n renderer.dispose();\n };\n }, []);\n\n return

Diff · v9