Rubik's Rubrics

A stunning (if I do say so myself), self-contained 3D Rubik's Cube visualizer and solver. Scan your real cube with your webcam and watch it come to life on screen, then sit back as it shows you exactly how to solve it with smooth, eased layer-turn animations. Or let a random scramble appear and solve itself. Either way, you control the show.

▶ Live demo: https://leereilly.net/rubiks-rubriks/

Features

Learn to Solve coach

A built-in, step-by-step teaching mode walks you through solving your cube with the beginner Layer-by-Layer method. Scan your real cube (or use a random/custom one), tap Learn to solve, and follow along: each of the seven stages shows the named algorithm, a plain-English cue, and Back / Next move / Demo stage controls while the 3D cube demonstrates every move in sync. The solver runs entirely in your browser.

GitHub contributions mode

Repaint the stickers as GitHub contribution-graph squares (those familiar greens) for a playful, on-brand look.

More

• Random scramble: the cube shows up in a random state every time.
• Scan a real cube with your webcam: turn on your camera, hold up a physical cube face by face, and the browser reads the colors and shows the detected layout as an editable net. Color detection isn't perfect, so depending on your lighting, camera quality, and how the cube catches the light, a sticker or two might get read wrong. No big deal: just tap any sticker on the net to cycle it to the right color before solving. Once it looks right, it solves the cube so you can watch it unscramble.
• Animated solve: watch it unscramble with buttery, eased quarter-turn animations.
• Speed slider: go from a slow crawl to turbo.
• Timeline scrubber + transport: scrub anywhere between Scrambled and Solved, step a single move back/forth, jump to either end, or play/pause.
• Auto-rotate, orbit (drag), and zoom (scroll) for a showcase feel.
• Stunning rendering: physically based glossy stickers, image-based reflections, soft contact shadows, and subtle bloom.

How it works

The cube starts solved, then a random sequence of quarter turns scrambles it. The solution is simply that sequence reversed and inverted, so every solve is valid by construction, no solver library required. State is tracked as a small logical model (each cubie's grid position + orientation quaternion), which keeps scrubbing frame-perfect and drift-free.

A cube you scan with your webcam can be in any state, so that path uses a real solver: cubejs (Herbert Kociemba's two-phase algorithm) runs in a Web Worker, loaded straight from a CDN. All 54 stickers are matched against the six scanned center colors in a hue/saturation space (brightness is ignored, so glare and uneven lighting don't wash them out) and then balanced so each color appears exactly nine times, which fixes systematic misreads like red-vs-orange and guarantees a legal cube. If the automatic read still gets a sticker wrong, you can fix it by hand on the net before solving. The solution it returns is fed through the same reverse-and-invert machinery, and the visualizer plays it back.

The Learn to Solve coach uses a separate, from-scratch beginner Layer-by-Layer solver written in plain JavaScript (no dependencies, no build step). Rather than the shortest solution, it produces a human-friendly sequence grouped into the seven teachable stages, each with the named algorithm a learner would apply by hand on a real cube.

Kudos

Made with ♥ and GitHub Copilot, Claude Opus 4.8, three.js + cube.js

License

MIT