Kaspa BlockDAG Visualizer

A real-time, interactive 3D visualization of the Kaspa BlockDAG network. Created for the Build at Internet Speed Hackathon 2026.

🚀 Features

• Live Simulation: Visualizes block creation in real-time (approx. 1-10 BPS).
• Real Network Sync: Fetches the current block height from Kaspa Mainnet (api.kaspa.org) to initialize the simulation.
• 3D Interactive Graph:
  • Manual Control: Full orbit, pan, and zoom controls.
  • Block Details: Click on any block to inspect its Hash, Parents, Difficulty, and Timestamp.
• Audio Feedback: Generative sound effects for block events (New Block, Gold Block, Red Block).
• High Performance: Optimized with React Three Fiber, Instanced Mesh concepts, and efficient post-processing (Bloom, Vignette).

🛠 Tech Stack

• Framework: React + TypeScript + Vite
• 3D Engine: Three.js + React Three Fiber (@react-three/fiber)
• Helpers: @react-three/drei
• Effects: @react-three/postprocessing
• Data: Kaspa REST API

🏃‍♂️ How to Run

• Live Demo: https://kaspa-visualizer-eight.vercel.app/

Development

1. Clone the repository
2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open http://localhost:5173 in your browser.

🎮 Controls

• Left Click + Drag: Rotate Camera
• Right Click + Drag: Pan Camera
• Scroll: Zoom In/Out
• Click Block: Select block to view details
• Click Background: Deselect block

🏆 Hackathon Details

This project demonstrates the speed and structure of the Kaspa BlockDAG. Unlike traditional blockchains, Kaspa's DAG structure allows for parallel block creation, which is visualized here by the multiple parents and branching structure.

---

📦 Developer & Submission Guide

(This section is for the project maintainer to prepare the hackathon submission)

1. Deployment (Vercel)

1. Push code to GitHub.

2. Import project into Vercel.

3. Settings:

   • Framework: Vite
   • Command: npm run build
   • Output: dist 4.64→4. Get your production URL (e.g., https://kaspa-visualizer-eight.vercel.app/). 65→ 66→ Note: A vercel.json file is included to handle API CORS issues automatically. 67→ 68→## 2. Demo Video Script (1-2 mins)

4. Intro (10s): Start on the "INITIALIZE SIMULATION" screen. Click to start. Hear the sound.

5. Concept (20s): "This connects to Kaspa Mainnet in real-time."

6. Features (20s): Show manual rotation, zoom, and clicking a block to see the Inspector panel.

7. Tech (10s): Mention React Three Fiber & Instanced Mesh.

3. DoraHacks Submission Fields

• Project Name: Kaspa Visualizer - Live BlockDAG Simulation
• Description:

  A cinematic, real-time 3D visualization of the Kaspa BlockDAG network. It connects to the Kaspa Mainnet to synchronize block height and simulates the parallel creation of blocks using a high-performance WebGL engine. Features interactive inspection, audio feedback, and manual camera control.

• Tags: BlockDAG, Real-time, Visualization, React Three Fiber, Kaspa.

🤖 AI Usage Disclosure

This project was developed with the assistance of AI tools (Trae AI) for:

• Boilerplate code generation (React + Vite setup)
• Three.js geometry optimization strategies
• Refactoring for performance (InstancedMesh implementation guidance)

All logic, design decisions, and final code verification were conducted by the human developer.

---

Built with ❤️ for the Kaspa Community.