OrderBlock Terminal Replica: Linked-Brushing F&O Flow Board
A from-scratch rebuild of a proprietary open-interest funnel terminal, with a live crypto-perp feed and Playwright-verified interactions.
Rebuilt from DOM geometry and observed behaviour rather than copied source, including hover lineage chains, pinning, a timed build-in and ambient animation; seeded NSE mode plus a live top-210 Binance perpetuals mode; hash-routed shell pages.
- Rebuilt from behaviour, not copied source
- Linked brushing, pinning and build-in reproduced and Playwright-verified
- Live crypto mode from public endpoints in ~30 s
- Drop-in snapshot contract for a live NSE feed
A trader-facing terminal showed an open-interest funnel that narrowed hundreds of F&O names into a handful of tickets, with rich hover linking. Its sample page was an obfuscated bundle, and pulling the source was neither possible nor the point. The replica was built from the layer map: DOM geometry, screenshots, and an inventory of the page's event handlers and function names, then every hover, click and key was exercised before calling anything done, after an early screenshot-only version was rightly judged static and sloppy.
The interaction layer reproduces linked brushing (hovering a name lights its whole lineage and an inspector), click-to-pin, a 4.5-second build animation on load and an ambient particle loop, all verified in Playwright with zero console errors. Data comes from a seeded generator by default; a crypto mode pulls the top 210 Binance USDT perpetuals (24-hour tickers, 15-minute klines and open-interest history) in about 30 seconds without a key and switches the renderer to an asinh scale when movers exceed eight percent. NSE mode goes live the moment a feed writes a snapshot file in the documented shape.
The shell is a hash-routed single-page app with journal, learn, community, feedback and settings pages, and the learning page embeds my real lesson videos.
How it works
- Feed writes a snapshot (seeded, crypto or NSE)
- Funnel stages compute candidates per symbol
- Canvas renders the board with build-in animation
- Hover and click drive lineage highlighting and the inspector
- Playwright script verifies pages and interactions
Screens
