\n AI Tools Directory\n

\n Discover the most amazing AI tools for{\" \"}\n video generation,{\" \"}\n image creation,{\" \"}\n text AI, and more\n

\n\n {/* Stats */}\n

{stats.total || 0}

AI Tools

{stats.featured || 0}

Featured

{categories.length}

No tools found

\n Try adjusting your search or filters to find what you're looking for.\n

\n {\n setSearchQuery(\"\");\n setSelectedCategory(null);\n setSelectedPricing(null);\n setShowFeaturedOnly(false);\n }}\n className=\"px-6 py-3 bg-gradient-to-r from-cyan-500 to-blue-500 text-white rounded-lg hover:from-cyan-600 hover:to-blue-600 transition-all\"\n >\n Clear all filters\n \n

\n )}\n

\n\n {/* Footer */}\n \n

\n );\n}",[],[225,232,238],{"_102":246,"_95":247,"_151":248,"_153":233,"_154":136,"_155":249,"_157":158,"_104":250,"_99":32,"_160":180,"_162":251,"_163":22,"_164":-5,"_165":252,"_98":253},"60f31116-4430-11f0-8c66-76b3cceeab13","CategoryFilter.tsx","60f311fc-4430-11f0-8c66-76b3cceeab13",11,["D",1749363502409],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { Category } from \"../../shared/types.ts\";\n\ninterface CategoryFilterProps {\n categories: Category[];\n selectedCategory: string | null;\n onCategorySelect: (categoryId: string | null) => void;\n categoryCounts?: Record;\n}\n\nexport default function CategoryFilter({ \n categories, \n selectedCategory, \n onCategorySelect,\n categoryCounts = {}\n}: CategoryFilterProps) {\n return (\n

\n 🏷️\n Categories\n

\n \n

\n {/* All Categories Button */}\n onCategorySelect(null)}\n className={`category-pill px-4 py-2 rounded-full text-sm font-medium transition-all ${\n selectedCategory === null\n ? 'active text-black'\n : 'text-gray-300 hover:text-white'\n }`}\n >\n 🌟\n All Tools\n {categoryCounts && Object.values(categoryCounts).length > 0 && (\n \n {Object.values(categoryCounts).reduce((a, b) => a + b, 0)}\n \n )}\n \n\n {/* Category Buttons */}\n {categories.map((category) => (\n onCategorySelect(category.id)}\n className={`category-pill px-4 py-2 rounded-full text-sm font-medium transition-all ${\n selectedCategory === category.id\n ? 'active text-black'\n : 'text-gray-300 hover:text-white'\n }`}\n style={{\n borderColor: selectedCategory === category.id ? category.color : undefined\n }}\n >\n {category.icon}\n {category.name}\n {categoryCounts[category.id] && (\n \n {categoryCounts[category.id]}\n \n )}\n \n ))}\n

\n\n {/* Selected Category Description */}\n {selectedCategory && (\n

\n {(() => {\n const category = categories.find(c => c.id === selectedCategory);\n return category ? (\n

\n {category.icon}\n

{category.name}

{category.description}

\n ) : null;\n })()}\n

\n )}\n

\n );\n}",[],[225,232,247],{"_102":255,"_95":256,"_151":257,"_153":233,"_154":136,"_155":217,"_157":158,"_104":258,"_99":32,"_160":180,"_162":259,"_163":22,"_164":-5,"_165":260,"_98":261},"52a583c8-4430-11f0-bcbe-76b3cceeab13","Scene3D.tsx","52a5849a-4430-11f0-bcbe-76b3cceeab13",["D",1749363478408],"/** @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

No tools found

\n 🏷️\n Categories\n

{category.name}

\n {tool.name}\n

DevGoku

untitled-9921