Option 1 · Logo-mic chipsWave-1 option 2, improved. Style: Swiss grid, monochrome + one accent · Components: 56 px −/+ stepper, a five-slot mic tray with an "Included" and a "+AED 100 each" bracket, running total · Art: the microphone from our own mark (P and H), lifted out of the hexagon as a monoline icon, no frame and no effect on the logo · Motion: each mic pops in (180 ms overshoot ease); from the 3rd mic an amber "+AED 100" tag floats up and the total rolls · Material: sunken tray, lit slots
<symbol> = PH_BRANDMARK mic paths, viewBox cropped to the mic · cubic-bezier(.34,1.56,.64,1) 180 ms · aria-live total · disabled − / + at 1 and 5
Option 2 · 3D-drawn micStyle: light-modelled object, one per person · Components: five stand positions on a desk, stepper, amber price tags on the extra mics · Art: a studio broadcast mic drawn in SVG layers (charcoal grille + mesh, specular strip, Hub Blue band, chrome body, yoke, stand, contact shadow), no WebGL, no image · Motion: a new mic drops onto the desk and settles (260 ms), its tag swings in; removed mics fade back to a ghost · Material: gradients from tokens only
SVG linear/radial gradients with style="stop-color:var(--…)" · <pattern> mesh · <use> × 5 · 0 KB libraryOption 3 · People, not silhouettesFour people metaphors side by side, one stepper drives all four, so you can pick one · A initials (overlapping avatar circles, "You" first, sample initials for guests) · B studio headphones, one pair each · C hex seats, 48 px markers, the seat number under the hex (house hex rule: no text inside a hex under 144 px) · D chairs at the studio table seen from above, a mic in front of each taken chair · Motion: the new seat fills (180 ms), nothing else moves
one state → four renderers · SVG built in JS · hex = inline SVG polygon (stroke + fill), not clip-path, so the outline shows
Option 4 · Fill meterWave-1 option 5, improved with Ameer's Imvent idea made ours. Style: light-modelled hardware · Components: five tactile keys 1–5, a rising ramp of five hexagon cells that fill with Hub Blue like a level meter, a rolling numeral · Art: the liquid has a tilted surface, so the ramp reads as a filling bar · Motion: cells fill in order (300 ms each, 60 ms stagger), the numeral rolls, "+AED 100" floats off each extra cell · Material: four-shadow keys, sunken cells
hex = clip-path on a wrapper (one per cell) · liquid = translateY + rotate(-9deg) inside it, transform only · keys = radiogroup, arrow keys mirror in RTL
Option 5 · WaveformStyle: a mixing desk, monochrome + one accent · Components: five channel strips, each person opens a live channel; count chips 1–5 under it · Art: a gently moving waveform per open channel, closed channels flat · Motion: a channel opens with its bars rising (280 ms), then breathes slowly; pause button (motion longer than 5 s needs one); frozen under reduced motion · Material: sunken desk
26 bars × 5 channels, transform: scaleY only · @keyframes reads per-bar CSS variables · animation-play-state for pause