Rubiek

Description

Rubiek is an interactive 3D Rubik's Cube trainer that runs entirely in the browser as real-time WebGL — not CSS transforms or sprites. The cube can be turned three ways: keyboard shortcuts, a color-coded on-screen move pad, or by typing standard cube notation like R U R' U'. An algorithm trainer jumps the cube into the exact starting case for named algorithms (Sune, T-Perm, and more) and animates the solution step by step with live token highlighting. It features WCA-style 20-move scrambles, a live speed slider, and persistent state via localStorage. Under the hood the cube is modeled as 26 cubies, each owning its grid position, quaternion orientation, and sticker colors, with every input method feeding one shared move queue animated by a single executor.

Technologies

• React 19
• TypeScript
• Three.js
• React Three Fiber
• Zustand
• Tailwind CSS v4
• Framer Motion
• Vite