# Liquid glass page control: spec and references

Source: https://meniscus.site/components/page-control · Updated 2026-10-02

Shows which page of a carousel or photo set is showing, and steps to another. Layer: controls (over content).

Also called: page indicator, pagination dots, dots, carousel indicator, page dots.

| Property | Value |
|---|---|
| Material | regular over a local dim |
| Profile | bevel |
| 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 |
| Bezel (px) | h/2 (11) |
| Displacement (px) | 0.4 × bezel (4.5) |
| Blur (px) | 1–3 |

## Anatomy

- 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

## States

- 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

## Rules

- 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.

## Reference renders

The tool attaches these images; each shows:

- 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. (light)
- A small clear glass capsule of five page dots, the current one stretched into a pill, near the bottom of a night-city picture, on a soft local dim. (dark)

## Use it with your assistant

This spec is what the Meniscus MCP server's `get_spec` tool returns for `page-control`. 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