Liquidity Heatmap

Component

About

A chart that visualizes order-book liquidity as animated colored bands across price levels and time, with a price trace line and hoverable depth tooltips.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Liquidity Heatmap to your project and fits it to your theme.

Code

How Liquidity Heatmap is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import LiquidityHeatmap from "@/components/ui/liquidity-heatmap";

function buildSnapshots() {
  const priceLevels = [
    61250, 61200, 61150, 61100, 61050, 61000, 60950, 60900, 60850, 60800,
  ];
  const columns = 24;
  const snapshots = [];
  let center = 61025;
  let seed = 42;
  const rand = () => {
    seed = (seed * 1103515245 + 12345) % 2147483648;
    return seed / 2147483648;
  };
  for (let i = 0; i < columns; i++) {
    center += Math.round((rand() - 0.5) * 60);
    const levels = priceLevels.map((price) => ({
      price,
      size: Math.max(
        0,
        Math.round(
          140 * Math.exp(-Math.abs(price - center) / 90) * (0.5 + rand()),
        ),
      ),
    }));
    const hour = (23 - i + 24) % 24;
    snapshots.push({
      id: `t-${i}`,
      label: `${hour.toString().padStart(2, "0")}:00`,
      levels,
      price: center,
    });
  }
  return snapshots;
}

const snapshots = buildSnapshots();

export default function LiquidityHeatmapDemo() {
  return (
    <div className="w-full max-w-2xl">
      <LiquidityHeatmap
        snapshots={snapshots}
        unit="BTC"
        label="BTC/USD liquidity heatmap"
      />
    </div>
  );
}