A real-time latency distribution simulator built with Next.js, TypeScript, and Tailwind CSS. Visualize how different latency profiles affect your system's performance with interactive heat maps and percentile tracking.
- Multiple Data Sources: Create and configure multiple independent latency sources
- Bi-modal Distribution: Realistic latency modeling with configurable fast path (log-normal) and slow path (heavy-tailed log-normal)
- Real-time Visualization: Canvas-based heat maps updating every second with 2000 samples/second per source
- Percentile Tracking: Live p50, p75, p90, p95, p99 percentile lines overlaid on heat maps
- Aggregate View: See the combined latency (max across sources) when running multiple sources
- Interactive Controls: Mouse wheel support on sliders for fine-tuned adjustments
Each data source can be configured with:
- Fast Path Proportion (50-95%): Percentage of requests taking the fast path
- Fast Path Median (5-200ms): Median latency for fast path requests
- Fast Path Spread: Variance of the fast path distribution
- Slow Path Median (50-1000ms): Median latency for slow path requests
- Tail Heaviness (α): Controls how heavy the tail is (lower = heavier)
- Max Latency (1-10s): Upper bound for latency values
# Install dependencies
npm install
# Run development server
npm run devOpen http://localhost:3000 to view the application.
- Next.js 15 with App Router
- TypeScript
- Tailwind CSS v4
- shadcn/ui components
- Radix UI primitives