Visualizing Currency at Scale: Building a 3D Money Sandbox with Three.js

What does a million dollars actually look like? I built a 3D tool to find out.

Alp Yalay developed Money Visualiser to transform abstract financial data into physical 3D stacks. The system renders over 300,000 individual bills at 60fps using exact central bank specifications for 82 different banknotes.

Why This Matters

Spreadsheets are effective for accounting but fail to communicate the physical scale of currency, making it difficult for users to conceptualize the difference between large denominations. Building a high-performance visualization tool requires moving beyond standard DOM elements to WebGL and React Three Fiber to maintain 60fps while managing hundreds of thousands of physics-based objects.

Key Insights

• High-performance rendering of 300,000+ individual bills at 60fps using React Three Fiber and Three.js (2026).
• Currency accuracy achieved by pulling exact dimensions for 82 banknotes from central bank specifications.
• Implementation of bank-standard ‘straps’ and ‘bricks’ logic for accurate currency stacking physics.
• Data resilience ensured by a 30-second exchange rate refresh cycle supported by a 5-tier fallback system.
• Scalable environment design using an ‘Aircraft Carrier’ scene to prevent mesh clipping during trillion-dollar visualizations.

Practical Applications

• Use case: Financial literacy platforms using Next.js 16 and R3F to provide spatial context for national debt or corporate earnings. Pitfall: Using standard mesh components without optimization, leading to browser memory exhaustion at high bill counts.
• Use case: Real-time currency exchange dashboards with 3D physical representations for better UX. Pitfall: Relying on a single API source for exchange rates, which can cause visualization failure during provider downtime.

References:

• https://dev.to/khazp/what-does-a-million-dollars-actually-look-like-i-built-a-3d-tool-to-find-out-hef
• http://moneyvisualiser.com