Session length · wave 2
Option 1 · Stepper + hex fillStyle: wave-1 option 2 kept (numbers as the hero, hours up, money up) · Components: 56 px −/+ stepper, a honeycomb of hour cells (48 px hexagons, markers only), the rolling total, the WhatsApp line from 5 hours · Art: the honeycomb is the hour count · Motion: each new hour's cell fills from the bottom like a level (transform scaleY, 60 ms stagger), the total's digits roll · Material: flat cells, tactile "+"hex = static SVG clipPath; only the rect inside moves (kb/05 §4.3: never animate the cut) · cells 5–8 are dashed and fill Sky, not Hub Blue: past 4 hours the booking is confirmed by a person · stepper keeps going to 8 hrs (12:30 → 20:30)
Option 2 · Slider + waveformStyle: wave-1 option 3 as a sound file · Components: a native range with half-hour detents 1–4 h and a "4h+" stop, the filled rail drawn as an audio waveform, tappable stops, a get-in-touch card · Art: the waveform is the session · Motion: the bars inside the length rise to full height, the rest lie flat; the louder the session, the bigger the wave · Material: sunken rail, raised discinput[type=range] min 2 max 9 (half-hours, 9 = 4h+) · 56 bars, transform scaleY only · the 4h+ zone is hatched amber and opens the card · stops are buttons (WCAG 2.5.7)
Option 3 · Glass capsule + ringStyle: wave-1 option 4 over the real Aura photo · Components: glass segmented 1h / 2h / 3h / 4h / 4h+, a hexagon ring that fills clockwise from the top vertex, the length and price on a glass chip inside it, a glass get-in-touch sheet · Art: the room · Motion: the ring draws round (stroke-dashoffset, 400 ms), the thumb glides 260 ms · Material: frost over media only, tint passes on its own<path pathLength="1"> starting at the top vertex, dashoffset 1 − hours / 4 · 4h+ → sheet (role=dialog), Back returns to 4 hrs · solid fallback without backdrop-filter
Option 4 · Hex bars, oursStyle: the Imvent bar redone in our geometry · Components: a staircase of four elongated hexagons (1 to 4 hours), each tapped to set the length, price and end time under each, a hatched "4h+" bar that opens the WhatsApp card · Art: the staircase rises with the hours · Motion: bars fill left to right (right to left in Arabic) one after another, 80 ms apart · Material: sunken tracks, Hub Blue fillbar = clip-path polygon with true 120° hex tips (static) · fill = transform scaleX from inline-start · role=radiogroup, arrow keys mirror in RTL
Option 5 · Blocks + offerStyle: Acuity's base block + extensions, with the long-session door built in · Components: a base hour, three "+1 hour" cards, a quiet note on the 3rd and 4th hour, a "Longer? Talk to us" card with a WhatsApp pill and a call-back field, the total pinned · Art: none · Motion: an added hour slides in its tick, a removed one fades · Material: flat cards, the base tintednote text from our data: 93 % of sessions run 1 to 2 hours (the brief's "most sessions are 2 hours" is not true: 1 hour is 64 %) · call-back = type=tel, autocomplete=tel, 56 px · nothing is sent