✦ AI Agent Skill

Liquid Glass
for the Web

An AI agent skill that teaches the full Apple Liquid Glass technique — from Snell's law physics to copy-paste React components. One install, everything your agent needs.

View on GitHub How it works →
$ npx skills add Zettersten/skills@liquid-glass
Liquid Glass · Refraction · CSS · SVG
Get Started
liquid-glass
CSS + SVG · iOS 26

⚡ Full refraction effect visible in Chrome/Chromium. Other browsers show frosted blur.

What's included

Everything to implement Liquid Glass

From first principles to production-ready components — this skill has it all baked in.

🧪
Physics Engine
Zero-dependency Python script generates displacement maps using Snell's law refraction or Signed Distance Fields. No pip installs needed.
🪟
3 HTML Templates
Standalone pill button, frosted card with chromatic aberration, and Apple-style tab bar. Open in Chrome and see the effect immediately.
⚛️
React Component
TypeScript-first LiquidGlass component with unique filter IDs via useId(), all props controllable, browser detection and fallback built in.
📐
Physics Deep-Dive
Full Snell's law derivation, all 4 surface functions (squircle, circle, concave, lip), SDF pipeline with smoothstep — all in references/physics.md.
🌈
Chromatic Aberration
Full step-by-step guide for splitting R/G/B channels into separate displacement passes — the technique that makes glass edges shimmer like a prism.
🌐
Browser Compat Guide
Complete browser support matrix, isolation:isolate requirement explained, graceful degradation CSS, and performance guidelines for GPU compositing.

The technique

How Liquid Glass works

SVG displacement maps + CSS backdrop-filter combine to simulate real light refraction through curved glass.

<!-- Four-layer composition -->
<div class="glass">
  <!-- Layer 0: Refraction filter -->
  <div class="glass__refract"></div>
  <!-- Layer 1: Semi-transparent tint -->
  <div class="glass__tint"></div>
  <!-- Layer 2: Specular rim highlight -->
  <div class="glass__specular"></div>
  <!-- Layer 3: Your content -->
  <div class="glass__content">...</div>
</div>

/* CSS */
.glass__refract {
  position: absolute; inset: 0;
  /* Chrome only: SVG refraction via url() reference */
  backdrop-filter: blur(12px) url(#liquid-glass) brightness(1.05);
  isolation: isolate; /* Required! */
}
.glass__specular {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    inset 0 -1px 0 rgba(255,255,255,0.15);
}
<!-- Hidden SVG — paste anywhere in <body> -->
<svg width="0" height="0" style="position:absolute;overflow:hidden">
  <defs>
    <filter id="liquid-glass"
            color-interpolation-filters="sRGB"
            x="0%" y="0%" width="100%" height="100%">

      <!-- Displacement map image -->
      <!-- R=X offset, G=Y offset, 128=neutral, 255=max positive -->
      <feImage result="dispMap"
        x="0" y="0" width="300" height="56"
        preserveAspectRatio="none"
        href="data:image/png;base64,..."
      />

      <!-- Apply refraction: negative scale = magnifying (Apple-style) -->
      <feDisplacementMap
        in="SourceGraphic" in2="dispMap"
        scale="-35"
        xChannelSelector="R"
        yChannelSelector="G"
      />
    </filter>
  </defs>
</svg>
# Zero-dependency displacement map generator
# No pip install needed — uses Python stdlib only

# SDF mode (fast, great results):
python scripts/generate-displacement-map.py \
  --width 300 --height 56 --radius 28 \
  --mode sdf --datauri

# Snell's Law physics mode (precise glass simulation):
python scripts/generate-displacement-map.py \
  --width 300 --height 56 --radius 28 \
  --mode snell --surface squircle --n2 1.5 \
  --output map.png

# Displacement encoding:
# R = X offset  (128 = neutral, 255 = max right, 0 = max left)
# G = Y offset  (128 = neutral, 255 = max down,  0 = max up )
# actual_px = (channel / 255 - 0.5) × scale

Skill contents

What you get

8 files. Everything an AI agent needs to implement Liquid Glass from scratch.

📄
liquid-glass/SKILL.md
Trigger conditions, 4-layer composition pattern, workflow decision tree, key parameters, browser compat callout. Loaded when the skill fires.
🐍
liquid-glass/scripts/generate-displacement-map.py
Zero-dependency Python 3 script. SDF mode (roundedRectSDF + smoothStep) and Snell's law mode (4 surface functions). Outputs PNG + base64 data URI.
📐
liquid-glass/references/physics.md
Full Snell's law derivation, all 4 surface functions (squircle, circle, concave, lip), SDF pipeline with smoothstep, parameter effects table, common pitfalls.
🔧
liquid-glass/references/filter-pipeline.md
Every SVG filter primitive used, chromatic aberration step-by-step, browser support matrix, isolation:isolate requirement, performance guidelines.
🪟
liquid-glass/assets/templates/glass-button.html
300×56 pill CTA button. Self-contained, vivid demo background. Open in Chrome to see refraction live.
🃏
liquid-glass/assets/templates/glass-card.html
360×220 frosted card with full chromatic aberration (3 feDisplacementMap passes for R/G/B with different scale values).
📱
liquid-glass/assets/templates/glass-pill-navbar.html
Apple-style 3-item tab bar with nested inner-glass active state — two levels of glass depth.
⚛️
liquid-glass/assets/templates/LiquidGlass.tsx
React 18+ TypeScript component. Unique filter IDs via useId(), all visual params as props, browser detection + fallback built in. Zero external dependencies.

Compatibility

Browser support

Full refraction requires Chrome. All others get graceful frosted blur — no `@supports` needed.

🟢 Chrome / Edge
backdrop-filter blur✓
SVG url() filter✓
Full refraction✓
🟡 Firefox
backdrop-filter blur✓
SVG url() filter✗
Frosted blur fallback✓
🟡 Safari
backdrop-filter blur✓
SVG url() filter✗
Frosted blur fallback✓