Transform your Git commit history into a beautiful symphony with 3D visualizations
GitSymphony combines three incompatible technologies into one harmonious experience:
- Git (version control) + Web Audio API (music generation) + Three.js (3D graphics)
- Real git integration - Analyzes actual repositories via backend API
- Multiple instruments - Different file types play different instruments:
- JavaScript/TypeScript → Synth
- Python/Java → Piano
- Go/Rust → Bass
- CSS/HTML/Markdown → Pluck
- Intelligent note mapping:
- More additions → Higher pitch
- Total changes → Note duration
- Big commits (>100 changes) → Play chords
- Pentatonic scale - Always sounds musical
- Commit galaxy - Each commit is a sphere in 3D space
- Color coding:
- Red → Large commits (>100 changes)
- Orange → Medium commits (>50 changes)
- Cyan → Addition-heavy commits
- Light cyan → Small changes
- Spiral layout - Commits arranged in a time-based spiral
- Real-time highlighting - Active commit pulses and scales up
- Rotating camera - Smooth orbital view
- 🔍 Analyze any local git repository or GitHub URL
▶️ Play/Stop your git symphony- 📊 Real-time sync between audio and visual highlighting
- 🌓 Dark/Light mode toggle
- 🎨 Interactive 3D - Drag to rotate, scroll to zoom
# Clone the repository
git clone https://github.com/KHemanthRaju/gitsymphony.git
cd gitsymphony
# Install dependencies
npm install
# Run both frontend and backend
npm run dev:allOpen http://localhost:5174 in your browser and start analyzing repositories!
# Terminal 1 - Backend API (port 3001)
npm run server
# Terminal 2 - Frontend (port 5173)
npm run dev- Enter
.to analyze the current directory - Or paste any public GitHub URL:
https://github.com/user/repo - Click Analyze to load commits
- Click Play to hear your git symphony!
- Analyze: Backend API uses
simple-gitto parse repository history - Map: Converts commit data (additions, deletions, file types) to musical parameters
- Visualize: Creates 3D representation using Three.js
- Play: Generates audio using Tone.js with multiple instruments and highlights commits in real-time
- Pitch: Based on lines added (more additions = higher notes)
- Duration: Based on total changes (more changes = longer notes)
- Scale: Pentatonic scale for pleasant harmonies
- Backend API to parse real git repos
- 3D visualization with Three.js
- Multiple instrument tracks based on file types
- Real-time commit highlighting
- Chord generation for large commits
- Color-coded commit visualization
- Export to MIDI/MP3
- Live mode with git hooks (Kiro integration)
- Branch visualization
- Tempo control
- Multiple repo comparison
- Spec-driven development documentation
- Vite - Lightning-fast build tool
- Tone.js - Web Audio API framework for music generation
- Three.js - 3D graphics and visualization
- Tailwind CSS - Utility-first styling
- shadcn/ui - Beautiful UI components
- Vanilla JavaScript - No framework overhead
- Node.js + Express - REST API server
- simple-git - Git repository parsing
- CORS - Cross-origin support
- Kiro AI - AI-powered development assistant
- Playwright - Browser automation for screenshots
- FFmpeg - Video generation from screenshots
Watch GitSymphony in action:
https://github.com/KHemanthRaju/gitsymphony/raw/main/screenshots/gitsymphony-demo.mp4
Incompatible Technologies Successfully Combined:
- 🔧 Git - Version control system
- 🎵 Web Audio API - Real-time music generation
- 🌌 Three.js - 3D graphics rendering
This project was built with extensive use of Kiro AI's advanced features:
- ✅ Vibe Coding - Rapid prototyping and iterative development
- ✅ Steering Documents - Custom guidelines for music theory, project structure, and git analysis
- ✅ Agent Hooks - Automated testing and code quality checks on file save
- ✅ Spec-Driven Development - Structured feature planning with requirements, design, and tasks
- ✅ Context Management - Efficient use of #File, #Folder, and #Codebase references
📖 See KIRO_USAGE.md for detailed documentation of Kiro integration.
- 🌐 Repository: github.com/KHemanthRaju/gitsymphony
- 📚 Documentation: Quick Start Guide | Deployment Guide
- 🎬 Demo Video: screenshots/gitsymphony-demo.mp4
- QUICKSTART.md - Get started in 5 minutes
- KIRO_USAGE.md - How Kiro AI was used to build this project
- DEPLOYMENT.md - Deploy to Vercel and Railway
- screenshots/README.md - Media assets documentation
Contributions are welcome! Feel free to:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Kiro AI Team - For creating an amazing AI-powered development tool
- Kiroween 2025 - For hosting this creative hackathon
- Tone.js & Three.js Communities - For excellent documentation and examples
Built with ❤️ and Kiro AI for Kiroween 2025 🎃
MIT License - See LICENSE for details