Eyebrow Tetris: A Face-Controlled Browser Tetris Game
Mar 2026
Concept
The classic Tetris formula has been implemented countless times, but almost always with a keyboard or controller.
For this project I wanted to explore a different question:
What if a game could be controlled entirely by your face?
Eyebrow Tetris is a browser-based Tetris game where the player uses facial gestures instead of traditional input devices. Using real-time facial landmark detection, the game tracks eyebrow movements and mouth gestures through the webcam and converts them into game controls.
Controls:
- Raise your left eyebrow to move left
- Raise your right eyebrow to move right
- Raise both eyebrows to rotate the piece
- Open your mouth to drop the piece
The result is a deliberately ridiculous but surprisingly playable control system.
The idea plays with accessibility in reverse, summarized by the project’s tagline:
“Accessibility is important. So I made the least accessible game possible.”
Technical Highlights
Eyebrow Tetris runs entirely inside the browser and combines several real-time systems working together.
The game continuously processes webcam input, detects facial landmarks, and translates those movements into gameplay actions while rendering the Tetris board at the same time.
Key technical aspects include:
- Real-time facial landmark tracking using MediaPipe Face Landmarker
- Gesture detection logic for eyebrows and mouth movements
- Calibration and hysteresis to avoid accidental triggers
- Canvas-based rendering for the game board and animations
- A Supabase-backed global leaderboard with separate rankings for face vs keyboard input
One of the biggest challenges was making the gesture detection stable enough so the game feels responsive instead of chaotic.
Small details like eyebrow thresholds, drop timing, and input smoothing made a huge difference in playability.
Technology Stack
The project combines modern browser APIs with a lightweight game engine built entirely on the front end.
Main technologies used:
- Next.js for the application framework
- React + TypeScript for game logic and UI
- MediaPipe Face Landmarker for facial gesture detection
- WebRTC / getUserMedia for webcam access
- HTML Canvas for game rendering and effects
- Tailwind CSS for styling
- Supabase for leaderboard storage
The entire game runs client-side in the browser, meaning video processing never leaves the player’s device.
Features
Compared to a typical Tetris clone, the project adds several playful mechanics and visual effects.
Notable features include:
- Face-controlled gameplay using eyebrow and mouth gestures
- Keyboard fallback controls for accessibility
- Global leaderboard separating face mode vs keyboard mode scores
- Cosmetic overlays such as googly eyes, clown mode, and moustaches
- Retro neon arcade aesthetic with pixel fonts
- Custom melting game-over animation with glitch effects
- Canvas confetti celebrations for high scores
- Fully playable directly in the browser without installation
The cosmetic modes intentionally lean into the absurdity of playing a game with facial expressions.
Why I Built This
This project started as an experiment to see how far browser-based computer vision could be pushed in a simple web game.
Modern browsers now allow:
- real-time computer vision
- webcam processing
- responsive rendering
- online leaderboards
All without native apps or additional hardware.
Eyebrow Tetris became a playful demonstration of how face tracking, gesture detection, and browser games can be combined into something unusual and memorable.
