Menu

Component · controls

Liquid glass accordion

Expandable sections.

Three stacked accordion rows with the middle one expanded into a text panel, over zoomed desert ridges.

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 per row; a row that expands into long text switches wholly to frost (one material per body)
Profile
bevel
Bezel (px)
18 (= radius)
Displacement (px)
0.4 × bezel (7)
Blur (px)
3–6 (regular) / 10–16 (expanded, frost)

Geometry. rows 44–48 tall, radius 16–18, gap 8; chevron right

Rules1
  • Rows are separate bodies (8 px gaps), not one glass slab with glass rows inside.
Anatomy4
  • separate glass rows with gaps
  • title 14 semibold
  • chevron
  • expanded body text secondary
States2
  • collapsed
  • expanded (height animates with spring; map regenerates at the end)

Questions

What material is a liquid glass accordion?

Regular per row; a row that expands into long text switches wholly to frost (one material per body) material with a bevel edge profile, in the controls layer. Expandable sections.

How big is a liquid glass accordion?

Rows 44–48 tall, radius 16–18, gap 8; chevron right.

What bezel, displacement and blur does it use?

Bezel 18 (= radius); displacement 0.4 × bezel (7); blur 3–6 (regular) / 10–16 (expanded, frost) (px).

Which states does a liquid glass accordion need?

Collapsed; expanded (height animates with spring; map regenerates at the end).