Learn to spell your name in American Sign Language with real-time AI-powered hand tracking
- Personalized Learning: Enter your name and learn to spell it letter by letter
- Real-time Feedback: Instant AI-powered gesture recognition and feedback
- Visual Progress Tracking: See your progress through each letter of your name
- Hand Stability Detection: AI monitors hand steadiness for better accuracy
- Computer Vision: Real-time hand tracking using MediaPipe Hands API
- Finger State Detection: Precise open/closed finger state recognition
- Visual Hand Tracking: Color-coded landmarks and connections (green=open, red=closed)
- Smart Recognition: Circle-based detection with stability validation
- Modern Design: Clean, responsive interface with smooth animations
- Visual Guides: Clear hand positioning guides and target indicators
- Real-time Feedback: Color-coded status indicators and progress bars
- Full Screen Mode: YouTube-style full screen button for immersive experience
- Accessibility: High contrast design and clear visual cues
- ASL Alphabet Guide: Complete reference with visual hand sign images
- Step-by-Step Instructions: Clear guidance for each letter
- Practice Mode: Repeat letters until you master them
- Achievement System: Celebrate completion with congratulations screen
Experience the app right now:
What you'll experience:
- ✨ Real-time hand gesture recognition
- 🤖 AI-powered feedback and analysis
- 📱 Responsive design that works on all devices
- 🎯 Interactive learning with visual guides
- 🏆 Progress tracking and completion celebration
- ⚡ Optimized performance with clean, efficient code
- Next.js 15.4.5 - React framework with App Router
- React 19 - Latest React with concurrent features
- TypeScript 5 - Type-safe development
- Tailwind CSS - Utility-first CSS framework
- Responsive Design - Mobile-first approach
- Smooth Animations - CSS transitions and transforms
- MediaPipe Hands - Real-time hand tracking API
- Custom Gesture Recognition - Advanced ASL pattern matching
- 3D Coordinate Analysis - Precise finger position detection
- Optimized Performance - Clean, efficient codebase
- ESLint - Code quality and consistency
- PostCSS - CSS processing
- Vercel - Deployment and hosting
- Node.js 18+
- npm or yarn
- Modern web browser with camera access
-
Clone the repository
git clone https://github.com/davidagustin/spell-your-name.git cd spell-your-name -
Install dependencies
npm install # or yarn install -
Start the development server
npm run dev # or yarn dev -
Open your browser
Navigate to http://localhost:3000
No environment variables required! The app works out of the box with:
- Camera permissions (granted by user)
- Internet connection (for MediaPipe CDN)
- Enter Your Name: Type your name in the input field
- Grant Camera Access: Allow camera permissions when prompted
- Position Your Hand: Place your hand in the center circle
- Follow the Guide: Use the ASL alphabet reference for each letter
- Practice & Improve: Get real-time AI feedback and tips
- Letter by Letter: Learn to spell your name one letter at a time
- Visual Feedback: See real-time hand tracking and gesture recognition
- AI Analysis: Receive detailed feedback on your hand positioning
- Progress Tracking: Monitor your progress through each letter
- Completion: Celebrate when you successfully spell your entire name!
- 📹 Good Lighting: Ensure your hand is well-lit
- 🖐️ Clear Background: Use a plain background for better detection
- 📏 Proper Distance: Keep your hand 12-18 inches from the camera
- 🎯 Stay Steady: Hold your hand still for better recognition
- 🔄 Practice: Repeat letters until you feel confident
spell-your-name/
├── app/ # Next.js App Router
│ ├── components/ # React components
│ │ ├── CameraComponent.tsx # Main camera & AI logic
│ │ ├── AlphabetGuide.tsx # ASL alphabet reference
│ │ └── NameInput.tsx # Name input component
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Main page
├── public/ # Static assets
│ └── signs/ # ASL hand sign images (A-Z)
└── package.json # Dependencies & scripts
- Real-time hand tracking with MediaPipe
- AI-powered gesture recognition
- Visual feedback and progress indicators
- Hand stability detection
- Complete ASL alphabet reference
- Visual hand sign images
- Interactive letter highlighting
- Educational descriptions
- MediaPipe Integration: Advanced hand landmark detection
- 21-Point Tracking: Precise finger and joint positioning
- 3D Analysis: Depth-aware gesture recognition
- Stability Monitoring: Hand movement detection
- Custom Algorithms: Tailored ASL pattern matching
- Real-time Analysis: Instant gesture evaluation
- Confidence Scoring: Accuracy measurement
- Personalized Feedback: Specific improvement tips
- Hand Positioning Guides: Clear visual indicators
- Progress Tracking: Real-time completion status
- Color-coded Feedback: Intuitive status indicators
- Responsive Design: Works on all screen sizes
- Connect Repository: Link your GitHub repo to Vercel
- Automatic Deployment: Push to main branch for auto-deploy
- Custom Domain: Add your domain (optional)
- Netlify: Compatible with Next.js
- Railway: Easy deployment with environment variables
- AWS Amplify: Enterprise-grade hosting
We welcome contributions! Here's how you can help:
- 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
- 🎨 UI/UX improvements
- 🤖 AI algorithm enhancements
- 📱 Mobile optimization
- 🧹 Code optimization and cleanup
- 🌐 Internationalization
- 🧪 Testing and bug fixes
- 📚 Documentation improvements
This project is licensed under the MIT License - see the LICENSE file for details.
- MediaPipe Team - For the amazing hand tracking technology
- Next.js Team - For the excellent React framework
- Tailwind CSS - For the beautiful utility-first CSS
- ASL Community - For preserving and sharing sign language knowledge
- Live Demo: https://spell-your-name.vercel.app/
- GitHub: https://github.com/davidagustin/spell-your-name
- Issues: GitHub Issues
Made with ❤️ by David Agustin
⭐ Star this repository if you found it helpful!