Calculator

// what it is

A four-function calculator, which is the most solved problem in interface design, rebuilt purely as a study in motion. The arithmetic is trivial on purpose; all the work is in what the numbers do.

// the problem

Calculator buttons normally just change a number, so the interface never tells you what happened — pressing equals and pressing clear look identical. The question was whether movement alone could make the state change legible.

// decisions

1. 01

   Digits roll instead of swapping

   Each digit animates like an odometer wheel, so you can see a 9 becoming a 0 and the carry travelling. A number that changes by transforming reads as arithmetic; a number that is simply replaced reads as a repaint.

2. 02

   The value physically flies into the history

   On equals, the running value animates from where it was to its new place in the expression history, using a first-last-invert-play transition. The result is not re-rendered somewhere else — it is the same object, moved, which is what makes the connection obvious without a label.

3. 03

   Theme change as a single expanding circle

   Light and dark swap behind a circular wipe using the View Transitions API rather than cross-fading two stylesheets. One gesture, one movement, no flash of the wrong colours.

4. 04

   No framework, one file

   The whole thing is a single self-contained HTML file. For a build whose entire subject is timing and transforms, a framework's render cycle is something to work around rather than a help.