Booking progress
Option 1 · Numbered pillsStyle: monochrome + one accent, Swiss quiet · Components: five numbered pills on a hairline, done = solid blue + check, current = blue ring on light blue, future = sunken grey; the step name only under the current pill; your earlier choices as chips with a pencil · Art: none · Motion: the ring moves and the hairline fills (260 ms ease-brand); a done pill pops its check · Material: flatnav › ol, aria-current="step" · done steps are buttons, future steps are plain text (law 16: no dead buttons) · rail fill = scaleX from the inline start
Option 2 · Progress rail (house ProgressRail, horizontal)Style: hexagonal geometry as the marker (kb/09 exception) · Components: a thin rail with a hex per step, every step named underneath on two lines, choices as chips · Art: none · Motion: the rail fills to the new step, the current hex glows once on arrival (no loop) · Material: flat, the glow is the only lightinline SVG hexes (stroke, not clip-path, so they draw hollow) · drop-shadow glow · names 16 px, 2-line grid · RTL fills right → left
Option 3 · Recap barStyle: frosted glass on the control layer over the real room · Components: one sticky summary bar that reads your booking back ("2 people · Fri 16 Oct · 12:00 · Aura · 4 of 5"), each part tappable, a five-segment line under it · Art: Aura studio photo · Motion: the next segment fills (260 ms), tapped segments jump back · Material: frost (blur 18 px, saturate 160 %), solid fallbackposition: sticky inside the step · each recap part is a 44 px button · segments: 44 px hit area, 6 px bar
Option 4 · Tactile keysStyle: light-modelled hardware (a desk's channel keys, same family as people-mic option 5 and button option 1) · Components: five keys with step numbers, done keys sunk with a check, the current key lit blue, names on a second line · Art: none · Motion: the key you leave sinks, the next one lights (press physics, no spring) · Material: four-shadow keys in light, lighter fill + rim in darkbox-shadow swapped as a state (never transitioned) · only transform animates · future keys are spans
Option 5 · Hex ripple stepsStyle: the house ripple as motion · Components: five 48 px hexagons on a line, a "You're here" tag under the current one · Art: none · Motion: moving forward fires the hex ripple (two rounded-hex rings, 520 ms, second at 90 ms) from the new step, then a light haptic · Material: flat hexes, filled blue for the currentrings = SVG hex outlines scaled 1 → 2.3, opacity .45 → 0, transform + opacity only · reduced motion: no rings, instant fill