Transaction Plinko turns the blockchain into a visual experience. Instead of staring at Etherscan, watch as real-time pending transactions fall like rain. Your transaction might be a ball falling down the Plinko board right now!
It’s a mesmerizing way to feel the pulse of the network—each ball is a live event broadcasting across the globe, visualized with physics, neon lights, and satisfying sound.
- Live Blockchain Data: Powered by WebSocket integration with Ethereum Mainnet via viem.
- Physics Simulation: Realistic 2D physics engine using Matter.js.
- Immersive Audio: Casino-inspired sound effects for ball collisions and absorptions using the Web Audio API.
- High-Fidelity UI: Glassmorphism aesthetic, neon glow effects, and smooth Framer Motion animations.
- Performance Optimized: Intelligent background throttling to manage resource usage when the tab is inactive.
- Frontend Framework: React 18, TypeScript, Vite
- Styling: TailwindCSS, clsx, tailwind-merge
- Physics Engine: Matter.js
- Blockchain Interface: viem (WebSocket)
- Animation: Framer Motion
- Icons: Lucide React
- Node.js (v18 or higher)
- An Ethereum RPC WebSocket URL (e.g., from Alchemy, Infura, or QuickNode).
-
Clone the repository
git clone https://github.com/AnInsaneJimJam/transaction-plinko.git cd transaction-plinko -
Install dependencies
npm install
-
Configure Environment Create a
.envfile in the root directory and add your Alchemy API Key:VITE_ALCHEMY_KEY=your_alchemy_api_key_here
-
Run Development Server
npm run dev
The application will be available at
http://localhost:5173.
To create a production-ready build:
npm run buildThis project uses client-side API keys. While keys are stored in environment variables, they are exposed in the build. For public deployments, ensure your RPC provider keys are restricted by domain (CORS) or proxy requests through a backend.
This project is licensed under the MIT License. See the LICENSE file for details.