Neural City: Re-engineering the Supermemory Graph

Inspiration

Supermemory gives us a second brain, but the current visualization feels like a tangled web. During my research, I realized that while force-directed graphs (the standard "spiderweb") look cool for 5 seconds, they fail at scale. Users told me they felt lost, not empowered. I wanted to move from Data Visualization (showing dots) to Data Navigation (showing pathways).

What it does

Neural City is a complete UX/UI overhaul of the graph interface, introducing three core innovations:

The Isometric Data Grid: We replaced the chaotic floating nodes with a structured, coordinate-based city. Every memory has a permanent address, solving the "hairball" problem.

Neural Pathways (The "Trace"): Instead of static lines, we visualize "active thinking." When you query the AI, the graph animates glowing traces from the storage blocks, showing exactly how the AI retrieves and connects insights.

Contextual Pins: We solved the readability issue by using vertical 3D pins for labels, allowing users to browse memories without obscuring the map layout.

How we built it

Design: Prototyped in Figma using isometric grid logic.

Feasibility: Designed for React Three Fiber. Unlike force-directed graphs which require expensive physics calculations for every frame, the Isometric Grid uses fixed coordinates, making it significantly more performant for rendering 10,000+ nodes on the web.

Methodology: I followed a research-led process, moving from "Flight Maps" to "Topography" before arriving at the "City" metaphor.

Challenges we ran into

The biggest challenge was balancing "structure" with "organic feel." A grid can feel too robotic. We solved this by keeping the storage rigid (cubes) but making the connections fluid (curved, glowing vines).

Accomplishments that we're proud of

I'm proud of I’m proud of the "Search State" design. Usually, filtering a graph is clunky. We designed a spotlight interaction where the city dims and only relevant "districts" light up, making the graph a genuine search tool.

Built With

• cursor
• figma
• supermemory