Lunch · today
Chicken bowl
640 kcal
Not saved yet
The state language · v0.1.0
Every state is a material.
Ten states. Each one says what the surface does, how it moves, what it sounds like, how it feels in the hand, and what it tells you. The code and this page are both generated from one file, spec/states.json, so the design and the implementation cannot drift apart.
Try the states
Send a request and let the network decide, or jump to a state yourself. Only the moves the spec allows are enabled.
Move to a state
Lunch · today
Chicken bowl
640 kcal
Not saved yet
Current state Idle
The table
Generated from the spec. Surface values run from 0 to 1: how much liquid covers the surface, how far the set-front has travelled, the fracture pattern left behind, and how matte it is.
Rules that don't bend
- Ember is never a static color. It appears only during the instant something sets. The spec validator rejects it anywhere else.
- State is never color or motion alone. Every state has words, and changes are announced to screen readers.
- Mercury is for instruments. Text never sits on bright chrome; it lifts to a brighter tone over liquid.
- Every state works without WebGL, without motion, and in forced colors. The CSS-only card on this page runs the same states.
- Copy says what happened, then what to do. No "please", no "successfully", no exclamation marks.