Solving the 3×3 Cube, Layer by Layer: An Interactive Tutorial in English and Chinese

My younger kid suddenly wanted to play with the Rubik's cube again. A year or two ago we'd learned to solve it together from a Zhihu post, “三阶魔方还原公式” by 爱死亡机器人, which teaches the classic layer-by-layer method, and we'd had a great time with it. But we'd both since forgotten how it went.

First the kid spent a long time on YouTube, going through video after video, and still couldn't get it. That said a lot about how good the Zhihu post was compared with everything else. The problem is that it's in Chinese, which my kid can't read.

So I handed it to Claude and had it made into a bilingual web page: rubik.bencao.it. Next time anyone in the house wants to solve a cube, they just type the address and start.

An interactive page beats a static post easily. Rotating a 3D cube settles "which side is front?" faster than any flat picture. It also fills in the detail for the first few steps, which the original skips because experienced solvers find them too obvious to write down. The goal was a guide simple enough that anyone can pick up a cube and get through it.

Seven steps

The method is the same as the original: solve the white layer, then the middle layer, then the yellow layer, one small goal at a time.

1. Bottom cross (底棱归位). Make a “daisy” first: the four white edges around the yellow center. Then drop each petal down when its side color matches the center below it.
2. Bottom corners (底角归位). Put each white corner above its slot, hold it at front-right-bottom, and pick the formula for the way white is facing.
3. Middle edges (中棱归位). Find a top edge with no yellow, line it up with its center, and send it left or right into the middle layer.
4. Yellow cross (顶棱面位). Dot, L-shape or line: each has one way to hold the cube and one formula.
5. Yellow top (顶角面位). Twist the top corners until the whole top face is yellow.
6. Top corners into place (顶角归位). Look for “headlights”, two corners on one side that share a color, and turn them to the front.
7. Top edges into place (顶棱归位). Cycle the last edges, holding the solved side at the back.

Each step opens with its target, so you know what “done” looks like before you start.

What the page adds

Cubes you can turn. Every case is drawn as a 3D cube, rendered as SVG straight from a sticker map. Stickers that don't matter for the step are grey, so the pieces you're looking for stand out. Drag a cube to look around it, or press Turn to see the back. On a phone, rotating is opt-in (tap the rotate button first) so scrolling the page doesn't spin every cube on the way past, and Reset all puts them back.

Move icons, not just letters. “R U R′ U′” is meaningless until you know the notation. Every move in a formula has a small cube icon with the turning layer lit and an arrow showing the direction: black for a clockwise quarter turn, red for prime (counter-clockwise), blue for a half turn. A “Reading the formulas” section at the top explains the faces once, and every formula has a Copy button.

A better white cross. The original skims the first step, because experienced solvers don't think it needs explaining, but it's the one beginners get stuck on. The page has a full daisy guide: seven cases for where a white edge can be hiding, each with its own move, plus the habit that saves the most frustration: turn the top first so you don't knock off a petal you already placed.

English and Chinese. One button switches every label, explanation and step name, and the Chinese step names (底棱归位, 顶角归位…) stay next to the English ones, so either kind of reader can match the page to the original post.

A step rail. A sticky bar of seven mini cubes shows where you are and jumps to any step, which helps when you're halfway through a solve with a cube in one hand.

How it's built

Claude built it from the Zhihu post; I steered and tested it.

It's one index.html, about 56 KB, with no build step and no dependencies beyond two Google Fonts. The cube renderer is a few dozen lines: each face is projected with a simple perspective, each sticker is a rounded square, and the lighting is a dot product with a fixed light direction. Every case in the tutorial is just a 54-character string of sticker colors, which made it easy to check each picture against the original.

It's styled in the Rising Company design system's Daylight theme, respects reduced motion, and is hosted on Vercel. The source is on GitHub.

Thanks

All the credit for the method, the step order and the formulas goes to 爱死亡机器人 and the original tutorial on Zhihu. The wording, the 3D illustrations, the white-cross guide and the English version are what this page adds.

If you have a cube at home, hand it to a kid (or a grown-up) and start at step one. I'd love feedback on where anyone gets stuck.

---

If you found this useful, you can buy me a coffee ☕.