Menu

Component · controls (over content)

Liquid glass page control

Shows which page of a carousel or photo set is showing, and steps to another.

A small clear glass capsule of five page dots, the current one stretched into a pill, near the bottom of a dune picture, on a soft 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
regular over a local dim
Profile
bevel
Bezel (px)
h/2 (11)
Displacement (px)
0.4 × bezel (4.5)
Blur (px)
1–3

Geometry. capsule 20–24 tall (22), radius h/2, padding 4; flat dots 6–7 px (7), 8 px apart (a 15 px slot each); the current dot stretches into a 16 × 7 pill; centred 12–16 px above the bottom of the photo or page; past about eight pages the end dots shrink to 4–5 px

Rules3
  • Dots are white over photos in both themes: current 100 %, others 62 %, each at least 3:1 against the capsule over the brightest frame.
  • The dim sits under the glass, so the glass refracts it; it is never a fill laid over the dots.
  • Shape carries the state: the current page is a pill, not only a brighter dot.
Anatomy4
  • small glass capsule
  • a local dim under it: black 50 % light / 30 % dark, feathered 8–10 px past the capsule
  • flat white dots
  • the current dot as a pill
States3
  • rest
  • page change: the pill moves with a spring and the dot it leaves shrinks back
  • press and drag: the capsule grows 1.1 and scrubs through pages

Questions

What material is a liquid glass page control?

Regular over a local dim material with a bevel edge profile, in the controls (over content) layer. Shows which page of a carousel or photo set is showing, and steps to another.

How big is a liquid glass page control?

Capsule 20–24 tall (22), radius h/2, padding 4; flat dots 6–7 px (7), 8 px apart (a 15 px slot each); the current dot stretches into a 16 × 7 pill; centred 12–16 px above the bottom of the photo or page; past about eight pages the end dots shrink to 4–5 px.

What bezel, displacement and blur does it use?

Bezel h/2 (11); displacement 0.4 × bezel (4.5); blur 1–3 (px).

Which states does a liquid glass page control need?

Rest; page change: the pill moves with a spring and the dot it leaves shrinks back; press and drag: the capsule grows 1.1 and scrubs through pages.