Skip to main content

​
Overview

Intelligence Space is designed for intuitive, tactile exploration. Every interaction - from clicking nodes to rotating the camera - feels natural and responsive. The 3D environment combines mouse controls, hover effects, and smooth animations to create an engaging discovery experience.
All interactions work seamlessly on desktop browsers. Mobile support uses touch gestures for orbit and zoom.

​
Search Input

​
Starting Your Journey

The glassmorphic search bar at the bottom of the screen is your entry point: 
<input
  type="text"
  placeholder="Enter an interest (e.g. Quantum Physics, Minimalist Art)..."
  className="w-full bg-transparent border-none py-4 pl-12 pr-12 text-white placeholder:text-white/40"
/>
The input features:
  • Frosted glass background - bg-white/5 backdrop-blur-xl
  • Search icon - Left-aligned magnifying glass
  • Sparkles button - Right-aligned submit trigger
  • Subtle border - border-white/10 for depth
  • 2xl rounded corners for modern aesthetics

​
Submit Behavior

1

Type Your Interest

Enter any topic, concept, or interest in the search bar.
2

Click Sparkles or Press Enter

Submit using the sparkles button or keyboard Enter key.
3

Root Node Appears

Your interest materializes as a glowing sphere in the center of the space.
4

Automatic Expansion

AI immediately generates 3-5 related concepts that spring into existence around the root node.
const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault();
  if (!input.trim() || isGenerating) return;
  
  const label = input.trim();
  setInput(""); // Clear input immediately
  
  const newNode = addNode(label);
  // Trigger automatic expansion...
};
The input clears immediately after submission, allowing you to quickly enter another interest while the first is generating.

​
Node Interaction

​
Click to Expand

Clicking any sphere triggers AI-powered expansion: 
<mesh
  onClick={(e) => {
    e.stopPropagation();
    onExpand(node.id, node.label);
  }}
>
  <sphereGeometry args={[node.radius, 32, 32]} />
  <meshStandardMaterial color={node.color} />
</mesh>
  1. Event Propagation Stops - e.stopPropagation() prevents camera controls from interfering
  2. Loading Indicator Appears - Three bouncing dots float above the node
  3. AI Generation - Gemini creates 3-5 related sub-interests
  4. New Nodes Spawn - Child spheres appear connected to the parent
  5. Physics Simulation - New nodes spring into position using force-directed layout
  6. Loading Indicator Disappears - Expansion complete

​
Hover Effects

Nodes provide instant visual feedback on hover: 
const [hovered, setHovered] = useState(false);

<mesh
  onPointerOver={() => setHovered(true)}
  onPointerOut={() => setHovered(false)}
>
  <meshStandardMaterial
    color={hovered ? "#ffffff" : node.color}
  />
</mesh>

Default State

Node appears in its assigned color (varies per node)

Hover State

Node turns pure white (#ffffff) - instant visual confirmation

​
Camera Controls

​
Orbit Controls

The camera uses @react-three/drei OrbitControls for smooth, professional navigation: 
<OrbitControls
  enablePan={false}
  enableZoom={true}
  minDistance={2}
  maxDistance={50}
  autoRotate
  autoRotateSpeed={0.5}
/>
1

Left Click + Drag

Orbit - Rotate the camera around the graph center. The view smoothly follows your mouse movement.
2

Scroll Wheel

Zoom - Move closer (min: 2 units) or farther (max: 50 units) from the graph.
3

Automatic Rotation

When idle, the camera slowly rotates at 0.5 speed, keeping the view dynamic and alive.
Panning is intentionally disabled to prevent users from losing the graph center. All navigation focuses on orbit and zoom.

​
Animation Effects

​
Float Animation

The entire graph has a subtle floating motion: 
<Float speed={1} rotationIntensity={0.2} floatIntensity={0.2}>
  <ThreeGraph />
</Float>

Speed: 1

Moderate animation pace - not too fast or slow

Rotation: 0.2

Subtle tilting adds organic feel

Float: 0.2

Gentle up/down bobbing motion
This creates a living, breathing quality without distracting from content.

​
Helper Text Animation

When the graph is empty, helper text fades in smoothly: 
<AnimatePresence>
  {nodes.length === 0 && (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -10 }}
    >
      Start typing to generate an intelligence map
    </motion.div>
  )}
</AnimatePresence>
  • Enters from below (y: 10 → y: 0)
  • Exits upward (y: 0 → y: -10)
  • Opacity fades for smooth transitions

​
Loading Indicator Animation

The three-dot loader uses staggered CSS animations: 
<div className="w-1.5 h-1.5 bg-white rounded-full animate-bounce" 
     style={{ animationDelay: "0ms" }}></div>
<div className="w-1.5 h-1.5 bg-white rounded-full animate-bounce" 
     style={{ animationDelay: "150ms" }}></div>
<div className="w-1.5 h-1.5 bg-white rounded-full animate-bounce" 
     style={{ animationDelay: "300ms" }}></div>
The 150ms delay between dots creates a wave effect that’s more engaging than simultaneous bouncing.

​
UI Overlay

The top bar shows branding and remains visible during exploration: 
<div className="absolute top-0 w-full p-6 z-10 pointer-events-none">
  <div className="flex items-center space-x-2 pointer-events-auto">
    <div className="w-8 h-8 rounded-full bg-white flex items-center justify-center text-black">
      <Compass size={18} />
    </div>
    <h1 className="text-xl font-medium tracking-tight">Intelligence Space</h1>
  </div>
</div>
Design Details:
  • Logo: White circle with black compass icon
  • Typography: 20px medium weight, tight tracking
  • Z-index: 10 (above 3D canvas)
  • Pointer Events: Only logo/title are clickable, rest is transparent

​
Search Bar Positioning

<div className="absolute bottom-12 w-full z-10 pointer-events-none flex justify-center">
  <div className="pointer-events-auto w-full max-w-lg">
    {/* Search input */}
  </div>
</div>
  • Bottom placement - Doesn’t obscure the 3D graph
  • Centered - Natural focal point for input
  • Max width 512px - Optimal reading width, doesn’t stretch too wide on large screens
  • Pointer-events-none on parent - Only the input itself captures clicks
  • Z-index 10 - Floats above 3D scene but below any modals

​
Visual Feedback Summary

Hover State

Nodes turn white instantly when mouse enters

Click Feedback

Loading dots appear above expanding nodes

Submit State

Sparkles → Spinner animation during generation

Auto-Rotation

Gentle camera rotation showcases 3D depth

Float Animation

Subtle bobbing adds organic movement

Billboard Labels

Text always faces camera for readability

​
Keyboard Shortcuts

  • Enter - Submit interest (same as clicking sparkles button)
  • Escape - Blur input field
  • Any typing - Activates input, updates placeholder visibility

​
Accessibility Considerations

Intelligence Space is optimized for visual, mouse-driven interaction. The 3D WebGL environment requires pointer input.

​
Current Features:

  • High contrast - White text on dark background
  • Large click targets - Node spheres are 32-segment geometries with generous radii
  • Clear hover states - Color change provides obvious feedback
  • Disabled states - Input and button become semi-transparent when unavailable

​
Future Improvements:

  • Keyboard navigation for node selection
  • Screen reader descriptions for nodes
  • Alternative 2D view for non-WebGL browsers

3D Visualization

Learn how the 3D graph is rendered

AI Expansion

Discover how Gemini AI generates concepts

Build docs developers (and LLMs) love

Get started for freeTalk to us