I built a spatial 3D knowledge graph with React Three Fiber & Gemini AI 🌌
Hey developers! 👋
I’ve always felt that standard note-taking apps force our brains into unnatural, linear lists. Our thoughts are connected, chaotic, and spatial. So, I spent the last few weeks building an experiment to fix this.
It’s called Echo Archive.
It’s a spatial knowledge management system where your notes live in a 3D constellation.
🛠The Tech Stack
I wanted to keep it lightweight but visually immersive.
- Frontend: React 18 + Vite
- 3D Engine: Three.js & React Three Fiber (drei)
- AI Core: Google Gemini AI (via API)
- Styling: Tailwind CSS + Lucide Icons
- Storage: LocalStorage (Privacy first, no cloud database)
🧠The AI Integration
The coolest part was integrating Gemini. Since I’m using the gemini-2.5-flash model, I could implement:
- Auto-Tagging: The AI reads the note and suggests categories based on context.
- Smart Continue: Writer’s block? The AI finishes your sentence.
- Abstracts: It automatically generates a TL;DR summary at the top of long notes.
🌌 The Challenge: Mobile 3D Navigation
Making a 3D orbit control feel natural on a phone screen was tricky. I had to map touch events carefully to ensure you can pan the universe with one finger and zoom with two, without accidentally triggering the text editor.
🔗 Try it out
I just released v1.0 and would love some feedback on the navigation feeling!
Live Demo: https://echoarchive.tech
Let me know what you think about spatial interfaces. Are they the future or just a gimmick?
Cheers!
