I built Money Visualizer, a free interactive 3D web app that transforms any currency amount into life-sized, physical bill stacks you can rotate, zoom, and explore in real-time.
What it does:
Pick two of 82 supported currencies, enter any amount, and watch your money materialize as interactive 3D stacks of real-sized banknotes. Every bill uses actual dimensions from central bank specifications (Bureau of Engraving and Printing, ECB, Bank of Japan, etc.). Exchange rates are live from the European Central Bank, refreshed every 30 seconds.
Tech Stack:
Three.js + React Three Fiber for 3D rendering
Drei utilities for cameras and materials
Next.js 16 App Router (full-stack)
Vercel Edge Functions for live exchange rate API fallbacks
Would love to hear feedback from the community! Suggestions about the Three.js implementation, performance optimization, or WebGL/WebGPU rendering are welcome.
I have a course about data visualization. And in one of the topics we explore the visual size of 1 bill, 1 000 bills, 1 000 000 bills and 1 000 000 000 bills. The bills are shown either as as a column of bills or as a cube of bills.
What makes it feel real is that it is in VR, so a person could compare his/her size with the height of the money column or cube. This could never be felt that real if you look at 2D screen. If you do not have VR mode, I’d suggest to add it. Attached are short videos of columns and cubes recorded from a VR headset.
Surprisingly, columns of 1 million and 1 billion bills look the same, they just vanish into the sky. But if money is packed, then the billion fits in a 10\times10\times10 cube.
Hey I found the issue, in WebGL some gpu’s support up to 16 textures. Most of the environments had pbr textures for metalness, roughness, etc., and that was making the scenes not render. I’ll fix it today or tomorrow, depending on how complicated it is.
