Component · controls over content (the live camera)

Liquid glass shutter

The camera's capture cluster: shutter, last capture, camera flip, zoom and mode.

Camera controls over a bright dune viewfinder: a zoom capsule with a selected 1× lens, a photo or video switch, a clear ring around a white shutter disc, a round thumbnail and a flip button, on a soft dark local dim.

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
lens (clear) over a local dim
Profile
convex (ring, side buttons) · bevel (zoom and mode capsules, their pills)
Bezel (px)
ring: = radius (40)
Displacement (px)
0.5 × radius (20)
Blur (px)
0.5–1

Geometry. shutter: a clear ring 76–84 (80) around a solid white disc 60–66 (64; red #E5484D in video); side buttons 48–56 circles (52) 48–56 px either side of the ring, the thumbnail a flat 42 photo circle inside one; above them a mode capsule 32–36 tall (36) with Photo / Video, and above that a zoom capsule 36–40 tall (40) with three flat chips 32–36 wide (0.5, 1×, 2), each track inset 4 with a lens pill on the selected option; 12–16 px between rows; labels 12.5–13.5 weight 600–700, white

Rules4
  • Clear glass over a live camera needs a local dim behind the cluster: raise it until the white labels reach 4.5:1 over the brightest frame (§10, at least 35 %).
  • The disc is solid, not glass; the ring is the lens around it.
  • Chips and mode labels are flat; only the selected pill in each track is a lens (the moving indicator).
  • Glyphs and labels are white in both themes; the cluster keeps ≥ 8 px between its separate bodies.
Anatomy6
  • a local dim behind the whole cluster: black 50–55 % over bright scenes (30 % over dark), held at full strength across the whole cluster and feathered only outside it; raise it until every white label passes 4.5:1, and give a top row of controls its own dim
  • zoom capsule: flat chips, a lens pill on the selected one, which shows its unit (1×)
  • mode capsule: Photo / Video, a lens pill on the current mode
  • shutter: a clear lens ring around a solid disc
  • thumbnail button: a flat photo circle inside a lens
  • flip button: a lens with a flat white glyph
States4
  • rest
  • press: the disc shrinks to 0.86 while the ring grows 1.05 and its rim brightens
  • video: the disc turns red; recording: it morphs into a 28 px rounded square
  • zoom or mode change: the pill slides with a spring

Questions

What material is a liquid glass shutter?

Lens (clear) over a local dim material with a convex (ring, side buttons) · bevel (zoom and mode capsules, their pills) edge profile, in the controls over content (the live camera) layer. The camera's capture cluster: shutter, last capture, camera flip, zoom and mode.

How big is a liquid glass shutter?

Shutter: a clear ring 76–84 (80) around a solid white disc 60–66 (64; red #E5484D in video); side buttons 48–56 circles (52) 48–56 px either side of the ring, the thumbnail a flat 42 photo circle inside one; above them a mode capsule 32–36 tall (36) with Photo / Video, and above that a zoom capsule 36–40 tall (40) with three flat chips 32–36 wide (0.5, 1×, 2), each track inset 4 with a lens pill on the selected option; 12–16 px between rows; labels 12.5–13.5 weight 600–700, white.

What bezel, displacement and blur does it use?

Bezel ring: = radius (40); displacement 0.5 × radius (20); blur 0.5–1 (px).

Which states does a liquid glass shutter need?

Rest; press: the disc shrinks to 0.86 while the ring grows 1.05 and its rim brightens; video: the disc turns red; recording: it morphs into a 28 px rounded square; zoom or mode change: the pill slides with a spring.