████████╗██████╗ █████╗ ██████╗ ███████╗ ██████╗ ██████╗ ██████╗ ██╗████████╗
╚══██╔══╝██╔══██╗██╔══██╗██╔══██╗██╔════╝██╔═══██╗██╔══██╗██╔══██╗██║╚══██╔══╝
██║ ██████╔╝███████║██║ ██║█████╗ ██║ ██║██████╔╝██████╔╝██║ ██║
██║ ██╔══██╗██╔══██║██║ ██║██╔══╝ ██║ ██║██╔══██╗██╔══██╗██║ ██║
██║ ██║ ██║██║ ██║██████╔╝███████╗╚██████╔╝██║ ██║██████╔╝██║ ██║
╚═╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═════╝ ╚══════╝ ╚═════╝ ╚═╝ ╚═╝╚═════╝ ╚═╝ ╚═╝
"For the first time, you can actually see global trade — this invisible $32 trillion force that moves the world — rendered visually, beautifully, in real time, in your browser."
TradeOrbit is a living, breathing world trade intelligence experience. The moment you open it, you enter a space that feels like NASA mission control crossed with a Bloomberg terminal crossed with a sci-fi movie interface. Everything moves. Everything breathes. Every number means something real.
It has one purpose: show the world how global trade is moving right now, beautifully.
● → 💥 → [ T R A D E O R B I T ] → $32.4T / 195 / 847 → 💥CRACK💥 → 🌍
dot burst letter by letter numbers count up screen earth
| Phase | Duration | What Happens |
|---|---|---|
| Blackout | 0–1s | Pure black. Silence. |
| Heartbeat | 1–2s | Single green dot pulses at center of screen |
| Big Bang | 2–5s | 600 particles explode outward forming a neural network |
| Logo Build | 4–8s | TRADEORBIT assembles letter-by-letter with telegraph click sounds |
| Counters | 6–10s | $32.4T · 195 countries · 847 ports roll up simultaneously |
| Spiral | 10–18s | Every particle spirals inward, gravity forming |
| The Crack | 18–22s | Screen fractures open — transparent cracks reveal the Earth beneath |
| Reveal | 22–25s | Canvas fades. The glowing blue Earth greets you. |
The centerpiece. A photorealistic 3D Earth powered by Three.js WebGL.
┌─────────────────────────────────────────┬──────────────────┐
│ │ TOP PORTS │
│ 🌍 THREE.JS GLOBE │ 👑 Shanghai 47M │
│ │ 2 Singapore 37M│
│ • NASA Blue Marble day texture │ 3 Ningbo 33M │
│ • City lights night texture │ 4 Shenzhen 28M │
│ • Real day/night GLSL shader │ 5 Guangzhou 26M│
│ • Sun position from actual UTC time │ ... │
│ • Drifting cloud layer │ │
│ • Fresnel atmosphere glow │ Updates every │
│ • 30 sonar-ping city pins │ 30s │
│ • 20 arcing trade routes │ │
│ • Flowing particles on routes │ │
└─────────────────────────────────────────┴──────────────────┘
Interactive Controls:
- 🖱️ Drag — rotate the globe freely
- 🖱️ Scroll — zoom in / zoom out
- 🖱️ Click any city — Earth rotates to face it, detail panel slides in
City Detail Panel (click any pin):
┌─────────────────────────────┐
│ SHANGHAI │
│ ───────────────────────── │
│ 320 ships │ 47.0M TEU │
│ $19.7B/day │ 312 depart │
│ │
│ TOP TRADE PARTNERS │
│ Los Angeles ──── $4.2B │
│ Rotterdam ──── $3.8B │
│ Singapore ──── $3.1B │
│ │
│ [▓▓▓▓▒▒▒▓▓▓▓▓▒▒▓▓] 24h │
└─────────────────────────────┘
┌──────────────────────────────────────────────────────────────────────┐
│ TRADE NEWSROOM [FEAR ──●── GREED] │
│ SENTIMENT: NEUTRAL │
├──────────────────────────────────────┬───────────────────────────────┤
│ │ ┌─────────┐ ┌─────────┐ │
│ ■ FEATURED │ │ STORY 2 │ │ STORY 3 │ │
│ │ └─────────┘ └─────────┘ │
│ US-China Tariff Talks Enter │ ┌─────────┐ ┌─────────┐ │
│ Critical Phase as Both Sides │ │ STORY 4 │ │ STORY 5 │ │
│ Signal Flexibility on Steel... │ └─────────┘ └─────────┘ │
│ │ ┌─────────┐ ┌─────────┐ │
│ Reuters · 12m ago ▲5 │ │ STORY 6 │ │ STORY 7 │ │
│ │ └─────────┘ └─────────┘ │
├──────────────────────────────────────┴───────────────────────────────┤
│ TRADE WIRE 11 → 25 │
│ 11 Rotterdam Port Breaks TEU Record · Port News · 2h ago │
│ 12 OPEC+ Extends Production Cuts · Bloomberg · 3h ago │
│ ... │
└──────────────────────────────────────────────────────────────────────┘
| Feature | Description |
|---|---|
| Card Dealing | Articles slide in from alternating directions on every load |
| ● BREAKING | Pulsing red badge for brand-new stories, fades to NEW |
| ▲ Trending | Shows position jump since last refresh (e.g. ▲5 = moved up 5) |
| Sentiment Gauge | Semicircle needle from EXTREME FEAR → EXTREME GREED, animated |
| Keyword Filter | Click any tariff · sanction · WTO · OPEC word to filter |
| Wire Feed | Stories 11–25 auto-refresh every 5 min, smooth reorder animation |
| Stale Warning | Refresh button turns amber after 3 minutes |
┌─────────────────────────────────────────────────────┬────────────────┐
│ [BTC] [ETH] [GOLD] [OIL] [S&P] [EUR/USD] │ FEAR & GREED │
│ │ ╭─────╮ │
│ BTC $107,342.50 +2.14% │ ╱ 62 ╲ │
│ ────────────────────────────── │ ╱ GREED ╲ │
│ │╰──────────╯ │
│ ∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿● ← live dot ├────────────────┤
│ green glowing area fill │ WORLD MARKETS │
│ ───────────────────────────────────────── │ ● NYSE OPEN │
│ │ ● NASDAQ OPEN │
│ [▓][▒][▒][▓][▓][▒][▓][▓][▒][▓] ← candles │ ● London OPEN │
│ 5-minute candlestick chart │ ◦ Tokyo CLOSE │
│ hover for OHLCV tooltip ├────────────────┤
│ scroll to zoom · drag to pan │ TOP MOVERS │
│ │ NVDA +8.2% ∿∿│
├────────────────────────────────────────────────────┤ TSLA -4.1% ∿∿│
│ 142 STORIES · 8 NEW [↻ REFRESH] │ AAPL +1.8% ∿∿│
│ ──────────────────────────────────────────────── ├────────────────┤
│ ● US-China tariff pause boosts markets ↑ │ ● Story... │
│ ● Gold hits $3,300 as dollar weakens ↑ │ ● Story... │
│ ● Fed keeps rates on hold... ↑ │ ● Story... │
│ (auto-scrolling live feed) │ (scrolling) │
└─────────────────────────────────────────────────────┴────────────────┘
Live Price Tickers (top + bottom of screen, always visible):
BTC $107,342 · ETH $3,512 · GOLD $3,301 · OIL $74.80 · EUR/USD 1.0912 · ...
┌──────────────────────────────────────────────────────────┐
│ FRONTEND ONLY │
│ (Zero Backend Required) │
└──────────────────────────────────────────────────────────┘
| Layer | Technology | Purpose |
|---|---|---|
| 3D Globe | Three.js v0.160 | WebGL Earth rendering |
| Globe Controls | OrbitControls (Three.js addon) | Drag / zoom interaction |
| Earth Shading | Custom GLSL ShaderMaterial | Day/night blend with real sun |
| Trading Charts | Lightweight Charts v4.1 | Candlestick + area charts |
| Real-time Prices | Binance WebSocket | BTC / ETH live ticks |
| Forex & Commodities | Finnhub WebSocket | Gold, Oil, EUR/USD, SPX |
| Historical Candles | Alpha Vantage REST | OHLCV candlestick data |
| Trade News | GNews + Newsdata.io | Dual live news feeds |
| Caching | Firebase Realtime DB + localStorage | Rate limit protection |
| Fonts | Google Fonts (Orbitron · Rajdhani · Share Tech Mono) | Terminal aesthetics |
| Hosting | GitHub Pages | Free, instant CDN |
| Language | Vanilla JS (ES Modules) · CSS · HTML | Zero build tools |
COLOR PALETTE
─────────────────────────────────────────────────────
#000000 ████ Universe Black — background
#00e5ff ████ Electric Blue — data / connectivity
#00ff88 ████ Terminal Green — growth / live signals
#ffffff ████ Pure White — information
#ff3355 ████ Alert Red — loss / danger only
#ffaa00 ████ Amber — warnings / uncertainty
#ffd700 ████ Gold — #1 rank / achievements
TYPOGRAPHY
──────────────────────────────────────────────────────
Orbitron → Section titles, prices, logo
Share Tech Mono → Data labels, timestamps, stats
Rajdhani → Body text, headlines, cards
ANIMATION PRINCIPLES
──────────────────────────────────────────────────────
✦ Nothing appears instantly — everything slides, fades, or builds
✦ All live data breathes (100% → 100.5% scale, 4s loop)
✦ Numbers roll like slot machines when updating
✦ Gauges overshoot and spring-settle like physical instruments
✦ Section scroll is a 10-second smooth camera pull
| API | Data | Rate Limit | How Used |
|---|---|---|---|
| 🔶 Binance WS | BTC · ETH real-time trades | Unlimited | WebSocket — ticks every ~100ms |
| 🔷 Finnhub WS | Gold · Oil · EUR/USD · SPX | 60 calls/min | WebSocket + REST quotes |
| 🟢 Alpha Vantage | OHLCV candle history | 25 calls/day | Cached 12h in localStorage |
| 🔵 GNews | Trade news search | 100 calls/day | Cached in Firebase 5min |
| 🟡 Newsdata.io | Business/politics news | 200 calls/day | Cached in Firebase 5min |
| ⚪ Firebase RTDB | API response cache | Free tier | Shared cache, rate-limit buffer |
| 🌍 jsDelivr CDN | NASA Blue Marble textures | Unlimited | Earth day + night textures |
| ⭐ Binance REST | Kline/candlestick data | 1200 req/min | 96-candle 5min chart history |
Tradeorbit/
│
├── 📄 index.html Main HTML — all sections, CDN imports
│
├── 🎨 css/
│ └── style.css ~800 lines — full design system, animations
│
├── ⚙️ js/
│ ├── main.js Orchestrator — boot sequence, nav, scroll
│ ├── config.js API keys, city data, trade routes, symbols
│ ├── intro.js 25-second cinematic opening sequence
│ ├── globe.js Three.js Earth — shader, pins, routes, controls
│ ├── newsroom.js News fetching, sentiment gauge, keyword filter
│ └── trading.js Charts, WebSocket prices, gauges, feed
│
├── 🚫 .nojekyll Disables Jekyll processing on GitHub Pages
└── 📖 README.md You are here
https://vignesh2027.github.io/Tradeorbit/
# Clone the repository
git clone https://github.com/vignesh2027/Tradeorbit.git
cd Tradeorbit
# Serve locally (required for ES modules)
python3 -m http.server 8080
# Open in browser
open http://localhost:8080
⚠️ Must use a local server — ES modules won't load viafile://protocol. Any server works:npx serve .·npx http-server· VS Code Live Server
| Service | Key Location | Free Tier |
|---|---|---|
| Finnhub | js/config.js → CONFIG.finnhub.apiKey |
60 calls/min |
| Alpha Vantage | js/config.js → CONFIG.alphaVantage.apiKey |
25 calls/day |
| GNews | js/config.js → CONFIG.gnews.apiKey |
100 calls/day |
| Newsdata.io | js/config.js → CONFIG.newsdata.apiKey |
200 calls/day |
| Firebase | js/config.js → CONFIG.firebase.* |
Free forever (Spark) |
| Binance | No key needed | Unlimited |
|
🌍 Photorealistic Globe
|
💥 Cinematic Intro
|
|
📈 Trading Floor
|
📰 Smart Newsroom
|
ASIA-PACIFIC EUROPE AMERICAS MIDDLE EAST & AFRICA
───────────────── ──────────────── ───────────────── ──────────────────
Shanghai 47.0M Rotterdam 14.5M Los Angeles 11.5M Dubai 13.5M
Ningbo 33.4M Antwerp 11.1M New York 12.8M Mumbai 7.2M
Shenzhen 28.8M Hamburg 8.7M Long Beach 9.5M Cape Town 1.1M
Guangzhou 26.4M Felixstowe 4.1M Savannah 5.9M Durban 2.3M
Qingdao 25.7M Barcelona 3.5M Vancouver 3.5M
Singapore 37.2M Valencia 5.4M New Orleans 6.3M
Busan 22.1M Piraeus 5.6M
Hong Kong 19.6M
Tianjin 18.3M
Tokyo 14.2M
Klang 13.2M
Colombo 5.8M
Sydney 2.7M
(Units: Million TEU/year)
╭─────────────────────────────────────────────────────╮
│ TOP GLOBAL SHIPPING CORRIDORS │
╰─────────────────────────────────────────────────────╯
Shanghai ══════════════════════════════════ Los Angeles ●●●●● weight 5
Shanghai ══════════════════════════════════ Rotterdam ●●●● weight 4.2
Shanghai ══════════════════════════════════ Long Beach ●●●●● weight 4.5
Singapore ══════════════════════════════════ Dubai ●●●● weight 3.5
Tokyo ══════════════════════════════════════ Los Angeles ●●●● weight 3.5
Rotterdam ══════════════════════════════════ New York ●●● weight 3.0
... 20 total routes, thickness + brightness = trade weight
| Metric | Value |
|---|---|
| Initial Load | < 3s (CDN assets) |
| Globe FPS | 60fps (WebGL) |
| Intro Duration | 25 seconds |
| Particle Count | ~600 |
| Trade Route Particles | ~60 flowing dots |
| Bundle Size | ~0 KB (no build, all CDN) |
| Zero dependencies to install | ✅ |
- Vessel tracking (MarineTraffic API integration)
- Port congestion heat maps
- Commodity price correlation matrix
- Geopolitical risk overlay on globe
- Historical trade flow time-lapse
- Custom alert system (price thresholds, keyword alerts)
- Mobile / touch controls for globe
MIT License — use freely, credit appreciated.
· · · · · · · · · · · · · · · · ·
· ·
· T R A D E O R B I T · vignesh2027 ·
· ·
· · · · · · · · · · · · · · · · ·
Built with Three.js · Vanilla JS · Pure CSS · Zero Frameworks
Every price is live. Every headline is real. Every ship is actually there.