Skip to content
Menu
All work

Own productLive

Live market order flow, rendered as a 3D battle

A real-time 3D scene that turns XRP trading into two armies, fed by public exchange streams and built to keep running when a feed or the graphics card fails.

Industry
Crypto markets
What it shows
Real-time data, Data visualisation, 3D on the web
Year
2026
See it live
xrpwarzone.com
XRP BattlefieldLive order flow as a battle · one round per 60-second candleDummy tradesWhale buy $48,518Balancebuyers leadBuyersSellersRound50 s of 60250 v 162 soldiersWar logWhale buy$48,51849.6 sBig buy$19,39846.9 sBig buy$15,05441.5 s
Illustration with dummy trades, run through the app's real rules. The live 3D scene is below and at xrpwarzone.com.

In numbers

markets to choose from, including a synthetic XRP/BTC pair
3
exchange hosts with automatic failover
3
soldiers on the field at most, 250 per side
500
automated interface tests, including accessibility checks and 12 screen sizes
28

Figures come from the project’s own files and records.

What changes

The steps people did by hand, and the route the work takes now.

Thousands of trades arrive each minute

Before

  1. Watch the order book
  2. Scroll the trade tape
  3. Compare buy and sell volume
  4. Guess who is winning

With the system

  1. Live feed turns trades into two armies
  2. The balance bar shows momentum

Market pressure readable in a second

The problem

An order book is exact and almost impossible to read at a glance. Thousands of trades a minute become a scrolling list of numbers, and the question most people actually have, “who is pushing harder right now?”, stays buried.

What we built

XRP Battlefield turns that stream into a scene you understand in a second. Buyers and sellers are two armies. Every trade sends soldiers onto the field, the depth of waiting orders sets the size of each army, and every 60-second candle is one round. On the XRP market the round goes to the side whose trades added up to more dollars; on the XRP/BTC view, to whichever coin gained on the other.

A 3D battlefield at night. Blue soldiers for XRP buyers clash with orange soldiers for sellers under a live price, a buyer-seller balance bar and a war log of large trades.
The live scene on desktop.

Large trades arrive as named events. A war log keeps the record, and a balance bar at the top shows momentum in plain terms. It runs as well on a phone as on a desktop.

The mobile layout: live price and momentum bar at the top, the battle in the middle, a war log and camera, sound, pause and chat controls at the bottom.
The mobile layout keeps the price, momentum and controls within thumb reach.

Built to keep running

Live data fails in ordinary ways: a stream stalls, an exchange host drops, a laptop has no working graphics driver. Each case has a planned answer.

  • The feed rotates across three exchange hosts and a watchdog catches stale data.
  • If nothing connects, a clearly labelled demo keeps the scene running.
  • If 3D can’t start, the live numbers stay available and the visitor chooses what to do next.
A dialog over the dimmed interface reading 'Battlefield could not load', with options to retry the renderer, reload the page or continue with the live figures only.
When 3D can't start, the live figures stay available. We caught this screen ourselves while capturing images for this page.

How a round is decided

Replay a dummy round through the real rules, break the feed or the 3D scene on purpose, and see the limits the project is built to. The system map shows all of it in one place: the live path from exchange to battlefield, every fallback under the part it protects, the chat and a release, in ten journeys checked against the code on 12 October 2026.

exchange hosts, tried in order
3
src/core/config.ts
of silence on any book or ticker ends Live
5 s
src/core/feed.ts
to a clearly labelled demo if nothing connects
4.2 s
src/core/feed.ts
interface tests, with overflow checked at 12 screen sizes
28
tests/hud-ui.spec.ts
Interactive · 10 journeys

Interactive system map

The live path, and every fallback under it

30 parts and 10 journeys, from a trade becoming soldiers to a refused host, a quiet stream, a failed 3D load and a release. Checked against the code on 12 October 2026.

Play 10 journeys, or click any of its 30 parts.

exchange hosts, tried in order
3
of silence ends Live
5 s
interface tests, at 12 screen sizes
28

Explore the map

InteractiveReplay a round moment by moment, or pick a failure and see what the app does.
View

A round, replayed

Sixty seconds of dummy trades on the XRP market, run through the app’s real rules. Pick a round, then step through it.
Round
Moment
The rules, as in the code
  1. Each trade calls up soldiers for its side: one per 1,400 XRP, at least 1 and at most 60.
  2. The top 20 levels of the order book set each army’s standing size: one soldier per $3,800 of resting orders, 40 to 250 a side.
  3. A trade of $15,000 or more is a big trade, $60,000 or more a whale. Smaller trades count too when they dwarf the recent typical trade. A whale calls up 22 extra soldiers and cuts down up to 26 on the other side.
  4. After 60 seconds the round goes to the side whose trades added up to more dollars. Closer than $1,500 is a draw.
On the XRP/BTC view the round goes instead to whichever coin gained on the other, by at least 0.03%, so the far bigger BTC market can’t decide every round on volume.
Dummy round
0:10 of 1:000:20 of 1:000:30 of 1:000:40 of 1:000:50 of 1:001:00 of 1:000:10 of 1:000:20 of 1:000:30 of 1:000:40 of 1:000:50 of 1:001:00 of 1:000:10 of 1:000:20 of 1:000:30 of 1:000:40 of 1:000:50 of 1:001:00 of 1:00
Balance bar, as the app shows it
Buyers 45% · Sellers 55%Buyers 71% · Sellers 29%Buyers 54% · Sellers 46%Buyers 42% · Sellers 58%Buyers 63% · Sellers 37%Buyers 95% · Sellers 5%Buyers 73% · Sellers 27%Buyers 27% · Sellers 73%Buyers 29% · Sellers 71%Buyers 22% · Sellers 78%Buyers 39% · Sellers 61%Buyers 35% · Sellers 65%Buyers 35% · Sellers 65%Buyers 59% · Sellers 41%Buyers 49% · Sellers 51%Buyers 53% · Sellers 47%Buyers 48% · Sellers 52%Buyers 44% · Sellers 56%
Recent net buying, fading over seconds. It can lean one way while the round goes the other.
Net dollars this round, buys minus sells
−$20,240+$61,083+$40,924−$6,238+$77,144+$344,786+$86,258−$47,489−$85,024−$144,781−$154,528−$193,437−$76,812+$18,334+$4,476+$19,240+$7,130+$74
Dollars traded
Bought$131,162 · 70$271,573 · 154$369,719 · 225$496,445 · 299$646,149 · 360$986,555 · 446$199,086 · 53$289,988 · 101$503,885 · 165$571,977 · 217$695,949 · 275$764,256 · 314$76,183 · 40$286,930 · 80$315,570 · 111$373,909 · 142$419,937 · 181$518,382 · 223
Sold$151,403 · 48$210,489 · 100$328,795 · 145$502,683 · 192$569,005 · 242$641,770 · 279$112,828 · 78$337,476 · 172$588,909 · 250$716,758 · 322$850,477 · 386$957,693 · 459$152,995 · 46$268,596 · 84$311,094 · 115$354,669 · 153$412,807 · 195$518,308 · 229
Dollars, then the number of trades.
Armies, out of 250
Buyers205 · book 163206 · book 164198 · book 163196 · book 164250 · book 163213 · book 162175 · book 126164 · book 126167 · book 127150 · book 125161 · book 126151 · book 127176 · book 144163 · book 144160 · book 145156 · book 144160 · book 144191 · book 146
115 soldiers called up by trades so far.245 soldiers called up by trades so far.336 soldiers called up by trades so far.446 soldiers called up by trades so far.569 soldiers called up by trades so far.813 soldiers called up by trades so far.132 soldiers called up by trades so far.213 soldiers called up by trades so far.369 soldiers called up by trades so far.432 soldiers called up by trades so far.535 soldiers called up by trades so far.594 soldiers called up by trades so far.65 soldiers called up by trades so far.173 soldiers called up by trades so far.206 soldiers called up by trades so far.256 soldiers called up by trades so far.301 soldiers called up by trades so far.381 soldiers called up by trades so far.
Sellers153 · book 125152 · book 129160 · book 126161 · book 126162 · book 128156 · book 127193 · book 161217 · book 163233 · book 164208 · book 165223 · book 162220 · book 165198 · book 147169 · book 143164 · book 145168 · book 146164 · book 144177 · book 147
122 soldiers called up by trades so far.183 soldiers called up by trades so far.278 soldiers called up by trades so far.411 soldiers called up by trades so far.473 soldiers called up by trades so far.531 soldiers called up by trades so far.107 soldiers called up by trades so far.287 soldiers called up by trades so far.481 soldiers called up by trades so far.595 soldiers called up by trades so far.712 soldiers called up by trades so far.815 soldiers called up by trades so far.116 soldiers called up by trades so far.208 soldiers called up by trades so far.248 soldiers called up by trades so far.295 soldiers called up by trades so far.349 soldiers called up by trades so far.427 soldiers called up by trades so far.
Solid: set by the order book. Pale: recent call-ups from trades, fading over seconds.
Latest big trades
  1. 0:07Big buy$18,53112 soldiers
  2. 0:03Big sell$51,08733 soldiers
  3. 0:02Big buy$26,83017 soldiers
  1. 0:14Big buy$29,91519 soldiers
  2. 0:13Big buy$11,6437 soldiers
  3. 0:07Big buy$18,53112 soldiers
  1. 0:27Big sell$24,75016 soldiers
  2. 0:21Whale sell$41,27726 soldiers + 22
  3. 0:14Big buy$29,91519 soldiers
  1. 0:33Big sell$35,31122 soldiers
  2. 0:32Big buy$18,45312 soldiers
  3. 0:32Whale sell$72,94746 soldiers + 22
  1. 0:50Whale buy$48,51831 soldiers + 22
  2. 0:47Big buy$19,39812 soldiers
  3. 0:42Big buy$15,05410 soldiers
  1. 0:54Big buy$31,35020 soldiers
  2. 0:52Big buy$33,64921 soldiers
  3. 0:51Whale buy$68,13543 soldiers + 22
  1. 0:04Whale buy$121,54060 soldiers + 22
  2. 0:03Big sell$9,6646 soldiers
  3. 0:02Big sell$8,4275 soldiers
  1. 0:13Big sell$19,89013 soldiers
  2. 0:12Big sell$48,42432 soldiers
  3. 0:10Big sell$14,85810 soldiers
  1. 0:29Big sell$18,94512 soldiers
  2. 0:25Big buy$17,42411 soldiers
  3. 0:22Whale sell$73,62948 soldiers + 22
  1. 0:36Big sell$13,9799 soldiers
  2. 0:29Big sell$18,94512 soldiers
  3. 0:25Big buy$17,42411 soldiers
  1. 0:49Big sell$25,64417 soldiers
  2. 0:45Big buy$26,18517 soldiers
  3. 0:36Big sell$13,9799 soldiers
  1. 0:57Big sell$16,22611 soldiers
  2. 0:49Big sell$25,64417 soldiers
  3. 0:45Big buy$26,18517 soldiers
  1. 0:02Whale sell$61,01040 soldiers + 22
  2. 0:01Big sell$6,5744 soldiers
  1. 0:15Big sell$48,83632 soldiers
  2. 0:15Big sell$19,15212 soldiers
  3. 0:12Whale buy$160,18860 soldiers + 22
  1. 0:15Big sell$48,83632 soldiers
  2. 0:15Big sell$19,15212 soldiers
  3. 0:12Whale buy$160,18860 soldiers + 22
  1. 0:15Big sell$48,83632 soldiers
  2. 0:15Big sell$19,15212 soldiers
  3. 0:12Whale buy$160,18860 soldiers + 22
  1. 0:15Big sell$48,83632 soldiers
  2. 0:15Big sell$19,15212 soldiers
  3. 0:12Whale buy$160,18860 soldiers + 22
  1. 0:58Big buy$31,40821 soldiers
  2. 0:58Big sell$28,58819 soldiers
  3. 0:57Big sell$17,93912 soldiers
Sellers ahead by $20,240 so far. The round is decided at 1:00.
Buyers ahead by $61,083 so far. The round is decided at 1:00.
Buyers ahead by $40,924 so far. The round is decided at 1:00.
Sellers ahead by $6,238 so far. The round is decided at 1:00.
Buyers ahead by $77,144 so far. The round is decided at 1:00.
Verdict at 1:00
Buyers win the round by $344,786.
Buyers ahead by $86,258 so far. The round is decided at 1:00.
Sellers ahead by $47,489 so far. The round is decided at 1:00.
Sellers ahead by $85,024 so far. The round is decided at 1:00.
Sellers ahead by $144,781 so far. The round is decided at 1:00.
Sellers ahead by $154,528 so far. The round is decided at 1:00.
Verdict at 1:00
Sellers win the round by $193,437.
Sellers ahead by $76,812 so far. The round is decided at 1:00.
Buyers ahead by $18,334 so far. The round is decided at 1:00.
Buyers ahead by $4,476 so far. The round is decided at 1:00.
Buyers ahead by $19,240 so far. The round is decided at 1:00.
Buyers ahead by $7,130 so far. The round is decided at 1:00.
Verdict at 1:00
A draw: $74 apart, inside the $1,500 band.

When things fail

Pick a failure to see what the app does. These are the paths in the feed and renderer code, with their real timings.
Failure
What a visitor sees
Waiting for a moment, then Live.
Partial data never claims Live (feed lifecycle test).
What a visitor sees
Live drops to Waiting and the battle pauses, then Live again.
Stale reconnect resets and recovers readiness (feed lifecycle test).
What a visitor sees
Demo, shown in the status where Live would be.
Open without data falls back honestly; repeated silent reconnects end in demo (feed lifecycle tests).
What a visitor sees
A dialog: Battlefield could not load. The live figures stay up.
3D failure traps focus and can continue into the live HUD (interface test).
What a visitor sees
Nothing. The bad message is dropped.
An empty book never counts towards Live (feed lifecycle test).
Feed status
Feed states: Waiting, Live and Demo, with the four transitions listed below.1234WaitingDemoLive
  1. 1Every pair’s book and ticker have arrived: Live.
  2. 2A book or ticker silent for 5 s, or the socket closes: Waiting, and the battle pauses.
  3. 3No complete data within 4.2 s, every host refuses, or the feed drops a fourth time: Demo.
  4. 4A host refuses: try the next one. A quiet feed: reconnect after 0.8, 1.6, then 2.4 s.
Exchange hosts, in order
  1. stream.binance.comRefused
  2. data-stream.binance.visionConnected
  3. stream.binance.usNot needed
3D scene
Running
  1. 0 sOpens one socket to the first host, carrying trades, the top 20 book levels and the ticker.
  2. At onceThat host closes before it opens, so the next host in the list is tried straight away.
  3. When readyLive only once every pair has sent both a book snapshot and a ticker. A handshake alone is not enough.
Exchange hosts, in order
  1. stream.binance.comConnected
  2. data-stream.binance.visionNot needed
  3. stream.binance.usNot needed
3D scene
Running
  1. Every 1 sA watchdog checks when each book and ticker last arrived.
  2. 5 s silentAny book or ticker silent for 5 seconds ends Live. The socket is closed and old snapshots are thrown away.
  3. MeanwhileRounds and combat freeze, and trades are ignored, so partial data never moves the battle.
  4. 0.8, 1.6, 2.4 sReconnects from the first host, waiting a little longer each time.
Exchange hosts, in order
  1. stream.binance.comRefused
  2. data-stream.binance.visionRefused
  3. stream.binance.usRefused
3D scene
Running
  1. From 0 sTries the three hosts in turn. If all three refuse, the demo starts at once.
  2. 4.2 sStill no complete market data, so a demo generator takes over and the status says Demo.
  3. After 3 retriesA feed that keeps going quiet ends in the same labelled demo.
  4. ThenA live socket is never quietly revived under the demo label. Switching market or reloading starts again.
Exchange hosts, in order
  1. stream.binance.comConnected
  2. data-stream.binance.visionNot needed
  3. stream.binance.usNot needed
3D scene
Could not load, dialog open
Retry battlefieldReload pageContinue with HUD
  1. On loadThe 3D scene loads as a separate bundle, behind a 30-second time limit.
  2. If it failsNo WebGL, a model that won’t load or the time limit: the error is caught and a dialog opens.
  3. ChoicesRetry battlefield, Reload page, or Continue with HUD. Focus starts on Retry, and the controls behind the dialog wait.
  4. ThroughoutThe feed and the round keep running underneath, so the price, balance bar and war log stay live.
Exchange hosts, in order
  1. stream.binance.comConnected
  2. data-stream.binance.visionNot needed
  3. stream.binance.usNot needed
3D scene
Running
  1. On arrivalEvery trade, book and ticker is checked: sizes must be real numbers and prices above zero.
  2. If notThe message is dropped. One bad number would otherwise poison the balance bar for the rest of the session.
  3. Empty bookA book with no levels does not count towards Live.

Under the hood

The counts, limits and budgets in the project, each with the file it comes from.

Feed

  1. 3streams per pair on one socket: trades, top 20 book levels every 100 ms, tickersrc/core/feed.ts
  2. 3markets to choose from: XRP/BTC, XRP and BTCindex.html, src/core/market.ts
  3. 4pairs behind the synthetic XRP/BTC view, two for each coinsrc/core/market.ts
  4. 1 swatchdog intervalsrc/core/feed.ts
  5. 3reconnect attempts, 0.8, 1.6 and 2.4 s apart, before the demosrc/core/feed.ts

Battle rules

  1. 60 sper round, one per one-minute candlesrc/core/config.ts
  2. $1,500net dollar gap under which a round is a drawsrc/core/config.ts
  3. $3,800of resting orders fields one soldiersrc/core/config.ts
  4. 250soldiers per side at most, 500 on the fieldsrc/core/config.ts
  5. 60soldiers at most from any single tradesrc/core/config.ts

Rendering

  1. 1.5×pixel density cap at 1,024 px wide and below, 2× abovesrc/render/scene.ts
  2. 1,024px shadow map on phones and tablets, 2,048 on desktopsrc/render/scene.ts
  3. 260instances per soldier class, just over the 250 capsrc/render/render3d.ts
  4. 30 stime limit on loading the 3D scenesrc/main.ts

Tests

  1. 28interface tests in Playwright: 16 test blocks, two of them repeated per viewport, from 320 to 1,440 pxtests/hud-ui.spec.ts
  2. 44 pxminimum touch target, checked on phone controlstests/hud-ui.spec.ts
  3. 2automated accessibility scans, phone and desktoptests/hud-ui.spec.ts
  4. 6feed tests: 5 lifecycle tests on a fake clock and fake socket, and 1 for number formattingsrc/dev/feedtest.ts
  5. 6headless simulation scripts on fixed seeds: formation (16 checks), combat, balance, faction fairness, lifespan, troop trimmingsrc/dev/

Live chat

  1. 280characters per messageworker/index.ts
  2. 30 sbetween messages from one connectionworker/index.ts
  3. 3connections at most from one addressworker/index.ts
  4. 50messages replayed to someone joiningworker/index.ts
Dummy trades and order books, drawn the way the app’s own demo mode draws them. The rules, timings and counts are the real project’s, as of 15 July 2026.

What it shows

The same pattern runs behind an operations dashboard: take a fast, noisy data source, decide what a person needs to see, show it in a way that reads in seconds, and make every failure visible and recoverable. That is the work we do for clients, whether the stream is market data, warehouse scans or support tickets.

Under the hood

  • TypeScript
  • Three.js
  • Vite
  • Exchange WebSocket streams
  • Cloudflare Workers
  • Durable Objects
  • Playwright
  • axe-core

  1. 01Exchange streams

    Trades, top-20 order book depth and the ticker arrive over public WebSockets, with failover across three hosts.

  2. 02Feed

    A watchdog spots stale data. If no feed connects, a demo generator keeps the scene alive and says so.

  3. 03Simulation

    Each trade sends soldiers in, order book depth sets army size, and every 60-second candle is one round.

  4. 04Renderer

    Three.js with instanced units and baked animation, so hundreds of soldiers stay smooth on a phone.

  5. 05Interface

    Price, momentum, the round score and a war log of large trades, on desktop and mobile.

  6. 06Live chat

    A Cloudflare Worker and Durable Object run the chat, with message limits, rate limits and a per-address connection cap.

Want something like this built for your team?

Tell us about the process or the data. We'll reply within two business days with a first view of what we'd build.

Start a project