Menu

Component · controls over content

Liquid glass media controls

Playback controls over media.

Circular playback controls and a scrubber over a procedural scene dimmed toward the bottom.

Copy the prompt

Free

The rules, the spec, the glass code for Web and the checks, in one text.

Works in any AI that can write code.

Or connect your AI once
Material
clear lens with a dim layer under it over bright video
Profile
convex (round buttons) / bevel (bar)
Bezel (px)
20–24 (bar)
Displacement (px)
0.4 × bezel
Blur (px)
1–2

Geometry. play button 56–64 circle, secondary 40–44; scrubber as slider

Rules1
  • Over video always add a subtle dim or gradient scrim for legibility.
Anatomy3
  • round lens buttons
  • scrubber
  • time labels
States3
  • playing
  • paused
  • scrubbing (thumb lens grows)

Questions

What material is a liquid glass media controls?

Clear lens with a dim layer under it over bright video material with a convex (round buttons) / bevel (bar) edge profile, in the controls over content layer. Playback controls over media.

How big is a liquid glass media controls?

Play button 56–64 circle, secondary 40–44; scrubber as slider.

What bezel, displacement and blur does it use?

Bezel 20–24 (bar); displacement 0.4 × bezel; blur 1–2 (px).

Which states does a liquid glass media controls need?

Playing; paused; scrubbing (thumb lens grows).