6 7 Emote Royale

Inspiration We wanted to create something utterly ridiculous yet technically impressive—a project that makes you laugh while showcasing cutting-edge computer vision. Inspired by the chaotic energy of Clash Royale emotes and brainrot meme culture, we asked: "What if your face could unlock collectibles?" The legendary 6-7 emote became our Easter egg obsession, and we built an entire emotion-tracking game around it.

What it does 6 7 Emote Royale is an interactive emotion mirror that uses your webcam to detect facial expressions and hand gestures in real-time, matching your mood with hilarious Clash Royale-themed memes. Smile? Unlock a laughing goblin. Sad? A crying goblin appears with custom sound effects. Show both hands? Trigger the legendary 6 7 Special with exclusive music and unlock a secret achievement. Every detected emotion gets added to your collection, gamifying the experience. Users can browse their unlocked emotes in a polished gallery and compete to "catch 'em all."

How we built it Face Detection: face-api.js with TinyFaceDetector for real-time expression recognition (happy, sad, angry, surprised, disgusted, fearful, neutral) Hand Tracking: MediaPipe Hands for detecting both hands simultaneously Visual Overlay: Custom canvas rendering with interpolated landmark points for dense, precise face and hand tracking Audio System: Dynamic audio switching—each emote triggers unique sounds (goblin laugh, goblin cry, 6-7 special track) Collection System: localStorage-based persistence to track discovered emotes across sessions Gamification: Hidden achievements, progress tracking, and a randomized "Claim Achievement" reward link (50% Clash Royale voucher, 50% partner redirect) UI/UX: Modern gradient backgrounds, glassmorphism controls, smooth transitions, responsive design

What we learned -Computer vision APIs are incredibly powerful but require careful tuning (input sizes, thresholds, processing loops) -Gamification psychology drives engagement—users spend 5+ minutes making faces just to unlock emotes -Audio context management in browsers is trickier than expected (autoplay policies, track switching) -Brainrot memes are a legitimate UX strategy The 6-7 emote is eternal

Built With

• api
• audio
• face-api.js
• face-api.js)
• gradients)
• hands
• javascript-html5-canvas-css3-(glassmorphism
• localstorage
• mediapipe
• ml
• tensorflow.js
• via
• web