Chainviz
Task
W3F funded project to create a realtime WebGL Polkadot and Kusama valiadtor ecosystem visualisation, including parachain views and validator explorer.
Solution
Created a brand concept suitable for a minimalistic data visualisation. Developed a 3D model to display the validator space. Assembled panel-based web app UI/UX.
Country
Industry
Length
Year
This project explores blockchain validator infrastructure through a real-time, 3D navigable interface designed for the Polkadot and Kusama ecosystems. At the core of the visual identity is a dynamic logo that adapts in form and reflects the interdependence of nodes within a living network. This idea extends into a cohesive visual system where dots, arcs, and data-driven motion represent validators and their relationships, creating a consistent language that connects branding, interface, and data visualization.
The design centers around a spatial validator sphere built from interwoven arcs, where each dot represents an active participant in the network. Scale, grouping, and positioning communicate parameters, categories and activity at a glance, while a unified graphic style ensures clarity across graphs, UI components and navigation. Validators remain the visual and conceptual focal point, reinforcing their central role in block verification and overall infrastructure health.
The interface translates complex blockchain processes into an interactive experience through precise hover interactions, and layered information states. From relay chain statistics to parachain relationships, the system maintains visual consistency across contexts and devices.
A Living Mark for a Living Network
At the core of the visual identity is a dynamic logo that adapts in form and reflects the interdependence of nodes within a living network. Rather than acting as a static symbol, it becomes a conceptual anchor for the entire system.
This logic extends into a cohesive visual language built from dots, arcs, and data-driven motion that represent validators and their relationships. Together, these elements create a consistent bridge between branding, interface, and data visualization, ensuring that every part of the experience feels connected and rooted in the same structural idea.
The design centers around a spatial validator sphere constructed from interwoven arcs, forming a clear and recognizable structure that represents the network as a living system. Each dot within this sphere corresponds to an active validator, turning abstract infrastructure into a tangible visual entity. Differences in size, position, and grouping help communicate key parameters at a glance, allowing users to quickly grasp activity, relationships, and distribution without needing to interpret raw data.
This spherical composition becomes the visual and functional focal point of the interface. Arcs act as natural containers for categories and connections, while individual dots can be highlighted to signal participation in block validation or shifts in network dynamics.
By placing validators at the center of the visual experience, the design reinforces their importance and creates an intuitive mental model of how the ecosystem operates, transforming complexity into a structured, navigable form.
The validator sphere also serves as a navigational map of the validator space, allowing users to explore the network as a structured environment rather than a flat dataset.
Spatial logic turns the abstract concept of infrastructure into something users can visually scan and understand, reinforcing the sense of a connected, constantly evolving ecosystem.
Within this space, focus can shift fluidly from the network as a whole to individual participants. Highlighted nodes surface key actors, while the surrounding arcs provide context about their role, grouping, and influence.
The UI is built around keeping this structure clear and readable at all times, allowing users to navigate the validator space without losing context. The sidebar consolidates navigation, key statistics, and filters into a single area, while the main screen gives prominence to the sphere and the data it represents. Whether viewing relay chain information or focusing on a specific parachain, the layout adapts to maintain the validator network as the central point of reference.
Responsiveness plays a crucial role in preserving clarity across devices. The sphere, arcs and nodes scale and reorganize fluidly to fit different screen sizes. Interaction is designed for precision, hovering gently detaches nodes from their arcs, triggering subtle magnetic alignment and quick data previews, which can expand into detailed validator information on click. This layered approach keeps the interface lightweight while allowing deeper exploration when needed, making the complex validator space feel structured.
Parachains are presented as parallel layers within the validator space, helping users understand how multiple chains operate simultaneously within a single ecosystem. Instead of treating them as separate datasets, the UI integrates them into the same spatial logic as the relay chain, making their relationships immediately visible.
Each parachain can be surfaced as its own structured grouping, where validators are visually distributed across arcs and clusters, allowing users to see how responsibility, activity, and coverage shift across the network.
n the interface, switching to a parachain view refocuses the main screen on that chain’s data while preserving the overall spatial context. Validators connected to a selected parachain become more prominent, and their distribution reveals how validation is allocated across different parts of the ecosystem.
The interface is designed to make blockchain-specific events legible, even for users who may not be deeply technical. Era changes in Polkadot and Kusama represent key transition moments when validator sets can shift, rewards are distributed, and penalties such as slashing may occur. In the UI, these moments are reflected through changes in the validator sphere.
Rather than presenting these events as abstract logs, the system visualizes them as visible transitions within the network, helping users understand when and how structural changes take place.
XCM messages are reflected in the interface as visible links between chains, helping users understand how communication flows across the ecosystem. Rather than remaining a hidden technical process, cross-chain activity is subtly indicated through connections and transitions within the validator space, reinforcing the idea of a network that is constantly exchanging data and value.
A dedicated light theme offers a low-contrast alternative that reduces visual fatigue and shifts focus toward content and structure. The project also includes a set of conceptual merchandise that applies the same visual language of dots, arcs and motion into physical formats, reinforcing continuity across digital and tangible touchpoints.
