Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA volume or brightness overlay that pops in when a level changes and hides itself after a delay.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | - | Level from 0 to 100. |
visible | boolean | - | Whether the HUD is on screen. |
onVisibleChange | (visible: boolean) => void | - | Called with false when the HUD times out. |
kind | "volume" | "brightness" | "keyboard" | "volume" | What is being adjusted. Picks the icon and the spoken name. |
muted | boolean | false | Show a muted speaker (volume only). |
duration | number | 1800 | Milliseconds the HUD stays after the last change. |
variant | "mac" | "pill" | "mac" | Square with a segmented bar, or a slim capsule at the top. |
Also accepts all <div> props. The HUD is absolutely positioned, so give its parent position: relative.
| Prop | Type | Default | Description |
|---|---|---|---|
visible | boolean | - | Current visibility. |
show | () => void | - | Show the HUD. |
hide | () => void | - | Hide the HUD. |
onVisibleChange | (visible: boolean) => void | - | Pass to Hud. |
Return value of the hook.
The visual HUD is aria-hidden. A visually hidden role="status" element announces the new level, such as "Volume 60 percent".