Underwater Dashboard

Heroes 2

About

A real HTML analytics dashboard seen through a live water simulation: drag ripples across it, search it, watch new orders slide in while the numbers refract. Uses Chrome 157's HTML-in-Canvas; other browsers get the same dashboard as plain HTML. Light and dark. More at kit.neebarp.com

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

Code

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

Usage.tsx

import UnderwaterDashboard from "@/components/ui/underwater-dashboard";

export default function UnderwaterDashboardDemo() {
  return (
    <div style={{ position: "relative", width: "100%", height: 560 }}>
      <UnderwaterDashboard
        brand="Saltline"
        initials="AK"
        accent="#FF6A4D"
        revenueLabel="Revenue today · live"
        revenue={1284903.42}
        growth="▲ 18.4%"
        compareText="vs. $1.08M yesterday"
        ordersTitle="Live orders"
        orders={[
          { city: "Lisbon", item: "Linen tote · 2 items", amount: 248, color: "#ff4b36", ago: "2s" },
          { city: "Kyoto", item: "Ceramic set · 3 items", amount: 412.5, color: "#1f8fff", ago: "9s" },
          { city: "Austin", item: "Field jacket", amount: 189, color: "#0f9f6e", ago: "14s" },
          { city: "Oslo", item: "Wool throw · 2 items", amount: 326, color: "#7a4dff", ago: "21s" },
          { city: "Cape Town", item: "Desk lamp", amount: 142.9, color: "#ff9a3c", ago: "33s" },
          { city: "Melbourne", item: "Pour-over kit", amount: 96, color: "#e0407a", ago: "41s" },
          { city: "Toronto", item: "Canvas sneakers", amount: 158, color: "#14a3b8", ago: "52s" },
        ]}
        incoming={[
          { city: "Kyoto", item: "Tea cabinet · 1 item", amount: 1240, color: "#1f8fff" },
          { city: "Lisbon", item: "Linen sofa cover", amount: 860, color: "#ff4b36" },
          { city: "Oslo", item: "Wool rug · 1 item", amount: 975, color: "#7a4dff" },
          { city: "Austin", item: "Leather duffel", amount: 690, color: "#0f9f6e" },
        ]}
        kpis={[
          { label: "Visitors now", value: "3,482", delta: "▲ 12%" },
          { label: "Conversion", value: "4.81%", delta: "▲ 0.6" },
          { label: "Avg. order", value: "$86.40", delta: "▲ 3%" },
          { label: "Refunds", value: "0.9%", delta: "▼ 0.2", down: true },
        ]}
      />
    </div>
  );
}