A 3D cube that scrambles itself and then solves itself, layer by layer.
The 3D cube is drawn with nothing but 2D polygons: every sticker is projected in perspective, sorted back to front and lit by its facing angle, over a glossy reflective floor. Each turn animates a layer rotating about its axis. The cube scrambles, then a layer-by-layer solver works out each move from the cube's actual state, the way a person would. It even turns the cube over to build the white cross on top, then plays the moves back while labeling each stage.
Try it. Drag to spin the cube. Click or press Space to scramble it again.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a 3D Rubik's Cube that scrambles and animates its turns with JavaScript and the HTML canvas element, using only the 2D context (no WebGL, no libraries). Put everything in a single index.html file with no build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Use a dark background.
- Model the cube as 26 cubies, each with an integer position from -1 to 1 per axis and a list of stickers (an outward normal plus a color).
- A face turn such as R rotates every cubie with x = 1 by 90 degrees about the x axis, rotating both its position and its sticker normals. Support U, D, L, R, F and B, with ' for counterclockwise and 2 for a half turn.
- Draw it: rotate points by a camera yaw and pitch, project in perspective, skip faces pointing away from the camera, and paint the rest back to front. Draw each cubie face dark with its sticker as a smaller colored square on top, shaded by how much it faces the light.
- Animate turns: while a move plays, rotate that layer by an eased partial angle before projecting, then apply the move to the model when it finishes.
- Scramble with about 20 random moves, then play the scramble back in reverse to solve it, and loop.
Once that works, make it beautiful:
- Round the stickers' corners and add a small specular highlight.
- Sort the turning layer and the rest of the cube as two groups, split by the plane between them, so turns never draw in the wrong order.
- Drag to orbit the camera and click to scramble again.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as a real layer-by-layer solver that works from the cube's state, a move history with undo, or a glossy floor reflection.
