GitHub - leereilly/rubiks-rubrics: Rubik's Rubrics is a self-contained 3D Rubik's Cube visualizer and solver that scans your real cube through your webcam and shows you, move by move, how to solve it. · GitHub
/" data-turbo-transient="true" />
Skip to content
Type / to search
Sign in<br>Sign upAppearance settings
You signed in with another tab or window. Reload to refresh your session.<br>You signed out in another tab or window. Reload to refresh your session.<br>You switched accounts on another tab or window. Reload to refresh your session.
Dismiss alert
{{ message }}
leereilly
rubiks-rubrics
Public
Notifications<br>You must be signed in to change notification settings
Fork
Star<br>24
main
BranchesTags
Go to file
CodeOpen more actions menu
Folders and files<br>NameNameLast commit message<br>Last commit date<br>Latest commit
History<br>37 Commits<br>37 Commits
.github
.github
images
images
LICENSE
LICENSE
README.md
README.md
contributors-cube.webp
contributors-cube.webp
index.html
index.html
rubiks-rubrics-contributions.webp
rubiks-rubrics-contributions.webp
screenshot.gif
screenshot.gif
screenshot.webp
screenshot.webp
View all files
Repository files navigation
Rubik's Rubrics
A stunning (if I do say so myself), self-contained 3D Rubik's Cube visualizer and solver. Scan your<br>real cube with your webcam and watch it come to life on screen, then sit back as it shows you exactly<br>how to solve it with smooth, eased layer-turn animations. Or let a random scramble appear and solve<br>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<br>beginner Layer-by-Layer method. Scan your real cube (or use a random/custom one), tap<br>Learn to solve , and follow along: each of the seven stages shows the named algorithm,<br>a plain-English cue, and Back / Next move / Demo stage controls while the 3D cube<br>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<br>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<br>face by face, and the browser reads the colors and shows the detected layout as an<br>editable net. Color detection isn't perfect, so depending on your lighting, camera<br>quality, and how the cube catches the light, a sticker or two might get read wrong.<br>No big deal: just tap any sticker on the net to cycle it to the right color before<br>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,<br>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,<br>soft contact shadows, and subtle bloom.
How it works
The cube starts solved, then a random sequence of quarter turns scrambles it. The<br>solution is simply that sequence reversed and inverted , so every solve is valid by<br>construction, no solver library required. State is tracked as a small logical model<br>(each cubie's grid position + orientation quaternion), which keeps scrubbing<br>frame-perfect and drift-free.
A cube you scan with your webcam can be in any state, so that path uses a real<br>solver: cubejs (Herbert Kociemba's two-phase<br>algorithm) runs in a Web Worker, loaded straight from a CDN. All 54 stickers are matched<br>against the six scanned center colors in a hue/saturation space (brightness is ignored, so<br>glare and uneven lighting don't wash them out) and then balanced so each color appears<br>exactly nine times, which fixes systematic misreads like red-vs-orange and guarantees a<br>legal cube. If the automatic read still gets a sticker wrong, you can fix it by hand on<br>the net before solving. The solution it returns is fed through the same<br>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<br>written in plain JavaScript (no dependencies, no build step). Rather than the shortest<br>solution, it produces a human-friendly sequence grouped into the seven teachable stages,<br>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
About<br>Rubik's Rubrics is a self-contained 3D Rubik's Cube visualizer and solver that scans your real cube through your webcam and shows you, move by move, how to solve it.<br>leereilly.net/rubiks-rubrics/<br>Topics<br>githubrubiks-cubethreejsvibe-coding<br>Resources<br>Readme<br>MIT...