Cube
Scramble it and put it back together. Drag a layer to turn it, and drag anywhere around the puzzle to turn the whole thing over. The clock starts with your first turn and stops when every face is one colour again.
Solved
Drag a sticker to turn its layer, and drag anywhere around the cube to turn all of it. On a keyboard, U, D, L, R, F and B turn a face, Shift turns it the other way, a number first reaches a deeper layer, and the arrow keys turn the whole cube. On the 2×2 and 3×3, H shows a hint.Drag a sticker to turn its corner, and drag anywhere around the pyramid to turn all of it. On a keyboard, U, L, R and B turn a corner, Shift turns it the other way, 1 first turns the tip alone, and the arrow keys turn the whole pyramid. H shows a hint.
How to play
Drag a layer
Press a sticker and drag it the way you want its row or column to go. The layer follows your finger and clicks into place when you let go, and a quick flick carries it the rest of the way.
Drag around it to turn it over
Drag anywhere off the puzzle to turn the whole thing and look at another side. Let go and it settles square to you again, so three faces are always in clear view. On a desktop the right mouse button does the same on the puzzle itself.
Scramble, then beat the clock
Scramble mixes it with random turns. The clock starts with your first turn and stops the moment every face is one colour, and your best time is kept for each puzzle. Undo takes back the last turn. Stuck? Hint shows the next move and what it is for, one step of the method at a time, and a solve made with hints does not count as a record.
Five puzzles
The 2×2 is the place to start and the 3×3 is the classic. The 4×4 and 5×5 add layers in the middle, and the pyramid turns in thirds around its corners, with tips that twist on their own.
How it is built
No canvas, no WebGL and no 3D library. The puzzle is a scene of ordinary elements, one per sticker, placed in three dimensions with CSS transforms, and the browser draws the perspective and works out what is in front of what. A 5×5 is a hundred and fifty of them. A turn writes a rotation onto the stickers in the turning layer and onto nothing else, and two dark plates slide into the cut so the inside of the puzzle is never empty.
No turn is written down anywhere. A puzzle is a list of places a sticker can be, each with a centre and a direction it faces, and a turn is an axis, a slice of depth along it and an angle. The stickers a turn takes are the ones in the slice, and where each one lands is found by rotating it and looking up the place that is there. The cube and the pyramid have nothing mechanical in common and run on the same code, and the 3×3 passes the classic check: R U, repeated 105 times, brings it back to solved.
A drag is measured through the same projection the browser draws with. Every axis the sticker under your finger could turn about is tried, and the one whose motion on screen best matches your finger wins, so the right layer turns from any angle, at a speed that keeps the sticker under your finger. When you let go, a spring pulls the layer to the nearest step. It is set a little under critical damping, so the layer overshoots by a degree or two and settles back, like plastic clicking into place.
After a turn, a sticker takes the position of the place it landed in rather than keeping the rotation that got it there. The two can differ by a quarter turn in the sticker’s own plane, which cannot be seen because every sticker is symmetric about its centre, and it means no rounding error builds up however long you play.
Each sticker is lit from one direction, fixed to you rather than to the puzzle, so the face on top is the bright one and the face on the right the dim one however the puzzle is turned. The brightness is recalculated as the view turns and only written when it changes by a visible amount. The sounds are made in the browser as well: every turn is two clicks a few milliseconds apart over a short, low knock.
The hints follow the method people are taught rather than the shortest solution, because a shortest solution can only say that a move is one closer, which teaches nothing. The 3×3 is solved in the seven steps of the layer-by-layer method, the 2×2 in three and the pyramid in three, and each move carries its step, the piece it is about and, inside a sequence, the sequence itself. Where a step is judgement rather than a sequence, such as which white edge to bring down next and how, a short search finds the fewest moves for that one piece that leave everything already placed where it is. The plan is worked out again whenever the puzzle is not where it said it would be, and it was checked by following it from fifteen hundred random scrambles, every one of which it solved.