Notes · Oct ’26

The button is the progress bar

A concept for an assistant inside Cravel that asks before it spends a restaurant’s money. Nothing here shipped in Cravel.

Cravel, my company, puts a restaurant’s scheduling, inventory and floor in one place. The moment I cared about is the second before the assistant acts, when a kitchen manager decides whether to let it.

The assistant is Sous, a chef’s toque with eyes. You ask it to order Tuesday’s produce. It checks the stock and the bookings, comes back with 18 items from Greenline for about $310, and waits. You approve and it runs five steps.

One rule. It is one surface the whole way. Launcher, chat, working pill, approval card and receipt are the same object changing shape, so every decision below is a transition.

The full take, 48 seconds. Sous takes the request, cooks, asks, runs, stops at step 3, picks up again and folds into the receipt. Recorded from the lab’s record mode.

The pill asks, then waits

At rest Sous is a pill in the corner that reads “Ask Sous…”. A tap grows it into a chat whose right and bottom edges never move, so it grows out of the spot you touched.

The Sous chat with the request to order Tuesday’s produce and Sous’s reply, with a red marker note: the plan comes from a conversation — The chat. One line from you, and a reply that says what Sous will check before it asks.

While Sous works, the chat folds back into the pill and the chef cooks in it. It hops about every two thirds of a second, never on a clock, and every third hop crouches and spins.

When the plan is ready the pill turns dark, an orange badge lands on the toque and a beam runs along the bottom edge. Then it waits. It never opens the card on its own.

The dark pill in the corner of the screen, an orange badge on the chef’s toque and a coloured beam under it, with a red marker note: asks before it acts — The ask. The line reads “Sous needs your approval” and the card is still closed.

The card is the pill, opened

Tapping the ask grows the same surface into the approval card. The button’s own morph is 480ms on an ease-out quart, which covers 69% of the size in the first quarter of its time. The card is bigger, so it gets 1.2 times that, 576ms, on a softer curve that is at 28% by the same point.

Height follows width by a tenth of the duration, so the avatar arcs into its corner. The content arrives in reading order, eyebrow and title, then body, then footer, each group only once the moving edge contains it.

The close is 0.7 of the open, 403ms, and the order flips. You have already decided, so the content leaves first and the surface holds briefly before it folds. The pill’s line leaves at once when the card opens and arrives over the last 40% of the close.

The card has one action, so the button is near-black on white. The accent belongs to the progress and shows up only after the press. Done is a green tint with a dark green label, so it reads as a state, not another button.

The approval card at rest, Produce order for Tuesday, its black Approve and run button circled in red marker with the note: one action, in ink — The card at rest. The order in two lines, one button, and a status line that says nothing leaves until you approve.

A path, not a gradient

Press Approve and the button shrinks to a count, 1/5, and a 2px ring starts round its edge, one arc per step. A conic gradient turns at a constant angle, so on a pill it races round the ends and crawls along the sides.

So the ring is an SVG path along the pill’s real outline, with pathLength set to 1. The dash moves at one speed along the true perimeter. The path is rebuilt from the live box on every frame of the width morph, and the gaps stay a fixed 3px plus one stroke width.

The button early in the run, a step count inside and a thin ring drawn along its edge, circled in red marker with the note: a path, not a gradient — Early in the run. Five arcs of the same length, whatever each step costs.

Each step keeps its own pace

The arcs are equal and the time behind them is not. In the 7.5-second run, reading the stock is one quick call and takes 0.75 seconds. Building the order walks every line of the forecast and takes 2.6, 3.5 times as long.

Inside a step the arc creeps, fast and then slower, and never reaches the end on its own. When the work is done it closes in 200ms and holds for 180ms. Only then does the count move. A count that ticks when a step starts is a promise. One that ticks when it ends is a report.

Labels swap without overlapping. The outgoing one leaves at once, rising and blurring. The incoming one waits 60ms and rises 6px. A digit is a smaller event than a label, so it rises 3px.

The card mid-run with the status line Building the order underlined in red marker and the note: its own pace — Step 3, the longest of the five. Its arc is as long as the others and takes 2.6 seconds to fill.

The take stops at step 3. The status line names the system that failed, “The supplier’s price list didn’t load.” A manager can judge that. The ring’s head turns red, its tail drains into it, and the button becomes Retry. Nothing shakes.

Retry resumes at the failed step. Steps 1 and 2 already happened, and counting them again would say the agent forgot its own work.

The stopped card with a Retry button and the line The supplier’s price list didn’t load, with a red marker note: retry from the failed step — The stop. A red badge on the toque, a red dot on the line, and Retry where the count was.

Done lands, holds, then folds

When the last arc closes, the ring turns green and dissolves into the button, the check draws and the button widens to Done. It settles with a 4% dip over 360ms, then holds for 1600ms before anything else moves.

The button showing a green check and the word Done, a red marker arrow pointing at the check with the note: lands, then holds — Done, during the hold. The line beside it says when the order arrives.

Then the card folds into the pill it came from, and the pill says what changed: “Produce ordered for Tuesday.” Past tense, and it names the order, not the run. Tapping it in the lab opens the receipt, because a done notice should not ask again.

The card folded into a pill that reads Produce ordered for Tuesday, a red marker arrow pointing at it with the note: says what changed — The receipt, in the corner the ask came from.

What I cut

A fill that washed the accent across the button instead of the ring. It is still a knob in the lab, off. Even pacing, which looked scripted. An overshoot on Done, because a finished order should land, not bounce. An avatar from the bot-avatars library, which Sous replaced, though its rig still moves the way that library’s does.

Two smaller slots for the chef. Inline in the eyebrow, at 20px, it read as an icon. In place of the status dot, at 22px, it crowded the button. The header won, at 40px.

The version on this site starts at the card. The chat, the ask and the stop stay in the lab.

How it was built

React, SVG and CSS, a WebGL canvas for the chef, and the border-beam library for the ask’s glow. The morph runs on a small engine with five channels: the surface’s width and height, and the avatar’s two offsets and its scale. A new target mid-morph adds a layer instead of restarting, the way Core Animation does. Every duration lives in one table that the component, the CSS and the showcase all read, so the take cannot drift from the motion it records.

I directed it. It started on 2 October in a lab of its own, from a written plan that split the build between two agents. On 7 October it moved into my shared lab, and on 10 October it came to this site. Claude Fable 5.1 co-wrote both moves.