UI kit · Concept N009

Glass that bends what’s behind it.

Switches, sliders and segmented controls made of liquid glass. The room behind this page is live 3D, and the controls on the right change it.

Get the kit See every control

Light

Drift

Gloss

Off

Refraction 1.0×

Bends every glass surface on this page, this one included.

Depth Mid

01 · Controls

Every part, one material.

Each part is a real button, input or dialog underneath, so the keyboard and screen readers work before any glass is added.

Segmented control

A glass lens slides to the choice on a spring. Arrow keys move it.

Switch

HapticsSounds

The thumb turns clear and stretches while you hold it.

Slider

A native range on top, a glass lens underneath.

Buttons

Press any of them: they compress, the sheen brightens, then they let go.

Sheet

Escape, a tap outside or Done closes it, and focus comes back here.

02 · Anatomy

Take one apart.

Every glass surface here is five layers. Switch them off one at a time and watch the tile turn back into a grey box.

RefractionThe rim bends the room like a lens.
Colour splitRed, green and blue bend by different amounts.
FrostBlur and saturation behind a thin tint.
Specular edgeA glint top left, a weaker one bottom right.
DepthAn inner glow and a soft petrol shadow.

SpecimenGlass5 of 5 layers

03 · Install

Two tags. No build step.

01
Copy the kit folder into your site.
02
Add the stylesheet and the script.
03
Put lg classes on real buttons, inputs and dialogs.

Safari and Firefox get the frosted glass without the rim refraction. Reduced transparency gets solid surfaces. Reduced motion gets no springs.

index.html

<link rel="stylesheet" href="kit/liquid-glass.css">
<script src="kit/liquid-glass.js" defer></script>

<div class="lg lg-seg" aria-label="Light">
  <button aria-pressed="true">Noon</button>
  <button>Dusk</button>
</div>
<button class="lg-switch" aria-checked="true"
        aria-label="Drift"></button>

04 · Get the kit

Free, and it already exists.

Glasskit is a concept brand, but the kit on this page is real: it ships as skills/liquid-glass-ui in the Zyqor Studio repository under the MIT licence. The form below shows how a sign-up would work. It sends nothing.