i HN. I spent a few weekends building this : a first-person 3D exploration of the Bitcoin blockchain.
Each block is a physical cube, sized logarithmically by weight, placed chronologically. You walk through the chain in FPS view from the Genesis block to the tip. Live data via mempool.space's public API. New blocks trigger a chime + ripple effect in real time as the network confirms them.
A few details I'm proud of:
- The "next block" is rendered as a ghost cube at the tip of the chain, with projected fees from the mempool fee estimator
- Notable blocks (Pizza Day, halvings, SegWit/Taproot activation) get dedicated colors and labels
- Permalinks per block (?block=N) and per tx (?tx=hash)
- A 30s autopilot tour for first-time visitors who don't want to walk
- Mobile users get a 68 KB landing page instead of downloading 250 KB of Three.js they can't use the FPS exploration needs keyboard + mouse
Stack: React 19 + Three.js + Vite, Tone.js for audio, no backend, deployed on Vercel. App.jsx is ~1700 lines because the Three.js useEffect can't be split without breaking scene closures, but everything else (data hooks, UI components, constants, formatters) is delegated.
Happy to answer questions about the implementation or hear feedback on what's missing, broken, or confusing.
i HN. I spent a few weekends building this : a first-person 3D exploration of the Bitcoin blockchain.
Each block is a physical cube, sized logarithmically by weight, placed chronologically. You walk through the chain in FPS view from the Genesis block to the tip. Live data via mempool.space's public API. New blocks trigger a chime + ripple effect in real time as the network confirms them.
A few details I'm proud of:
- The "next block" is rendered as a ghost cube at the tip of the chain, with projected fees from the mempool fee estimator - Notable blocks (Pizza Day, halvings, SegWit/Taproot activation) get dedicated colors and labels - Permalinks per block (?block=N) and per tx (?tx=hash) - A 30s autopilot tour for first-time visitors who don't want to walk - Mobile users get a 68 KB landing page instead of downloading 250 KB of Three.js they can't use the FPS exploration needs keyboard + mouse
Stack: React 19 + Three.js + Vite, Tone.js for audio, no backend, deployed on Vercel. App.jsx is ~1700 lines because the Three.js useEffect can't be split without breaking scene closures, but everything else (data hooks, UI components, constants, formatters) is delegated.
Happy to answer questions about the implementation or hear feedback on what's missing, broken, or confusing.
Ver cool! Except FYI that it started crashing my browser before I had to run away.
My specs:
- Brave browser
- Tons of tabs open
- Macbook Pro Intel chip