Menu

Component · controls (over map content)

Liquid glass map callout

Names the selected place on a map, floating above its pin.

Glass place callouts on a light procedural street map: a two-line callout above a selected purple pin, a one-line callout above a coffee pin, flat category pins, a river, a blue route and a yellow road.

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
Profile
bevel
Bezel (px)
h/2 (18 at 36) · card: = radius (16)
Displacement (px)
0.4 × bezel (7 · 6.5)
Blur (px)
4–6 (map labels are busy content)

Geometry. one line: capsule 32–36 tall (36), radius h/2, padding 7 leading / 8 trailing; two lines: a rounded card radius 14–16 (16), padding 10, at most ~260 wide. 8 px above the pin's head; an optional tail 14–16 × 7 in the callout's own fill bridges that gap and points at the pin. Inside: a solid category glyph (a 22 circle in the capsule, a 32 tile radius 6 in the card: concentric, 16 − 10), the name 13–14 weight 600, a flat rating chip 20 tall, an optional detail line 12

Rules5
  • Pins stay flat map content; only the callout is glass.
  • One callout at a time, for the selected place; other places show pins or plain map labels, never a field of glass labels.
  • One line is a capsule; a second line turns it into a radius-16 card, never a taller capsule.
  • Over busy map labels keep regular glass at the top of its blur range, so the street names under it read as texture, not text.
  • Category colours carry white glyphs at 3:1 or more (#D9622B, #7A4FD6, #2E9D5B, #D93D4A, #2B6BFF).
Anatomy7
  • glass capsule, or a rounded card for two lines
  • flat category glyph on its solid colour
  • name
  • flat rating chip (white 52 % light / 18 % dark, amber star #A35F00 / #FFC24D)
  • optional detail line (category, hours, distance)
  • optional tail
  • flat pin below: a solid category-colour teardrop, white glyph, 2 px white ring
States3
  • rest
  • selected: the pin grows from 26 to 34 and the callout grows out of it (§9 open)
  • press: opens the place sheet

Questions

What material is a liquid glass map callout?

Regular material with a bevel edge profile, in the controls (over map content) layer. Names the selected place on a map, floating above its pin.

How big is a liquid glass map callout?

One line: capsule 32–36 tall (36), radius h/2, padding 7 leading / 8 trailing; two lines: a rounded card radius 14–16 (16), padding 10, at most ~260 wide. 8 px above the pin's head; an optional tail 14–16 × 7 in the callout's own fill bridges that gap and points at the pin. Inside: a solid category glyph (a 22 circle in the capsule, a 32 tile radius 6 in the card: concentric, 16 − 10), the name 13–14 weight 600, a flat rating chip 20 tall, an optional detail line 12.

What bezel, displacement and blur does it use?

Bezel h/2 (18 at 36) · card: = radius (16); displacement 0.4 × bezel (7 · 6.5); blur 4–6 (map labels are busy content) (px).

Which states does a liquid glass map callout need?

Rest; selected: the pin grows from 26 to 34 and the callout grows out of it (§9 open); press: opens the place sheet.