Market Depth Cinema

Market Depth Cinema

A cinematic time-travel orderbook visualizer for Kraken's BTC/USD market.

Live Demo | GitHub

The Problem

Cryptocurrency traders analyzing market depth face a critical limitation: orderbook data is ephemeral. The moment passes, and the market microstructure that led to a price movement is lost forever. Existing tools show only the current state, making it impossible to study how liquidity evolved before significant events or to learn from historical market dynamics.

What I Built

Market Depth Cinema transforms the Kraken orderbook into a DVR-like experience. Connect to live BTC/USD data via WebSocket, and the application continuously records orderbook snapshots. Pause at any moment, rewind to study how a whale order appeared, or fast-forward through quiet periods at 10x speed. An intelligent event detection system automatically identifies significant market events—large orders, spread changes, liquidity gaps, and rapid cancellations—marking them on an interactive timeline for instant navigation. The result is a powerful tool for traders, researchers, and anyone wanting to understand market microstructure.

Key Features

• Time-Travel Playback — Rewind, pause, fast-forward (0.1x to 10x) through recorded orderbook history
• Real-Time Event Detection — Automatic identification of large orders, spread changes, liquidity gaps, and rapid cancellations via Web Worker
• Interactive Depth Chart — D3.js visualization with cumulative volume, zoom controls, and price pinning
• Live Orderbook Table — Alternative view showing real-time bid/ask levels with volume and price data
• Heatmap Overlay — Toggle liquidity concentration view showing volume distribution across price buckets
• Timeline with Event Markers — Severity-colored markers aggregated to prevent overlap, click to jump to any event
• Keyboard-First UX — Full keyboard navigation: Space (play/pause), arrows (scrub), N/P (next/prev event), L (go live)

Technical Highlights

Built with React 19 and TypeScript 5 for type safety and modern hooks. D3.js handles the depth chart visualization with 150ms transitions for smooth updates, while Framer Motion powers UI animations. State management uses Zustand for its minimal boilerplate and excellent TypeScript support. The event detection runs in a Web Worker to keep the main thread responsive during intensive pattern matching. react-window virtualizes the event list to handle thousands of detected events without performance degradation. The entire UI follows a glassmorphism design system with CSS custom properties for consistent theming.

Performance optimizations:

• Chart updates throttled to 500ms to balance smoothness with CPU usage
• Orderbook data aggregated into $10 buckets for cleaner visualization
• Circular buffer limits memory usage for snapshot storage
• Event aggregation groups same-type events within 1 second

Usage

• Connect — The app automatically connects to Kraken's WebSocket and starts recording
• Watch — Observe the live depth chart updating in real-time
• Detect — Events appear in the right panel as they're detected
• Travel — Click the timeline or use arrow keys to enter replay mode
• Analyze — Scrub through history, zoom into price levels, toggle heatmap view

Keyboard Shortcuts

Future Enhancements

With more time, I would add:

• Persistent Storage — IndexedDB integration to save sessions and replay historical days
• Multiple Trading Pairs — Support for ETH/USD, SOL/USD, and other Kraken pairs
• Event Annotations — User-added notes and bookmarks on the timeline
• Export Functionality — Download snapshots as JSON or generate video recordings
• Pattern Recognition — ML-based detection of spoofing, layering, and other patterns
• Alert System — Configurable notifications for specific event types