This one came from a Reddit post.

Somebody on r/creativecoding had generated static patterns of Rubik's cubes. They looked good and they did not move, and the whole time I was looking at them I was wondering what they would do if they turned.

Isometric because the pattern needs it

An orthographic camera at the classic 30 and 45 degree angles. No perspective at all, which is the point: in perspective, cubes at the edge of the grid are seen from a different side than cubes in the middle, and the field stops reading as one surface. Orthographic means every cube shows you the same three faces, so a hundred of them tile into a pattern rather than a pile.

Each cube is 27 cubies sharing one geometry and one set of materials. Sharing matters at this count. Twenty-seven meshes per cube across a full grid is a lot of draw calls to hand the GPU for something that is mostly the same box over and over.

Turning a layer without breaking the cube

This is the bit worth explaining, because it is the part that is not obvious and every cube renderer has to solve it.

A Rubik's cube is not a hierarchy. There is no "top layer" object to rotate, because which nine cubies make up the top layer changes every time you turn anything. So a rotation goes:

1. Find the nine cubies whose position puts them in the layer.
2. Parent them, temporarily, to an empty pivot at the cube's centre.
3. Rotate the pivot.
4. Reparent them back to the cube and snap their positions to the grid.

The snap in step four is not cosmetic. Floating point drift accumulates over hundreds of rotations, and without it the cubies slowly stop lining up until the cube looks like it has been left in the sun.

The easing is the whole feel

A layer turn does not move linearly and it does not ease gently in and out either. A real cube turn is a flick: your finger gives it a shove, it travels fast, and it arrives against the stop. So the rotation accelerates hard, coasts, and lands.

Get that wrong and it looks like a screensaver. Get it right and it looks like something is doing it.

The solve animation runs on ease-out cubic instead, quick at the start and settling at the end, so a grid returning to solved builds a rush and then finishes together.

Seven colour schemes, because once the thing worked I could not stop. Classic, neon, ocean, sunset, forest, pastel, monochrome. Sync mode turns every cube at once, which is the setting worth seeing.

Where it lives

On its own host rather than this one, which is why the frame below points outward. It is a Three.js application with its own build, and folding it into this site would have gained nothing except a second copy to keep working.