SpatialFlow

• 

  SpatialFlow is a VR planning app for Meta Quest 3/3S that combines task management with spatial computing in an immersive 3D environment.

Inspiration

I needed a better way to plan complex projects in VR. Traditional 2D planning tools don't take advantage of spatial thinking, and existing VR productivity apps focus on simple note-taking rather than hierarchical planning. I wanted to build something that felt natural in 3D space: visualizing entire projects as constellations, zooming into task trees, and sketching ideas on an infinite canvas.

What it does

SpatialFlow is a project planning tool built for WebXR-supported headsets. It has three core views that work together:

Sphere View presents all your plans as colored pills distributed across a 3D sphere using the Fibonacci sphere algorithm. This gives you an overview of everything at once without cluttering the space.

Tree View uses the Reingold-Tilford layout algorithm to show hierarchical task breakdowns. You can pan with one controller and zoom using two controllers.

Canvas View is where you sketch. It has 14 drawing tools: pen, eraser, select, five shapes (rectangle, circle, diamond, line, arrow), text, image placement, connector lines, undo, redo, and a 2D/3D mode toggle. Everything you draw is auto-saved to IndexedDB.

The entire app runs offline. All data lives in the browser using Dexie.js on top of IndexedDB. You can switch between four VR environments (glass floor, Japanese room, brick room, conference room) and toggle spatial background music.

How we built it

This is a WebXR application built with Meta's IWSDK, which sits on top of Three.js. The architecture follows an Entity-Component-System pattern with custom systems handling everything from Fibonacci sphere positioning to tree layout.

The frontend is pure JavaScript with IWSDK's UIKit for spatial panels. We use Vite for development and building. The data layer is Dexie.js wrapping IndexedDB.

Accomplishments that we're proud of

Building functional drawing tools in 3D space was harder than expected. Getting the pen to feel natural, making shapes snap correctly, implementing undo/redo that works across tools required careful attention to detail.

What we learned

The Fibonacci sphere algorithm distributes points evenly without clustering, so your plans never feel cramped no matter how many you add.

The Reingold-Tilford tree layout is deterministic, which matters in VR. When users collapse and expand nodes, the tree moves predictably.

What's next for SpatialFlow

We want to add real-time collaboration. Multiple users in the same VR space, editing the same project.

Better gesture / hand tracking support. Right now it's controller-only.

Cloud backup as an optional feature. Some users want offline-first others want to access their projects on desktop.

Built With

• dexie
• iwsdk
• three.js