Component · controls over content

Liquid glass media controls

Playback controls over media.

Also called player, audio player, now playing, transport

Circular playback controls and a scrubber over a procedural scene dimmed toward the bottom.
Circular playback controls and a scrubber over a procedural scene dimmed toward the bottom. (light)
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.
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. (dark)

Spec

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.