FaceQuest Tailwind Templates

Facequest

Control the game with your face! Use real-time facial expression detection to complete challenges and progress through levels. Built with React, Tailwind CSS and MediaPipe FaceMesh. 🚀

#expression-detection #face-recognition #facemesh #reactjs #tailwindcss #vercel #vite
Demo Download

🎭 FaceQuest - The Ultimate Facial Expression Game!

Welcome to FaceQuest, an interactive and engaging game where your facial expressions control the gameplay! Test your ability to match various expressions, level up, and challenge yourself in this AI-powered experience.

🚀 Features

  • 🎮 Expression-Based Gameplay – Perform specific facial expressions to progress through levels.
  • 🧠 AI-Powered Detection – Uses MediaPipe FaceMesh for real-time face tracking.
  • 📈 10+ Levels of Increasing Difficulty – Each level presents a new challenge.
  • 🔊 Retro Sound Effects – Immerse yourself in a fun, arcade-style experience.
  • 🎨 Pixel-Art Inspired UI – Nostalgic visuals with a modern touch.

🛠️ Tech Stack

  • Frontend: React.js, Tailwind CSS, Framer Motion
  • AI Models: MediaPipe FaceMesh
  • State Management: React Hooks
  • Audio Integration: useSound Hook

🎯 How to Play

  1. Click the Start Game button.
  2. Observe the target expression displayed on the screen.
  3. Match the expression using your face.
  4. If detected correctly, level up and progress.
  5. Complete all levels to win!
  6. Click Reset Game to restart anytime.

📷 Screenshots

Game Interface

🏗️ Setup & Installation

  1. Clone the repository:
    git clone https://github.com/OgAeons/FaceQuest.git
cd FaceQuest
  2. Install dependencies:
    npm install
  3. Run the game locally:
    npm start
  4. Open http://localhost:3000 in your browser and start playing!

🤖 AI & Expression Detection

FaceQuest utilizes MediaPipe FaceMesh for detecting facial expressions. The game recognizes the following expressions:

  • Left Eye Closed
  • Right Eye Closed
  • Head Turned Left
  • Head Turned Right
  • Smile 😊
  • Sad Face 😢
  • Surprised Face 😲
  • Angry Face 😡

📌 Future Enhancements

  • 🔥 More Expressions & Levels
  • 🎭 Multiplayer Mode
  • 📊 Performance Analytics
  • 🏆 Leaderboard & Achievements

💡 Contributing

Contributions are welcome! Feel free to fork this repo and submit a pull request.

🌟 Acknowledgments

Special thanks to:

  • MediaPipe for AI capabilities
  • Framer Motion for animations
  • useSound for immersive audio effects

Made with ❤️ by OgAeons

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce
Loading Svelte Themes