~/darrells.ai
← back to work
PrototypeGraphics / WebGL · 2026 · Builder

CubeLab

A fun, graphically gorgeous 3D Rubik's Cube I built to teach my son — the same puzzle that made me a minor arcade legend at 13 — now with standard notation, full 3D controls, and a solver that finishes the job whenever you get stuck.

WebGLthree.jsAlgorithmsGraphics
≤23
Moves to solve
one day
Built in
age 13
Solving since

the problem

Teaching myself to solve the Rubik's Cube at 13 was a formative confidence boost. Four decades on, I wanted a beautiful, modern way to pass that thrill on to my son.

An 80s puzzle, for the next generation

I grew up in the 80s — with all the scars to show for it — and the Rubik's Cube was the absolute rage of my elementary and middle-school years. I taught myself to solve it at 13, and it was a massive confidence boost: kids at the arcade would prep a fresh scramble and crowd around the pinball machines to watch me crack it. Forty-some years later, speed-solving the humble 3x3 is still going strong.

CubeLab is my love letter to that — a fun, graphically engaging way to pass the cube on to my son. It speaks standard notation, takes full 3D mouse, trackpad, and keyboard control, and lets you paste a scramble to run the exact same one over and over while you chase your times (or just hit random). And if you ever get stuck, the built-in engine will calmly finish the solve right in front of you — beautiful animation, full move list, no judgment.

One source of truth, no drift

A single logical cube model is the source of truth: 26 cubies, each sticker keyed by facing direction. That same model serializes to the 54-character facelet string the solver consumes and rebuilds the rendered meshes after every move — so the 3D view, the logic, and the solver input physically can't disagree. A validation harness checks the move engine against the solver across all 18 moves and 500 random sequences.

The Kociemba two-phase solver runs in a Web Worker, building its pruning tables once and then solving on demand, so the table-building never stutters the 60fps render. A camera director auto-orbits to reveal whichever face a move acts on.

Scrambled — ready to solve
A checkerboard pattern (M2 E2 S2)

built with

ReactTypeScriptthree.jsWeb WorkersKociemba