Living Network
A living network of floating particles and connection lines. Tech-forward yet organic. Deep dark canvas, cool-toned luminous accents, glass-like card surfaces.
Click any node to activate it. Edges light up to show connections. The active node's data appears below the graph.
Click a node to inspect its properties
Node View
Inspect individual particle nodes, their position, radius, and connection count.
Edge View
Examine connection topology. Each edge represents a data pathway between nodes.
Flow View
Visualize data streaming across edges in real time. Packet color encodes priority.
All components share the particle design language. Glass surfaces, blue glow accents, and corner node dots that activate on hover.
Buttons
Inputs
Glass Card with Corner Nodes
Total Nodes
2,048
Active Links
8,192
Clusters
17
A six-token dark palette built for deep space. Each color has a semantic role in the particle system hierarchy.
Deep Space
Primary Background
Near Black
Surface / Cards
Cool White
Primary Text
Sky Blue
Primary Accent
Mint
Secondary Accent
Violet
Tertiary Accent
Usage Tokens
bg-[#0a0e1a]Page-level backgroundbg-[#0f1419]/80Glass card surfacestext-[#e0e8ff]Primary body texttext-[#64c8ff]Sky blue accent / linkstext-[#64ffc8]Mint accent / success statestext-[#a78bfa]Violet accent / tertiaryHover each card to activate the corner node dots. Each card demonstrates a core capability of the particle system.
Individual particles drift slowly in organic trajectories, creating a breathing constellation effect across deep dark backgrounds. Each node pulses with its own cadence.
Luminous connection lines trace relationships between nodes. Low-opacity strands that pulse gently communicate data flow and structural topology in real time.
Animated data packets travel along connection pathways, visualizing information moving through the network. Speed and color encode packet priority and type.
The network graph self-organizes as nodes appear, merge, or drop out. Clusters form naturally based on connection density, revealing hidden structure in the data.