Skip to main content
Intelligence Space - Interactive 3D Knowledge Graph

​
What is Intelligence Space?

Intelligence Space is an interactive web application that transforms your interests into beautiful, explorable 3D knowledge graphs. Type any topic, and watch as AI-powered connections materialize in real-time, creating an immersive neural network of related concepts. Built with cutting-edge web technologies, Intelligence Space combines:
  • AI-powered knowledge mapping using Google Gemini 2.5 Flash
  • Real-time 3D visualization with React Three Fiber and Three.js
  • Physics-based graph layout using custom force-directed algorithms
  • Glassmorphic UI for an elegant, modern experience

​
Key features

AI-powered expansion

Enter any interest and let Google Gemini generate 3-5 related sub-topics. Click any node to expand further and discover deeper connections.

Interactive 3D graph

Navigate your knowledge graph in real-time 3D space with orbit controls, auto-rotation, and smooth physics-based node positioning.

Force-directed layout

Nodes automatically arrange themselves using spring forces and repulsion physics, creating organic, readable network structures.

Real-time rendering

WebGL-powered rendering delivers 60fps performance with dynamic lighting, stars background, and smooth animations.

​
How it works

1

Enter your interest

Type any topic into the search input at the bottom of the screen - “Quantum Physics”, “Renaissance Art”, “Machine Learning”, anything that sparks your curiosity.
2

AI generates connections

The app sends your interest to a Next.js Server Action that queries Google Gemini 2.5 Flash, which returns 3-5 related sub-topics in JSON format.
3

Graph materializes in 3D

Your root node appears in the 3D space, connected to its sub-topics. The custom physics engine applies spring forces and repulsion to arrange nodes naturally.
4

Explore and expand

Click any node to expand it further. Orbit around your knowledge graph, zoom in and out, and watch it grow into a complex neural network.

​
The technology stack

Intelligence Space is built with modern web technologies designed for real-time interactivity and visual performance:

Frontend

  • Next.js 16.1.6 with App Router
  • React 19.2.3 for UI composition
  • TypeScript 5 for type safety
  • Tailwind CSS v4 for styling

3D rendering

  • React Three Fiber 9.5.0 for declarative Three.js
  • Three.js 0.183.2 for WebGL rendering
  • @react-three/drei 10.7.7 for controls and helpers
  • Custom physics engine for graph layout

State management

  • Zustand for global state
  • Framer Motion for 2D animations

AI integration

  • Google Gemini API (2.5 Flash model)
  • Server Actions for secure API calls
The application uses a custom physics engine (not d3-force-3d, despite it being in dependencies) for node positioning. The engine implements spring forces between connected nodes, inverse-square repulsion between all nodes, center gravity, and velocity damping, creating organic, readable layouts.

​
Architecture overview

Intelligence Space follows a clean architecture pattern: 
src/
├── app/
│   ├── page.tsx          # Main UI with search input
│   ├── layout.tsx        # Root layout
│   └── actions.ts        # Server Actions for Gemini API
├── components/
│   └── ThreeGraph.tsx    # 3D graph visualization
└── store/
    └── useInterestStore.ts # Zustand store for nodes/links
Key architectural decisions:
  • Server Actions keep your Gemini API key secure server-side (src/app/actions.ts:1)
  • Zustand store manages graph state independently from React render cycles (src/store/useInterestStore.ts:42)
  • Custom physics runs in useFrame for smooth 60fps updates (src/components/ThreeGraph.tsx:114)
  • Glassmorphic UI overlays the 3D scene without blocking interaction (src/app/page.tsx:66)

​
User experience highlights

Intelligence Space is designed for exploration and discovery:
  • Immersive environment: Dark space background with 5000 stars creates a cosmic feel
  • Responsive feedback: Loading indicators show when nodes are expanding
  • Smooth interactions: Hover effects, auto-rotation, and physics-based movement
  • Visual clarity: Color-coded nodes with white labels and glow effects
  • Intuitive controls: Simple search input and click-to-expand interaction
Try starting with broad topics like “Artificial Intelligence” or “Philosophy” and expanding them to create rich, multi-layered knowledge graphs!

​
Ready to get started?

Follow the quickstart guide to install Intelligence Space locally and start exploring your interests in 3D.

Build docs developers (and LLMs) love

Get started for freeTalk to us