intensity · 0.3
subtlewhisper specular · suitable for editorial folds where the glass is barely visible.
liquid glass· primitive 77 · ~30 fragment instructions · 60 fps on integrated GPUs
specular highlights on the brand's glass — pointer-tracked, idle-zero
Apple's Liquid Glass — the visionOS / iOS 26 material — pairs a soft refractive backdrop with a pointer-tracked specular layer. <GlassLayer> (primitive 41) handles the backdrop with CSS only. <LiquidGlass> adds the specular layer through a tiny WebGL fragment shader (~30 instructions). it only repaints when the pointer moves, so idle CPU is zero. prefers-reduced-motion: reduce falls back to a CSS radial-gradient by construction.
as of
00 · livedial intensity, tint, variant, posture · move the pointer over the stage · the shader tracks · idle CPU is zerodial the glass
as of
01 · materialGlassLayer + LiquidGlass · two primitives, one physical modelthe brand's glass is two layers
| layer | primitive | tech | responsibility | state |
|---|---|---|---|---|
| backdrop | GlassLayer · 41 | CSS · backdrop-filter + tints | blur, saturation, tint, posture | idle/active/refused |
| specular | LiquidGlass · 77 | WebGL fragment shader (CSS fallback) | pointer-tracked highlight | default/fallback/reduced-motion |
why two layers and not one
the backdrop is the same on every page (and CSS-only, so it's SSR-safe and free at runtime). the specular is opt-in, mounts a tiny WebGL context, and only paints when the pointer moves. coupling the two would force every Card on every chapter to carry the WebGL cost. separation lets the operator pay for specular only on the surfaces that earn it.as of
02 · specimenthree intensities · same pointer mathhover to see the highlight track
intensity · 0.6
defaultthe brand default · enough presence that the highlight reads · enough restraint that it never costs attention.
intensity · 0.9
prominentceremony only · drop cards, founder-letters, the saturday grid · use when the moment earns the cost.
as of
03 · fallbackforceFallback · prefers-reduced-motion · WebGL absentthe brand survives every degraded path
forceFallback · CSS radial
same component, forceFallback set to true. no WebGL context is created · the highlight is a centred CSS radial-gradient that does not move.
GlassLayer · backdrop only
the SSR-safe baseline · no specular, no WebGL, no JavaScript. every chapter that wants the glass gets this layer for free.
| condition | render path | cost |
|---|---|---|
| WebGL available · pointer moves | full specular | ~30 frag instructions per pointer move |
| WebGL available · pointer idle | last-paint static | 0 CPU · 0 GPU |
prefers-reduced-motion: reduce | CSS radial fallback | 0 JavaScript · 0 GPU |
forceFallback={true} | CSS radial fallback | 0 JavaScript · 0 GPU |
| WebGL absent | CSS radial fallback | 0 JavaScript · 0 GPU |
as of
04 · covenantaccessibility + motion + idle-zeroGPU effects do not break the brand promise
why this is not a particle field
the easy thing is to ship a noisy WebGL background that justifies the dependency. the disciplined thing is a single specular term, only painted when the pointer asks for it, with a CSS fallback that satisfies every reduced-motion policy. ZERO ships the disciplined version.| gate | posture |
|---|---|
| idle CPU | 0 (no rAF loop) |
| SSR safety | full (component returns inert host) |
prefers-reduced-motion | fall back to CSS |
| WebGL absent | fall back to CSS |
| aria-hidden canvas | true |
| contrast on text | unaffected (canvas under content) |
idle-zeroa11y-safe
◆ lg002a