Writing · 2026
The interface is two layers, and only one of them is glass. Content — photos, documents, messages — sits at the bottom and fills the screen. Navigation and controls form “a distinct functional layer” above it, and everything in that upper layer is one of eight objects. (HIG) Learn the eight and the material stops being a look you apply and becomes a vocabulary you choose from.
That is the whole reason the list below is a list. The eight objects share one material and one set of rules, and the rules are easier to see side by side than in prose: which ones carry text, which ones carry colour, which ones move when you touch them, and which one is not an object at all. The rows are built the way designeer.xyz builds its galleries — an 18-pixel tile, a name, a dot, a one-line description — because a row that short is the only shape that lets eight of them be compared at a glance. Open one and the control itself is there to operate: every demo below is the same engine this site uses in the other posts, drawing into a canvas, with real DOM controls on top of it so the keyboard and a screen reader work as usual.
Drag the panel with the pointer, or focus it and use the arrow keys.
Drag the panel across the page, then tap the heart.
The largest object in the set, and the one that sets the rules for the rest: content sits inside it, controls ride on top of it, and the whole plate lifts off the page so the document underneath keeps reading as the subject. It is also where the material is easiest to over-use — Apple's own limit is that a surface carries an action or two, not a toolbar, because glass on glass has nothing left to refract.
Now Playing, a Maps place card, a Notes quick note.
Press and hold. The capsule widens and thins under the finger, and springs back on release.
Press and hold the button, then let go.
Press feedback is the cheapest way to make glass feel like an object. The capsule grows a little wider and a little shorter under the finger and springs back on release, and the rim highlight brightens with it. Because the movement is in the material rather than in the glyph, it survives being placed over a photograph, where a shadow would not. Only the background carries colour — tinting the symbol as well is what makes a control look like a web button again.
A primary action, the one tinted control in a view.
Focus a button and the arrow keys walk the row, the way a toolbar should.
Click the buttons, or focus one and use ← →.
This is the component the whole two-layer split was designed for. The document scrolls underneath and stays legible because the bar only bends it; the bar stays reachable because it is pinned to the thumb's corner. Groups are separated by a spacer rather than a divider — two capsules with a gap read as two objects, while one long capsule with a line through it reads as one object with a scratch on it. Every button is a real button, so Tab and the arrow keys move through them in order.
Safari's bottom bar, Photos' edit tools, Mail's reply row.
The indicator is a shape of its own, so it blends into the capsule at either end instead of sliding under it.
Click between the three tabs and watch the indicator travel.
The moving indicator is the entire point, and it is a morph, not a cross-fade. Two states that are the same object in different places should travel, because a fade says “a different thing appeared” and a move says “the thing you picked went over there.” The indicator is a separate shape in the same scene as the bar, which is what lets it blend into the capsule at either end instead of sliding underneath it.
Music's Listen / Browse / Library, the App Store's Today row.
The panel grows out of the button that opened it and shrinks back into it.
Open the menu, pick an item, then open it again.
A menu has a source, and the material should show it: the panel grows out of the button that opened it and shrinks back into it when it closes, so the eye never has to guess where it came from. That is why a glass menu stays anchored to its trigger instead of centring itself on screen. Items are plain text on the glass — no nested panels, no second material — and the whole popup is one shape, so its corner radius, its highlight and its shadow all agree.
Share sheets, overflow menus, long-press context menus.
The knob thickens and lifts into a lens while it is held, so the finger does not hide it.
Drag the knob, or focus it and press ← →.
A slider is the one control where the finger covers the thing it is moving, so the glass does two jobs at once. The knob thickens and lifts while it is held, so you can still see where it is and what it is pointing at; and the filled track reports the value without a label or a read-out. The lift is a lens, not a scale — the knob magnifies the track under it, which is the same trick the material uses everywhere else.
Brightness, volume, a scrubber, Markup's brush size.
The thumb stretches along its direction of travel and settles back into a circle.
Click the switch a few times, or press Space on it.
A switch is binary and has to be readable from across the room, so the colour carries the state and the glass only carries the affordance. The thumb stretches along its direction of travel and settles back into a circle when it arrives, which is what tells you it moved rather than blinked — the same morph rule as the tab indicator, applied to the smallest possible distance.
Settings rows, Airplane Mode, Focus, Wi-Fi.
Glass belongs to the layer that floats above the content. The document stays the main thing on screen; controls appear when they are needed and go back to where they came from. A plain blur has a boundary you can see, and the eye finds it immediately. Stacking several radii, each covering a slightly narrower band, removes the edge altogether.
The toolbar above sits directly on this text with no shadow, no rule and no colour change to separate them — which is the whole reason progressive blur exists.
Switch between the four strengths and watch the top edge.
The only entry here that is not an object. A plain blur has a boundary you can see, and the eye finds it immediately; a progressive blur stacks several radii, each covering a slightly narrower band, so there is no edge to catch the eye at all. It is what lets a toolbar sit directly on a document with no shadow, no line and no colour change to separate them — and it is the one piece of the material that works just as well without any refraction at all.
The top of any scrolling iOS view, Safari's bar as you scroll.
The motion is one property, and it is the same one designeer.xyz uses in its own accordion: a grid row declared 0fr and animated to 1fr, which the browser resolves against the panel's content height at every frame. (MDN) So the row gets a real content height with no measuring, no max-height guess and no resize observer — a demo can change height while it is open and the row follows it. The one thing it needs is a child allowed to be shorter than its content; without min-height:0 the track takes the full content height, the two states become identical, and the row snaps open with no animation at all.
<button class="gal-head" aria-expanded="false" aria-controls="gal-p-1"> <span class="gal-tile">…</span> <span class="gal-name">Toolbar</span> <span class="gal-desc">Floats over a scrolling document.</span></button><div class="gal-panel" id="gal-p-1" role="region"> <div class="gal-panel__in"> <!-- the live demo --> </div></div>.gal-panel{ display:grid; grid-template-rows:0fr; /* the closed height, with no measurement */ transition:grid-template-rows .36s cubic-bezier(.23,1,.32,1);}.gal-row.is-open .gal-panel{grid-template-rows:1fr}/* The child that tracks 0fr -> 1fr has to be allowed to shrink past its content, or the grid hands the track the content height and nothing animates at all. */.gal-panel__in{min-height:0;overflow:hidden}The curve is the other half. cubic-bezier(.23,1,.32,1) leaves the origin almost vertically and then spends most of its duration arriving — the height is nearly full before the motion reads as slow, which is what makes an expansion feel like something being unfolded rather than something growing. The panel's contents then fade in on a shorter curve of their own, so the demo arrives just after the row has finished opening instead of being squeezed by it.
Two more decisions are about cost rather than feel. Only one row is open at a time: two live scenes side by side is twice the GPU work for a comparison nobody is making, so opening a row closes the one above it. And every stage parks its render loop when it scrolls out of view — the engine watches its own canvas with an IntersectionObserver, which matters more here than anywhere else on the site, because eight demos in one column would otherwise mean eight shaders running while the reader is still in the first paragraph.
Apple is unusually specific about the negative space, and it is the half of the guidance that a component library cannot enforce for you. Glass is a signal that something is interactive and floating; put it where neither of those is true and it stops meaning anything. (WWDC25 219)
The other limit is not in the guidelines but in the browser. Refraction here is a per-pixel displacement of the content behind the glass, which on the web means either an SVG filter over a live layer or a shader over a rendered one. Both are the most expensive thing a page can ask for, so the count is the design decision: a toolbar, a tab bar and the one surface that is actually open — not every card in a feed.