An interactive bubble chart visualising OPNet token price changes in real time — inspired by cryptobubbles.net.
Live demo: https://bubblemap-tau.vercel.app
- Bubbles sized by price change percentage
- Green = positive, red = negative
- Hover for detailed token info (price, change, BTC reserve, liquidity, address)
- Click a bubble to open it on OPScan
- Drag bubbles and they stay where you drop them
- Smooth floating physics — bubbles gently sway across the whole canvas
- Live BTC price and block number from OPNet mainnet
- Demo mode with animated price simulation when live data is unavailable
- Vite + TypeScript (no framework)
- Canvas 2D for rendering
- Custom force physics simulation (no D3)
- OPNet RPC (
https://mainnet.opnet.org/api/v1/json-rpc) - Deployed on Vercel
src/
main.ts — app state, data loading, mouse interaction
bubbleSimulation.ts — physics engine (forces, drag, placement)
bubbleRenderer.ts — canvas drawing (bubbles, tooltips, background)
opnetService.ts — OPNet RPC calls, token discovery, price fetching
types.ts — TypeScript interfaces
styles.css — dark theme CSS
index.html — HTML shell
npm install
npm run dev # dev server at localhost:3000
npm run build # production build- Twitter / X: @3ndicub3
- Telegram: @Elmanilov
- Email: elmanilov@gmail.com