A 16-bit market arcade where the live order book is the level. Powered by Quicknode's Hyperliquid gRPC streams.
A pixel viking runs through the market and his altitude is the live price. The rainbow trail behind him is real price history, and everything around him is real Hyperliquid data turned into a game — resting stop orders, whale trades, and liquidations all show up as things on screen.
Just for fun. No real money is involved — coins are free play-points with no value. Nothing here places trades or touches a wallet. Heimdall is a demo for entertainment and educational purposes only, and nothing in it is financial advice.
- Real market, real-time — top-of-book, resting stops, trades and liquidations stream over Quicknode's Hyperliquid gRPC, rebroadcast to the browser as a tiny WebSocket feed.
- Equity perps — TSLA, NVDA, AAPL, GOOGL, MSFT, AMZN, COIN and SPCX (SpaceX), each with a hand-pixeled logo. Tabs auto-sort most-active-first.
- SIM ｜ LIVE toggle — flip between the real feed and a built-in client-side simulator that needs no server and burns no credits.
- Micro-price marker — the viking's height is a size-weighted micro-price, so he keeps moving on real order flow even when the printed bid/ask is pinned.
- Two ways to bet — catch scrolling
?blocks, or call UP / DOWN with odds set by the live stop-order imbalance. - All hand-made — every sprite is a pixel map baked at load (PICO-8 palette); the upbeat synthwave soundtrack and SFX are synthesized in the Web Audio API. No engine, no 3D, no assets.
Pick a ticker up top, then:
| Element | What it is | How it plays |
|---|---|---|
| 🟨 ? block | a price level, scrolling toward you | click to stake 100 coins that price reaches it before it passes you — run through it and the viking throws his axe; it bursts into coins. Farther = bigger multiplier. |
| ▲ UP / ▼ DOWN | a quick directional bet | first ±6 bps move your way wins; odds come from the real stop-order imbalance (thin side pays more) |
| 💎 Crystals | resting stop / TP orders (green buy, red sell) | hover for size & buy/sell split. Price hitting them = a real sweep (instant UP/DOWN win) |
| 🧰 Chest | a whale trigger order ≥ $1M | hover for details |
| 🐋 Whale | a real print ≥ $250K flies across the sky | hover for the trade |
| 💀 Skull | a real liquidation — screen shake + red flash | on your side of a live bet: cascade bonus |
| 🎞️ Ticker | the live trade tape | bottom of screen |
Out of coins? The +COINS button tops you back up — it's a game, not a casino. Hit the ? button in the top bar for an in-game glossary and the data sources.
Every object on screen is real Hyperliquid market data over Quicknode gRPC:
| In game | Stream | Docs |
|---|---|---|
| Price marker & spread | StreamBboBook |
↗ |
| Crystals (resting stops) | StreamTpslUpdates |
↗ |
| Whales & liquidations | StreamData (TRADES + EVENTS) |
↗ |
| All methods | Hyperliquid gRPC API | ↗ |
# 1. Relay (gRPC → WebSocket bridge). No credentials = simulated market.
cd server && npm install && npm start
# 2. Game
cd web && npm install && npm run dev
# open the URL Vite prints (e.g. http://localhost:5173)With no credentials the relay runs a built-in simulated market, so it works immediately. You can also just flip the in-app SIM toggle — the simulator runs entirely in the browser.
Live streaming needs a Quicknode endpoint with HyperCore gRPC (Build plan or higher):
cd server
cp .env.example .env
# From your HTTP Provider URL https://NAME.hype-mainnet.quiknode.pro/TOKEN/ set:
# HL_GRPC_ENDPOINT=NAME.hype-mainnet.quiknode.pro:10000
# HL_GRPC_TOKEN=TOKEN
npm start # the top-bar badge flips to LIVEThe equity perps are HIP-3 builder markets, so live symbols are dex-prefixed — the xyz
builder carries the full lineup (xyz:SPCX, xyz:TSLA, …). The relay strips the prefix before
broadcasting, so the UI shows bare tickers. Crypto symbols (BTC,ETH,SOL,HYPE) work too.
server/.envis gitignored — your token never leaves your machine.
Hyperliquid gRPC ──► server/relay.js ──► WebSocket :8787 ──► web/ (canvas game)
(live) strips dex prefix, SIM mode swaps the
rebroadcasts JSON relay for an in-browser
simulator (web/src/state/sim.ts)
server/— a small Node relay reading two Hyperliquid proto services over gRPC:orderbook.proto(StreamBboBook,StreamTpslUpdates) andhyperliquid.proto(StreamDataTRADES + EVENTS). It normalizes builder-dex symbols and rebroadcasts a simplified feed over a local WebSocket. With no credentials it generates a full simulated market in the same format.web/— Vite + React + TypeScript + Zustand. The game is a single 512×288 2D canvas, fractionally scaled to fit any screen with crisp pixels. Sprites are hand-authored pixel maps baked at load (PICO-8 palette); the soundtrack is a 16-bar synthwave arrangement on a Web Audio lookahead scheduler. The sameSIMsimulator drives the store so the front end is identical in both modes.
server/ gRPC → WebSocket relay (+ proto files, sim fallback)
web/ Vite app
src/game/ canvas engine, sprites, audio
src/state/ feed (live), sim (client market), game state
src/ui/ HUD, glossary
MIT — see LICENSE.