# Liquid glass media controls: spec and references

Source: https://meniscus.site/components/media-controls · Updated 2026-09-27

Playback controls over media. Layer: controls over content.

Also called: player, audio player, now playing, transport.

| Property | Value |
|---|---|
| Material | clear lens with a dim layer under it over bright video |
| Profile | convex (round buttons) / squircle (bar) |
| Geometry | play button 56–64 circle, secondary 40–44; scrubber as slider |
| Bezel (px) | radius |
| Displacement (px) | ≤ 0.5 × radius |
| Blur (px) | 0–2 |

## Anatomy

- round lens buttons
- scrubber
- time labels

## States

- playing
- paused
- scrubbing (thumb lens grows)

## Rules

- Over video always add a subtle dim or gradient scrim for legibility.

## References

![Circular playback controls and a scrubber over a procedural scene dimmed toward the bottom.](https://meniscus.site/gallery/media-controls-light-studio.webp)

![Round clear play and skip buttons above a scrubber with a white thumb, over a zoomed night skyline darkened toward the bottom by a scrim.](https://meniscus.site/gallery/media-controls-dark-studio.webp)

## Use it with your assistant

This spec is what the Meniscus MCP server's `get_component_spec` tool returns for `media-controls`. Materials, colours, light and composition rules that apply to every component are in the [liquid glass guide](https://meniscus.site/liquid-glass). Connect: `claude mcp add --transport http meniscus https://meniscus.site/mcp` — setup for every client: https://meniscus.site/docs