## Glass Control Center (S—472)

A frosted-glass control centre with switches, now playing, and brightness and volume sliders.

- URL: https://sundaeui.dev/components/glass-control-center
- Category: UI components · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/glass-control-center.json`
- Tags: control-center, liquid-glass, frosted, switch, blur, glass, media, slider

Four tiles of frosted glass over whatever sits behind them: a 2×2 cluster of round switches, a now-playing tile with transport controls, and two tall sliders whose fill rises from the bottom.
The glass is layered rather than a single blur: backdrop blur and saturation, a hairline edge, an inner top highlight and a soft specular light that follows the pointer across the group. Clear lets more of the scene through; Smoke darkens it for busy photographs.
Glass needs something rich behind it. Put it over a photograph, video or a colourful surface; over a flat colour it reads as a plain panel.

### Usage

```tsx
import { GlassControlCenter } from '@/components/sundae/glass-control-center'

<div style={{ backgroundImage: 'url(/hero.jpg)' }}>
  <GlassControlCenter
    tint="clear"
    track={{ title: 'Golden Hour', artist: 'Field Notes', artwork: '/cover.jpg' }}
    onToggle={(id, on) => setSetting(id, on)}
    onVolumeChange={setVolume}
  />
</div>
```

### Props

- `toggles` (`{ id, label, icon, on? }[]`): Round switches in the 2×2 cluster. Defaults to Wi-Fi, Bluetooth, Airplane mode and Focus.
- `track` (`{ title, artist, artwork? }`): Now-playing tile content.
- `brightness / volume` (`number`, default `68 / 42`): Initial slider values, 0–100.
- `onToggle` (`(id, on) => void`): Called when a switch changes.
- `onBrightnessChange / onVolumeChange` (`(v: number) => void`): Called as a slider moves.
- `tint` (`'clear' | 'smoke'`, default `'clear'`): Glass tint.
- `blur` (`number`, default `28`): Backdrop blur in pixels.

### When to use

- Media and device controls over a photograph, video or rich hero.
- Settings quick panels in apps with an expressive background.

### When not to use

- Over flat colour or dense text, where glass adds blur without depth.
- Dense admin settings: use a settings list.

### Accessibility

- Switches are buttons with role="switch" and aria-checked; transport buttons are labelled, play/pause uses aria-pressed.
- Sliders use role="slider" with aria-valuenow and a percentage value text; arrow keys step by 2 (10 with Shift), Home/End jump.
- Text sits on a tint layer so it stays legible over bright photographs; reduced motion removes transitions.