A real-time hand tracking application that allows you to draw in the air using hand gestures. Built with Next.js, React, and MediaPipe for advanced hand detection and tracking.
- Real-time Hand Tracking: Uses MediaPipe's advanced hand detection to track hand movements with high accuracy
- Air Drawing: Draw in 3D space using your index finger with visual trail effects
- Gesture Recognition: Detects different hand gestures for drawing controls
- Full Screen Canvas: Maximizes screen real estate for an immersive drawing experience
- Responsive Design: Works on both desktop and mobile devices with orientation support
- Visual Feedback: Cyan-colored hand skeleton with glowing effects and highlighted index finger
- Frontend: Next.js 16.2.1, React 19.2.4, TypeScript
- Styling: Tailwind CSS 4
- Hand Tracking: MediaPipe Hands & Camera Utils
- Canvas Rendering: HTML5 Canvas with 2D context
- Node.js 18+
- Modern browser with camera access
- WebRTC compatible browser (Chrome, Firefox, Safari)
- Clone the repository:
git clone <repository-url>
cd hand-weld- Install dependencies:
npm install- Run the development server:
npm run dev-
Open http://localhost:3000 in your browser
-
Allow camera access when prompted
- Camera Setup: The app will automatically request camera permissions
- Hand Detection: Show your hand to the camera - the system will detect and track it
- Drawing: Use your index finger to draw in the air - the trail will appear on screen
- Visual Feedback:
- Cyan lines show hand skeleton
- Yellow dot highlights your index finger
- Glowing effects enhance the visual experience
src/
├── app/
│ ├── page.tsx # Main application page
│ ├── layout.tsx # Root layout
│ └── globals.css # Global styles
├── components/
│ ├── HandTracker.tsx # Main hand tracking component
│ ├── Canvas.tsx # Canvas rendering component
│ └── UIControls.tsx # User interface controls
├── hooks/
│ └── useHandTracking.ts # Hand tracking logic
└── lib/
├── draw.ts # Drawing utilities
└── gesture/ # Gesture recognition logic
- Initializes MediaPipe hands detection
- Manages camera setup and video processing
- Handles real-time hand landmark tracking
- Provides canvas drawing functionality
- 21-point hand skeleton tracking
- Real-time rendering with shadow effects
- Index finger highlighting for drawing focus
- Mirrored display for natural interaction
- Trail-based drawing following index finger
- Gesture-based drawing state management
- Smooth trail rendering with visual effects
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint- Next.js Config:
next.config.ts - TypeScript Config:
tsconfig.json - Tailwind Config:
tailwind.config.js - ESLint Config:
eslint.config.mjs
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
This project is private and proprietary.
- Ensure camera permissions are granted
- Check if other applications are using the camera
- Try refreshing the page and granting permissions again
- Ensure good lighting conditions
- Keep your hand clearly visible in the camera frame
- Move slowly for better tracking accuracy
- Close unnecessary browser tabs
- Ensure your device meets the minimum requirements
- Try reducing the window size for better performance