vtuber-js ✨

Turns your face into an anime avatar right in the browser. Using real-time face detection from your webcam to brings your expressions to life. Runs entirely in your browser (100% client-side) with facial landmark detection.

Please remove your glasses for better experience.

🚀 Live Demo

https://sixsat.github.io/vtuber-js/

1. click the video button on the bottom right
2. allow webcam access
3. enjoy!

🛠️ Getting Started

Requirements

• Node.js v22+
• Chrome browser

git clone https://github.com/sixsat/vtuber-js.git
cd vtuber-js
npm install
npm run dev

visit http://localhost:5173/vtuber-js/

💻 Technologies Used

• MediaPipe Face Detector
• TensorFlow JS
• Three JS
• VRoidStudio 3D Model
• Vite
• React

📁 Project Structure

vtuber-js/
├── eslint.config.js
├── index.html
├── package.json
├── public/
│   ├── models/
│   ├── ...
├── README.md
├── src/
│   ├── App.jsx
│   ├── components/
│   │   ├── ...
│   ├── hooks/
│   │   ├── ...
│   ├── index.css
│   ├── main.jsx
│   └── utils/
│       ├── ...
└── vite.config.js

🔮 Future Improvements

• 3D models selection
• Full-body motion capture
• Real time voice changer

🤝 Team member

• https://github.com/STaninnat (https://www.boot.dev/u/powderhumblegod)
• https://github.com/derflohwalzer (https://www.boot.dev/u/studiousarmy23)
• https://github.com/sixsat (https://www.boot.dev/u/widethicc69)