Dither

The brand texture: the Bruh and small indicators drawn in dots. The Bruh is a halftone, every dot sized by the light on a sphere, so the face reads as a lit ball; the level meter is one braille cell. Keep it for brand moments, never for app chrome.

Bruh

bruhDots() from @bruhs/theme/dither reads the logo's geometry, so the dots always match it. Move the pointer: lookX and lookY turn the whole head, the features riding the sphere.

Level meter

<span class="braille-meter" role="meter" aria-label="Microphone and system audio">
  <i></i><i></i><i data-lit></i><i data-lit></i>
  <i></i><i></i><i></i><i data-lit></i>
</span>

meterDots(level) turns a level in 0 to 1 into lit dots, square-rooted so quiet speech still shows.

Rule

<hr class="dither-rule">