DataByTanjung
Back to all work
Architecture & SystemsCompleted Jan 15, 2026

Aether Engine — Real-time Distributed Simulation Canvas

A high-throughput simulation canvas and visual network topology manager engineered for complex multi-region cloud infrastructures.

Live SystemSource Code
Next.jsTypeScriptWebSocketsHTML5 CanvasTailwind CSSPrisma

Executive Overview

Aether Engine was created to solve critical visibility blind spots in high-velocity cloud deployments. It provides engineers with a live, 60fps interactive simulation canvas capable of rendering 10,000+ dynamic network nodes with sub-second anomaly detection.
The Critical Challenge

The Problem

Legacy monitoring tools relied on tabular dashboards and polling intervals that failed to catch cascading transient network partitions. By the time a metric spike appeared in historical graphs, production downtime had already lasted several minutes.

The Data Strategy

The Approach

Rather than relying on DOM elements for thousands of topology nodes, I engineered a bespoke WebGL/Canvas rendering pipeline with an event-driven WebSocket broker. Nodes update in real time with hardware-accelerated fluid vectors and instant search indexing.

Analytics Process & Implementation

1. Modeled state synchronization using binary delta packets to reduce network bandwidth by 78%. 2. Built an ergonomic spatial navigation system with smooth zoom, pan, and node clustering. 3. Designed an inspection drawer providing instantaneous telemetry drill-downs for any highlighted cluster. 4. Conducted intensive stress tests across 50,000 concurrent mock nodes.

Measurable Impact & Results

Deployed across 12 infrastructure teams, reducing Mean Time to Detection (MTTD) from 8.5 minutes to under 20 seconds. The canvas maintains 60 FPS on standard laptop hardware even under heavy payload stress.

Key Takeaways & Lessons

Hardware-accelerated rendering inside web standards unlocks desktop-grade performance for technical tooling. Decoupling spatial coordinate math from the React component tree was critical for eliminating render jank.

Next Case Study →Krypton — Multi-Platform Design Token & Component Infrastructure