Neon Exchange

• 

  The stock city visual

Inspiration

What it does

Project Story The Inspiration: Finance as a Living Landscape The Neon Exchange was born from a simple question: What if the stock market wasn't a spreadsheet, but a city? We wanted to take the raw, chaotic energy of high-frequency trading and turn it into a physical, explorable landscape. Inspired by classic cyberpunk aesthetics and modern quant-trading dashboards, we envisioned a world where volatility isn't just a number—it’s a physical storm rolling over the "Bank Towers" district.

The Journey: How We Built It Building the Neon Exchange required a marriage between high-performance web graphics and cutting-edge Generative AI.

The Rendering Engine: We built a custom HTML5 Canvas engine from the ground up to handle 10,000+ city tiles and dynamic NPCs with sub-millisecond frame times. The AI Brain: At the heart of the city is an orchestrator powered by Google’s Agent Development Kit (ADK). We designed 5 specialized agents (Market Analyst, News Analyst, Correlation Agent, Scenario Generator, and World Renderer) that work in parallel to synthesize Finnhub market data into a cohesive "World State." The Feedback Loop: We integrated gameplay mechanics like "Credit Scores" and "District Discovery" to reward users for gathering intelligence. To quantify market momentum within our city, we use a weighted sentiment formula: $$ S_{district} = \sum_{i=1}^{n} (w_i \cdot \Delta P_i) + \alpha \cdot N_{sentiment} $$ where $\Delta P_i$ is the price change of ticker $i$, $w_i$ is its market weight, and $N_{sentiment}$ is the NLP-derived news sentiment from the Gemini agents.

Learnings and Challenges The greatest challenge was Consistency. Synchronizing five different LLM agents to agree on the "vibe" of a district required rigorous prompt engineering and structured JSON outputs via Google GenAI. We learned how to build robust fallbacks—implementing a "Diagnostic Mode" that ensures the city stays alive even when external APIs are under heavy load. We also mastered the art of "Environmental Data Visualization," where UI elements and game world effects are perfectly synced.

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for Neon Exchange

Built With

• and-active-missions.-framer-motion:-powering-all-high-end-ui-transitions-and-micro-animations.-tailwind-css:-for-our-curated
• antigravity
• fastapi
• finnhub-api
• framer-motion
• google-agent-development-kit-(adk)
• google-gemini-api
• google-genai-sdk
• html5
• next.js
• player-identity
• pydantic
• python
• react
• sse-starlette
• tailwind-css
• typescript
• uvicorn
• websockets
• zustand