1. Core Philosophy
DeFi trading is often crowded with complex tables, orderbooks, and confusing charts that fail to present a quick overview of market sentiment. We visualize these raw data matrices as **live physical bubbles** that float and collide.
By transforming tabular price changes into fluid bubble maps, traders can immediately discern market direction, identifying dominant gainers and heavy sell-offs at a single glance.
2. Bubble Sizes and Colors
Each circle represents an active token trade volume pool. The map behaves dynamically based on parameters retrieved from our analytics endpoint:
Bubble Size (Scale)
The size of each bubble corresponds to the magnitude of its percentage change within the selected timeframe. The larger the bubble, the more volatile the price action has been (either positive or negative).
Bubble Color
The color of the bubble represents price trend. **Neon Green** indicates positive price change (the token has risen). **Neon Red** indicates negative price change (the token has declined).
3. Navigation & Sorting
The Bubble Map provides a streamlined navigation bar at the top-center allowing users to sort bubbles by three distinct time intervals:
- 1H (1 Hour): Short-term momentum analysis.
- 6H (6 Hours): Mid-term momentum analysis.
- 24H (24 Hours): Daily market overview.
At the bottom of the map, a floating pagination bar allows users to page through the ranking index. Each page dynamically pre-loads and caches 50 tokens at a time for optimal browser rendering performance.
4. Token Dialog & Charts
Clicking on any bubble pauses physics updates and summons the Token Detail Panel. Within this glassmorphic details overlay, users can explore:
- Social links: Direct access to the token's Website, Telegram, and Twitter/X feeds.
- Financial Stats: Price, Fully Diluted Valuation (FDV), 24-hour volume, and active liquidity in ETH.
- DexScreener Embeds: View live, interactive charting indicators directly inside the app, or click the link to browse details on DEX Screener.
5. Simulated Swap Widget
To prepare traders for direct execution, each token details view embeds a state-of-the-art Web3 swap interface:
The swap widget utilizes active Web3 RPC connections via RainbowKit and wagmi to monitor user balances:
6. Market Heatmap
The Market Heatmap provides a macroscopic, squarified treemap view of the entire crypto landscape. It visualizes the top tokens by allocating space based on their Market Capitalization (Dominance).
Live Updates & Perfect Scaling
The Heatmap dynamically fetches data every 15 seconds. When market data fluctuates, the blocks intelligently resize and swap positions with smooth CSS animations. The typography utilizes advanced CSS Container Queries to perfectly scale text according to the exact dimensions of each block, ensuring maximum readability without overflow.
7. Bubble AI Bot & 1-Click Swap
The AI Bot is an intelligent trading assistant floating at the bottom-left of your screen. It enables you to instantly query token information, allocations, and holder statistics using natural language or quick prompt buttons.
1-Click Fast Trading (Buy & Sell)
Built natively into the chat interface, the Quick Swap widget enables instant execution without ever leaving the page.
8. Upcoming Updates & Future Roadmap
We are actively developing and refining the Bubble Ai Agent to integrate more features:
Phase 1: Deep Protocol Integrations
Move beyond simulation. Connect with decentralized liquidity providers to execute actual trades directly from the interface.
Phase 2: Custom User Watchlists
Allow users to bookmark favorite tokens and create custom personal bubble maps to monitor specialized portfolios.
Phase 3: Multi-Chain Expansion
Bring our signature physical bubble map visualization to other leading Layer 2 networks.