← All notes

BROWSER / ENGINEERING

Keep state separate from motion.

A look at how Cubiq separates cube logic from its animated interface.

Two representations, one cube

Cubiq keeps a logical cube made of integer positions and sticker directions. Separately, CSS transforms draw the cube and animate face turns.

Finish the move exactly

A turn first animates a layer. Once the animation finishes, the application updates the logical positions and renders again from that state. Subsequent moves use the committed model.

Test the properties

A face turned four times should return to its original state. A move followed by its inverse should do the same. The model tests also check sticker counts and scramble/reverse sequences.

Be clear about the solver

Cubiq records moves and solves by applying their inverses in reverse order. This supports states reached inside the game. It does not calculate an optimal solution or solve a physical cube entered by color.

CONTACT

Let’s connect.

Connect on LinkedIn ↗

Backend engineering · Applied AI · Cloud systems