Itiano is an interactive, web-based virtual piano application designed to function as a typing tutor for learning songs. By combining the gamified mechanics of a typing tutor (like Keybr or 10fastfingers) with a modern 3D piano interface, Itiano makes learning melodies accessible, engaging, and fun right from your browser—no physical piano required!
- 🎮 Interactive 3D Piano: A beautiful, fully interactive 3D piano built with
@react-three/fiberthat highlights keys as you play. - 🎵 Real-time Audio: High-quality audio synthesis powered by
Tone.jsfor zero-latency, realistic piano sounds. - 🎹 Typing Tutor Mechanics: Guides you through song sequences note-by-note.
- ✅ Instant Feedback: Correct keystrokes advance the song, while incorrect ones provide visual error feedback.
- 🎧 Multi-Input Support: Play using your computer keyboard or by clicking the 3D keys with your mouse.
- Frontend Framework: React
- Build Tool: Vite
- 3D Rendering: Three.js + @react-three/fiber + @react-three/drei
- Audio Engine: Tone.js
- Icons: Lucide React
Follow these steps to set up the project locally on your machine.
Make sure you have Node.js installed on your machine.
-
Clone the repository:
git clone https://github.com/Harmann60/Itiano.git cd Itiano -
Install dependencies:
npm install -
Run the development server:
npm run dev -
Open your browser: Navigate to
http://localhost:5173/
Use your computer keyboard to play the piano!
- White Keys: Home Row (
A, S, D, F, G, H, J, K, L, ;) - Black Keys: Top Row (
W, E, T, Y, U, O, P)
Alternatively, you can use your mouse to click on the 3D keys directly!
Contributions, issues, and feature requests are welcome! Feel free to check the issues page if you want to contribute.
Made with ❤️ and code.