The Professional AI-Powered Speedcubing Timer with Immersive HUD Experience.
- 🖐️ AI Hand Tracking: Powered by MediaPipe Hands for professional Stackmat-style interaction.
- ⚡ Instant Response: Optimized "Density-based" detection for millisecond-precision starts and stops.
- 📺 Immersive HUD UI: Full-screen camera background with elegant Glassmorphism floating overlays.
- 🎭 Dynamic Animations: Smooth scale-and-center transitions when the timer is running to maximize focus.
- 📊 Solve History & Stats: Track your PB, Ao5, and Ao12 in real-time with an elegant sidebar history.
- 📱 Responsive Design: Works on both desktop and mobile (Landscape orientation recommended).
Clone the project and install dependencies:
git clone https://github.com/nonbangkok/Rubix.git
cd Rubix
npm installnpm run devOpen http://localhost:3000 and grant camera permissions.
- Framework: Next.js 14+ (App Router)
- Vision Engine: MediaPipe Hands (Running in Web Workers)
- State Management: Zustand
- Styling: Vanilla CSS Modules (Glassmorphism & Neon Glow)
- Language: TypeScript (Strict Mode)
- Setup: Place your camera so your hands are visible on the bottom part of the screen.
- Arming: Place both hands on the virtual "Red Pads" shown in the camera feed.
- Ready: Wait for the pads/timer to turn Green.
- Solve: Lift your hands to start the timer.
- Stop: Place both hands back on the pads immediately after solving to stop the clock.
- Reset: Lift your hands again to return to IDLE state.
While the timer is idle (not running), a pencil icon appears in the bottom-right corner:
- Tap the pencil to enter edit mode.
- Drag or resize the stats/history panel, timer, cube panel, and the two hand-detection zones freely.
- Panels snap magnetically near the four corners and the four edge midpoints for quick alignment — you can still drop them anywhere else.
- A Reset button appears once your layout differs from the default, restoring all five elements at once.
- Tap the pencil again to finish editing.
Your layout is saved automatically in the browser (localStorage) and restored the next time you open the app.
Contributions are welcome! Please check our CONTRIBUTING.md for guidelines on how to get started.
This project is licensed under the MIT License - see the LICENSE file for details.
Made with ❤️ for the Speedcubing Lover