Explorar tus ideas sin perder nunca el hilo
Un mapa mental con forma de pequeño planeta: al abrir una nota, sus subnotas aparecen a su alrededor mientras la visión de conjunto sigue a la vista.
La necesidad
En la mayoría de las herramientas de mapas mentales, abrir una rama satura la pantalla o te lleva a una página nueva, y pierdes la pista de dónde venías.
La idea
Mantener el clásico árbol de ideas exactamente como está y cambiar solo la forma de recorrerlo.
Lo que construí
- Una navegación en la que las subnotas de cada nota aparecen sobre una pequeña esfera a su alrededor, mientras el nivel superior permanece en pantalla.
- Gestos elegidos por comodidad: rueda para hacer zoom, arrastrar para girar, Alt + arrastrar para desplazar la vista y zonas táctiles más grandes en el móvil.
- Dos versiones anteriores —un dibujo plano y después una versión 3D que cambiaba de escena a cada clic— sustituidas porque hacían que la gente se desorientara.
- También representa automáticamente los proyectos de este sitio web, a través de una pequeña fuente pública de datos.
El resultado
- 3diseños de navegación probados, 1 conservado
- 22intentos de saltarse la protección de edición, todos bloqueados
- 2dependencias para todo el proyecto
- 5 sept. 2026en línea desde
El mapa público es una demostración funcional de la navegación. Los cambios solo llegan a producción cuando se superan las pruebas automáticas.
En imágenes
Lo que aprendí
Los datos apenas cambiaron en tres versiones; solo cambió la forma de recorrerlos. Mantener ambas cosas separadas me permitió rehacer la visualización dos veces sin tocar los datos.
Detalles técnicos Tecnologías, arquitectura y decisiones, para lectores técnicos
Tecnologías
- Three.js
- JavaScript sin framework
- Node.js + Express
- SQLite (node:sqlite)
- Cloudflare Tunnel + Access
- systemd
- GitHub Actions
Cómo funciona
- Una única tabla recursiva, notes(id, parent_id, x, y, title, content), donde x e y son una longitud y una latitud en grados sobre el globo de la nota padre.
- Three.js es la única biblioteca que carga el navegador; unas 760 líneas de JavaScript propio se encargan de la disposición, la navegación y la edición. La cámara maneja directamente coordenadas esféricas en lugar de OrbitControls.
- Cada esfera hija mide 0,46 × el radio de la madre; el grafo de escena nunca se reconstruye durante la navegación.
- La lectura es pública; la escritura está protegida aguas arriba por Cloudflare Access, y el servicio solo escucha en 127.0.0.1 detrás de un túnel. 22 intentos de evasión (cambios de mayúsculas, barras dobles, segmentos «..», codificación de URL, otros métodos HTTP) acaban todos en la página de inicio de sesión.
- Una revisión adversarial encontró dos defectos reales, corregidos el mismo día: un analizador JSON montado en todas las rutas permitía a un visitante anónimo escribir en el registro del sistema, y un único fallo de carga de red bloqueaba la navegación.
- Despliegue continuo desde GitHub Actions; producción solo avanza cuando se supera el conjunto de pruebas.
Incidentes y soluciones
- En el móvil, los toques sobre los pequeños marcadores de notas (de 6 a 10 px) fallaban a menudo: una tolerancia táctil de 22 px y la precarga del nivel siguiente hicieron pasar los toques simulados de 12/17 a 17/17.
- El efecto de resplandor (bloom) era el cuello de botella en el móvil: desactivarlo en esos dispositivos hizo pasar un vuelo por varios niveles de 20 a 37 imágenes por segundo.
Lo que aún falta
- Edición reservada para mí, a propósito
- Los gestos táctiles aún se están afinando