Welcome to Shinobi Arts, an interactive web application that uses your webcam and advanced AI to track your hand gestures and weave famous Jutsu from the world of Naruto!
Powered by Google's MediaPipe, React, and TypeScript, the app dynamically maps visual effects and synthesizes procedural audio in real-time based on your hand signs.
- 🔒 Secure Portal: A highly-animated "Nezer Shinobi App" login screen featuring WebGL fluid splash cursors and ninja smoke-poof transition effects.
- 🖐️ Real-Time Hand Tracking: Uses
@mediapipe/handsto detect complex hand seals. - 🔥 Tiger Hand Seal Detection: Perform the one-handed Tiger seal to cast the Fireball Jutsu right at your fingertips.
- ⚡ Rasengan & Chidori: Hold your palms open to charge up chakra and unleash powerful attacks based on which hand you use.
- 🔊 Procedural Web Audio: Real-time synthesized audio (wind, crackling electricity, deep rumbles) generated via the Web Audio API without needing external sound files.
- 📸 Snapshot Capture: Take high-quality screenshots of your Jutsu with the click of a button!
- Frontend: React 18, Vite
- Styling: Tailwind CSS
- AI/ML: MediaPipe (Camera Utils, Drawing Utils, Hands)
- Deployment: Ready for Vercel
npm installDue to licensing and size constraints, the VFX video files are not included in the repository. You will need to add three videos to the public/assets/ directory:
public/assets/naruto.mp4(Rasengan effect)public/assets/sasuke.mp4(Chidori effect)public/assets/fireball.mp4(Fireball Jutsu effect)
Pro tip: You can find great VFX assets on YouTube or Fiverr. Just download them as MP4 and place them in the assets folder!
npm run devThis project is built with Vite and is perfectly configured for Vercel deployment out of the box.
- Push your code to GitHub.
- Import the repository into Vercel.
- Vercel will automatically detect Vite and configure the build settings (
npm run build, output folder:dist). - Hit Deploy and you're live!