Skip to main content
Full-Stack

ORBIT

High-frequency multiplayer infinite canvas built with CRDT synchronization and vector geometry engine.

ORBIT cover

ORBIT — Multiplayer Infinite Canvas

01. Context & Objective

Creative ideation requires unconstrained digital surfaces where multiple designers, developers, and strategists can collaborate simultaneously with zero perceptible lag. Most online whiteboarding tools become sluggish when documents exceed several thousand objects or when network connectivity fluctuates. ORBIT was built as a lightweight, lightning-fast infinite vector canvas with peer-to-peer and client-server synchronization capabilities.

02. Architectural Design & Philosophy

The interface operates with invisible utility. There are no cluttered multi-tier toolbars; all navigational controls, zoom transformations, and vector manipulation affordances use contextual radial menus, minimalist keyboard shortcuts, and smooth inertia panning. The canvas aesthetic mirrors engineering drafting tables with subtle grid divisions and clean monochrome vector pathing.

03. Creative Engineering & Graphics Pipeline

ORBIT combines a custom 2D spatial indexing pipeline with state-of-the-art collaborative data structures:

  • Conflict-Free Replicated Data Types (CRDT): Powered by Yjs, enabling distributed nodes to modify vector paths, text nodes, and spatial groupings concurrently without central lock contention. State merges are mathematically guaranteed to converge.
  • Spatial R-Tree Viewport Culling: Canvas rendering queries an in-memory R-tree spatial index to draw strictly the geometry within the visible viewport bounds, allowing documents to host over 50,000 vector shapes without dropping below 60 FPS.
  • Ephemeral Awareness & WebSocket Gateway: Cursor coordinates and selection highlights are transmitted over binary WebSocket protocols with dead-reckoning extrapolation, delivering buttery 120Hz remote cursor movement.
  • Supabase Persistence: Document snapshots and version checkpoints are stored in Supabase PostgreSQL with automated differential delta compression.

04. Technical Specifications & Performance

  • Input Latency: Local user pen/mouse strokes render with < 4ms input latency using double-buffered Canvas 2D contexts.
  • Network Efficiency: Binary state updates compressed with zlib reduce bandwidth to less than 1.5 KB/s per active user.
  • Offline Resilience: Fully operational offline; changes queue in IndexedDB and synchronize automatically upon network reconnection.

05. Results & Engineering Impact

Deployed across remote engineering teams for rapid system architecture diagramming and collaborative brainstorming. User benchmarks confirmed a 65% reduction in canvas render latency compared to legacy collaborative tools.

ORBIT gallery image 1
ORBIT gallery image 2
Next Project

VOX

Experiment