The Brief
BasedAI needed a way to monitor a growing blockchain network: which compute nodes were active, how many agents they were running, whether their metadata was complete, and how the broader token ecosystem was performing.
The obvious solution was another analytics dashboard. Tables, filters, charts, and pages of wallet addresses would have contained the information—but they would not have helped anyone understand the network as a system.
I proposed something more ambitious: turn the network into an explorable 3D environment where the data could communicate through position, light, material, and movement.
I designed the product, built the Three.js application, developed the supporting data services, created the interaction model, wrote the shaders, and shipped the complete experience.
The Problem
Blockchain infrastructure produces a huge amount of technically useful but visually hostile data.
A table can tell you that a node is active, has registered metadata, is running a certain number of agents, or is eligible to claim tokens. But understanding the overall health of hundreds of nodes requires constantly filtering, comparing, and translating numbers in your head.
The interface also needed to remain responsive while rendering and independently animating up to 1,024 interactive objects. Every node had to react to its own live state, support hover and selection, and remain searchable without turning the browser into a slideshow.
This was not simply a visualization problem. It required data architecture, GPU-conscious rendering, interaction design, and backend engineering to work together.
Designing a Visual Language for Data
I represented every compute node as an icosahedron arranged in a Fibonacci spiral.
The layout uses the golden angle—approximately 222.49 degrees of divergence—to distribute nodes evenly without the obvious rows, clustering, or dead space produced by a conventional grid. It is the same mathematical pattern found in sunflower seeds and pinecones.
The spiral was not chosen as decoration. It gave hundreds of nodes a stable spatial relationship, allowing users to recognize the network as one structure while still inspecting individual objects.
Each node’s appearance encodes its current state. Active nodes glow more brightly. Idle nodes recede into the background. Nodes with fractional token status rotate. Nodes missing metadata appear as wireframes, while fully active nodes render as solid objects.
Instead of reading several columns to understand a node, users can interpret much of its condition visually. At the network level, areas of activity and inactivity become visible immediately.
Making the Network Explorable
The purpose of building the Nexus in 3D was not simply to create a dramatic overview. Users needed to investigate what they were seeing.
They can drag to orbit around the spiral, scroll to move through its depth, and hover over individual nodes for immediate visual feedback. Double-clicking a node sends the camera smoothly toward it, fades the rest of the network, and opens a focused panel containing its owner, agent count, activation status, and metadata.
I also built an in-scene number pad that lets users enter a specific node ID and locate it directly within the spiral. The search remains part of the environment rather than sending users to a separate page or conventional form.
Price charts, supply breakdowns, and market statistics are rendered as geometry inside the scene rather than HTML elements placed over the canvas. This keeps the product visually and technically coherent: the data interface feels like part of the world, not a dashboard attached to a 3D background.
Engineering 1,024 Interactive Nodes
Rendering hundreds of objects is straightforward if they never change. Rendering hundreds of independently animated and interactive objects while live data updates is a different problem.
Each node can change material, brightness, rotation, scale, and interaction state. The scene also includes camera animation, environmental lighting, post-processing, and a procedural background shader.
I implemented adaptive rendering that monitors real-world performance and adjusts pixel density for the user’s hardware. A powerful desktop can render the scene at greater clarity, while a less capable laptop can reduce resolution to protect motion and input responsiveness.
The loading sequence is also deliberately staged. Nodes begin in scattered positions and spring into the Fibonacci structure over approximately 1.5 seconds while the camera reveals the complete network. This gives users time to understand the spatial model before the interface asks them to interpret it.
The background uses a procedural fractal Brownian motion shader. Its program is compiled once and animated through uniforms rather than rebuilt during React renders. An HDR environment map gives the nodes shifting reflections, helping each icosahedron remain readable as it moves.
These details are individually small, but together they determine whether a real-time visualization feels like production software or an impressive prototype that becomes uncomfortable after thirty seconds.
From Blockchain to Browser
The visual system depends on a backend pipeline that continuously collects node statistics, token prices, supply information, activation state, and network metadata.
The frontend staggers its initial requests so no single operation blocks the whole experience. Once the scene is running, reactive state updates only the nodes whose underlying data has changed rather than forcing the network to re-render as one giant component.
That separation was essential. The blockchain remained the source of truth, the backend converted raw state into usable application data, and the browser translated that data into a real-time visual system.
I worked across each layer. The project required understanding not only how to draw the network, but how to acquire its data, model it, distribute it through application state, and expose it through interaction without sacrificing frame rate.
The Outcome
The Nexus transformed an abstract blockchain network into something people could see, navigate, and understand.
It remained a functional monitoring tool—users could locate nodes, inspect metadata, read market information, and identify activity—but replaced the cognitive burden of a spreadsheet with a spatial visual language.
The project demonstrates the kind of work I am strongest at: taking a technically complex system, identifying where conventional interfaces fail, and building the product across the full stack.
I did not add a 3D graphic to a dashboard. I designed the data model, backend pipeline, interaction system, rendering architecture, and visual language as one product—and shipped a network monitor that made infrastructure feel alive.