diff --git a/registry/blocks/liquid-glass-context-menu/lib/liquid-glass.iife.js b/registry/blocks/liquid-glass-context-menu/lib/liquid-glass.iife.js
new file mode 100644
index 000000000..ae5210629
--- /dev/null
+++ b/registry/blocks/liquid-glass-context-menu/lib/liquid-glass.iife.js
@@ -0,0 +1,1048 @@
+var LiquidGlass = (() => {
+  var E = Object.defineProperty;
+  var D = Object.getOwnPropertyDescriptor;
+  var z = Object.getOwnPropertyNames;
+  var N = Object.prototype.hasOwnProperty;
+  var O = (m, e) => {
+      for (var t in e) E(m, t, { get: e[t], enumerable: !0 });
+    },
+    H = (m, e, t, r) => {
+      if ((e && typeof e == "object") || typeof e == "function")
+        for (let n of z(e))
+          !N.call(m, n) &&
+            n !== t &&
+            E(m, n, { get: () => e[n], enumerable: !(r = D(e, n)) || r.enumerable });
+      return m;
+    };
+  var I = (m) => H(E({}, "__esModule", { value: !0 }), m);
+  var Y = {};
+  O(Y, {
+    CSS_PROPERTY_MAP: () => _,
+    DEFAULTS: () => w,
+    GlassRendererGPU: () => y,
+    LiquidGlassCanvas: () => R,
+  });
+  var w = {
+      blurAmount: 0,
+      refraction: 0.69,
+      chromAberration: 0.05,
+      edgeHighlight: 0.05,
+      specular: 0,
+      fresnel: 1,
+      distortion: 0,
+      cornerRadius: 65,
+      zRadius: 40,
+      opacity: 1,
+      saturation: 0,
+      tintStrength: 0,
+      brightness: 0,
+      shadowOpacity: 0.3,
+      shadowSpread: 10,
+      shadowOffsetY: 1,
+      bevelMode: 0,
+    },
+    _ = {
+      "--lg-blur": "blurAmount",
+      "--lg-refraction": "refraction",
+      "--lg-chrom-aberration": "chromAberration",
+      "--lg-edge-highlight": "edgeHighlight",
+      "--lg-specular": "specular",
+      "--lg-fresnel": "fresnel",
+      "--lg-distortion": "distortion",
+      "--lg-corner-radius": "cornerRadius",
+      "--lg-z-radius": "zRadius",
+      "--lg-opacity": "opacity",
+      "--lg-saturation": "saturation",
+      "--lg-tint": "tintStrength",
+      "--lg-brightness": "brightness",
+      "--lg-shadow-opacity": "shadowOpacity",
+      "--lg-shadow-spread": "shadowSpread",
+      "--lg-shadow-offset-y": "shadowOffsetY",
+      "--lg-bevel-mode": "bevelMode",
+    },
+    L = 6,
+    T = 20;
+  var q = `// Blit shader - copy texture with UV transform
+
+struct BlitUniforms {
+  scale: vec2f,
+  offset: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: BlitUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var tex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) uv: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  out.uv = pos * 0.5 + 0.5;
+  out.position = vec4f(pos, 0.0, 1.0);
+  return out;
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  return textureSample(tex, texSampler, in.uv * u.scale + u.offset);
+}
+`,
+    k = `// Blur shader - 9-tap Gaussian blur (single direction)
+
+struct BlurUniforms {
+  dir: vec2f,
+  _pad: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: BlurUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var tex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) uv: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  out.uv = pos * 0.5 + 0.5;
+  out.position = vec4f(pos, 0.0, 1.0);
+  return out;
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  var s = textureSample(tex, texSampler, in.uv) * 0.227027;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 1.0) * 0.194594;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 1.0) * 0.194594;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 2.0) * 0.121622;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 2.0) * 0.121622;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 3.0) * 0.054054;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 3.0) * 0.054054;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 4.0) * 0.016216;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 4.0) * 0.016216;
+  return s;
+}
+`,
+    W = `// Glass shader - the core liquid glass effect
+
+struct GlassUniforms {
+  center: vec2f,
+  size: vec2f,
+  res: vec2f,
+  radius: f32,
+  pad: f32,
+  refract: f32,
+  chroma: f32,
+  edgeHL: f32,
+  spec: f32,
+  fresnel: f32,
+  distort: f32,
+  alpha: f32,
+  sat: f32,
+  tint: f32,
+  zRadius: f32,
+  brightness: f32,
+  shadowAlpha: f32,
+  shadowSpread: f32,
+  shadowOffY: f32,
+  bevelMode: f32,
+  _pad: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: GlassUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var bgTex: texture_2d<f32>;
+@group(0) @binding(3) var blurTex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) localPx: vec2f,
+  @location(1) screenUV: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  let total = u.size + vec2f(u.pad * 2.0);
+  out.localPx = pos * total;
+  let px = u.center + pos * total;
+  out.screenUV = vec2f(px.x / u.res.x, 1.0 - px.y / u.res.y);
+  var ndc = (px / u.res) * 2.0 - 1.0;
+  ndc.y = -ndc.y;
+  out.position = vec4f(ndc, 0.0, 1.0);
+  return out;
+}
+
+// Rounded-rect signed distance
+fn rrSDF(p: vec2f, b: vec2f, r: f32) -> f32 {
+  let q = abs(p) - b + vec2f(r);
+  return min(max(q.x, q.y), 0.0) + length(max(q, vec2f(0.0))) - r;
+}
+
+// Bevel height field
+fn bevelHeight(d: f32, zR: f32) -> f32 {
+  if (d <= 0.0) { return 0.0; }
+  if (d >= zR) { return zR; }
+  return sqrt(d * (2.0 * zR - d));
+}
+
+fn hash(p: vec2f) -> f32 {
+  return fract(sin(dot(p, vec2f(127.1, 311.7))) * 43758.5453);
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  let half_ = u.size * 0.5;
+  let r = min(u.radius, min(half_.x, half_.y));
+  let sdf = rrSDF(in.localPx, half_, r);
+
+  // Anti-aliased mask
+  let mask = 1.0 - smoothstep(-1.5, 0.5, sdf);
+
+  let maxD = min(half_.x, half_.y);
+  let inside = -sdf;
+  let edge = smoothstep(maxD * 0.35, 0.0, inside);
+
+  // Surface normal via bevel height field
+  let zR = u.zRadius;
+  let e = 2.0;
+  let dC = inside;
+  let dR = -rrSDF(in.localPx + vec2f(e, 0.0), half_, r);
+  let dL = -rrSDF(in.localPx - vec2f(e, 0.0), half_, r);
+  let dU = -rrSDF(in.localPx + vec2f(0.0, e), half_, r);
+  let dD = -rrSDF(in.localPx - vec2f(0.0, e), half_, r);
+  let hC = bevelHeight(dC, zR);
+  let hR = bevelHeight(dR, zR);
+  let hL = bevelHeight(dL, zR);
+  let hU = bevelHeight(dU, zR);
+  let hD = bevelHeight(dD, zR);
+  let hGrad = vec2f(hR - hL, hU - hD) / (2.0 * e);
+  let N = normalize(vec3f(-hGrad, 1.0));
+
+  let depth = smoothstep(0.0, zR, inside);
+
+  // Refraction - compute both modes and select
+  let pxToUV = vec2f(1.0, -1.0) / u.res;
+  let ior = 1.5;
+  let refrPow = 1.0 - 1.0 / ior;
+  let thickness = hC * 2.0;
+  let thickNorm = thickness / max(zR * 2.0, 1.0);
+
+  // Biconvex mode
+  let exitRefr = hGrad * refrPow;
+  let entryRefr = hGrad * refrPow;
+  let throughRefr = entryRefr * thickNorm * 0.5;
+  var refrPxBiconvex = (exitRefr + entryRefr + throughRefr) * u.refract * 30.0;
+  let centerDir = -in.localPx / max(half_, vec2f(1.0));
+  refrPxBiconvex += centerDir * u.refract * 4.0 * depth;
+
+  // Dome mode
+  let refrPxDome = -in.localPx * u.refract * depth * 0.35;
+
+  // Select based on bevel mode
+  let refrPx = select(refrPxBiconvex, refrPxDome, u.bevelMode >= 0.5);
+  let refr = refrPx * pxToUV;
+
+  // Micro-distortion noise
+  let ns = in.localPx * 0.08;
+  let absPxToUV = vec2f(1.0) / u.res;
+  let micro = (vec2f(hash(ns), hash(ns + vec2f(37.0))) - 0.5) * u.distort * 4.0 * absPxToUV;
+
+  // Chromatic aberration
+  let caS = u.chroma * 18.0 * (edge * 0.7 + 0.3) * 2.0;
+  let caD = N.xy * caS * pxToUV;
+  let base = in.screenUV + refr + micro;
+
+  // Sample textures (must be in uniform control flow)
+  let sharpR = textureSample(bgTex, texSampler, base + caD).r;
+  let sharpG = textureSample(bgTex, texSampler, base).g;
+  let sharpB = textureSample(bgTex, texSampler, base - caD).b;
+  let sharp = vec3f(sharpR, sharpG, sharpB);
+
+  let blurR = textureSample(blurTex, texSampler, base + caD).r;
+  let blurG = textureSample(blurTex, texSampler, base).g;
+  let blurB = textureSample(blurTex, texSampler, base - caD).b;
+  let blur = vec3f(blurR, blurG, blurB);
+
+  // Edge-weighted blur mix
+  let edgeMix = 1.0 - edge * 0.15;
+  var col = mix(sharp, blur, edgeMix);
+
+  // Brightness
+  col *= 1.0 + u.brightness;
+
+  // Saturation
+  let lum = dot(col, vec3f(0.299, 0.587, 0.114));
+  col = mix(vec3f(lum), col, 1.0 + u.sat);
+
+  // Cool glass tint
+  col = mix(col, col * vec3f(0.92, 0.95, 1.05), u.tint);
+  col *= 1.0 + 0.06 * depth;
+
+  // Fresnel
+  let fres = pow(1.0 - abs(N.z), 4.0) * u.fresnel;
+
+  // Specular highlights (multi-light Blinn-Phong)
+  let V = vec3f(0.0, 0.0, 1.0);
+  let L1 = normalize(vec3f(0.4, 0.7, 1.0));
+  let H1 = normalize(L1 + V);
+  let sp1 = pow(max(dot(N, H1), 0.0), 90.0);
+  let L2 = normalize(vec3f(-0.3, -0.5, 1.0));
+  let H2 = normalize(L2 + V);
+  let sp2 = pow(max(dot(N, H2), 0.0), 50.0) * 0.3;
+  let L3 = normalize(vec3f(0.1, 0.3, 1.0));
+  let spB = pow(max(dot(N, L3), 0.0), 6.0) * 0.1;
+  let L4 = normalize(vec3f(0.0, 0.9, 0.4));
+  let H4 = normalize(L4 + V);
+  let sp4 = pow(max(dot(N, H4), 0.0), 120.0) * 0.6;
+  let totalSpec = (sp1 + sp2 + spB + sp4) * u.spec;
+
+  // Inner border / stroke highlight
+  let borderWidth = 1.5;
+  let innerStroke = smoothstep(-borderWidth - 1.0, -borderWidth, sdf)
+                  * (1.0 - smoothstep(-1.0, 0.0, sdf));
+  let topBias = 0.5 + 0.5 * (-in.localPx.y / half_.y);
+  let innerStrokeFinal = innerStroke * (0.4 + 0.6 * topBias);
+
+  // Edge highlight & inner glow
+  let rim = edge * u.edgeHL * 0.22;
+  let innerGlow = smoothstep(5.0, 0.0, -sdf) * u.edgeHL * 0.15;
+
+  // Environment-like reflection (fake)
+  let envRefl = (N.y * 0.5 + 0.5) * fres * 0.08;
+
+  // Composite glass effect
+  var fin = col;
+  fin += vec3f(totalSpec);
+  fin += vec3f(rim + innerGlow);
+  fin += vec3f(innerStrokeFinal * u.edgeHL * 0.55);
+  fin += vec3f(envRefl);
+  fin = mix(fin, vec3f(1.0), fres * 0.2);
+
+  // Shadow calculation (outside panel)
+  let sdfShadow = rrSDF(in.localPx - vec2f(0.0, u.shadowOffY), half_, r);
+  let shadowD = max(sdfShadow - 1.0, 0.0);
+  let spread = max(u.shadowSpread, 1.0);
+  let falloff = 1.0 / (spread * spread);
+  let outerShadow = exp(-shadowD * shadowD * falloff) * 0.65;
+  let contactShadow = exp(-shadowD * 0.08 / max(spread * 0.04, 0.01)) * 0.35;
+  let shadow = (outerShadow + contactShadow) * u.shadowAlpha;
+
+  // Select between shadow (outside) and glass (inside)
+  let isOutside = sdf > 0.0;
+  let finalColor = select(fin, vec3f(0.0), isOutside);
+  let finalAlpha = select(mask * u.alpha, shadow, isOutside);
+
+  return vec4f(finalColor, finalAlpha);
+}
+`,
+    y = class {
+      canvas;
+      device = null;
+      context = null;
+      format = "bgra8unorm";
+      blitPipeline = null;
+      blurPipeline = null;
+      glassPipeline = null;
+      quadBuffer = null;
+      panelBuffer = null;
+      blitUniformBuffer = null;
+      blurUniformBuffer = null;
+      glassUniformBuffer = null;
+      sampler = null;
+      targetCache = new Map();
+      activeTargets = null;
+      bgTexture = null;
+      bgTextureView = null;
+      width = 0;
+      height = 0;
+      _initPromise = null;
+      _initialized = !1;
+      constructor() {
+        ((this.canvas = document.createElement("canvas")),
+          (this.canvas.style.display = "none"),
+          document.body.appendChild(this.canvas));
+      }
+      async init() {
+        return this._initPromise
+          ? this._initPromise
+          : ((this._initPromise = this._doInit()), this._initPromise);
+      }
+      async _doInit() {
+        if (!navigator.gpu) return (console.warn("WebGPU not supported"), !1);
+        let e = await navigator.gpu.requestAdapter();
+        return e
+          ? ((this.device = await e.requestDevice()),
+            this.device
+              ? ((this.context = this.canvas.getContext("webgpu")),
+                this.context
+                  ? ((this.format = navigator.gpu.getPreferredCanvasFormat()),
+                    this.context.configure({
+                      device: this.device,
+                      format: this.format,
+                      alphaMode: "premultiplied",
+                    }),
+                    this._initPipelines(),
+                    this._initBuffers(),
+                    (this._initialized = !0),
+                    !0)
+                  : (console.warn("Failed to get WebGPU context"), !1))
+              : (console.warn("Failed to get WebGPU device"), !1))
+          : (console.warn("No WebGPU adapter found"), !1);
+      }
+      get initialized() {
+        return this._initialized;
+      }
+      _initPipelines() {
+        let e = this.device;
+        this.sampler = e.createSampler({
+          magFilter: "linear",
+          minFilter: "linear",
+          addressModeU: "clamp-to-edge",
+          addressModeV: "clamp-to-edge",
+        });
+        let t = e.createShaderModule({ code: q }),
+          r = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.blitPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [r] }),
+          vertex: {
+            module: t,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: { module: t, entryPoint: "fragmentMain", targets: [{ format: "rgba8unorm" }] },
+          primitive: { topology: "triangle-strip" },
+        });
+        let n = e.createShaderModule({ code: k }),
+          i = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.blurPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [i] }),
+          vertex: {
+            module: n,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: { module: n, entryPoint: "fragmentMain", targets: [{ format: "rgba8unorm" }] },
+          primitive: { topology: "triangle-strip" },
+        });
+        let s = e.createShaderModule({ code: W }),
+          l = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+              { binding: 3, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.glassPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [l] }),
+          vertex: {
+            module: s,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: {
+            module: s,
+            entryPoint: "fragmentMain",
+            targets: [
+              {
+                format: this.format,
+                blend: {
+                  color: {
+                    srcFactor: "src-alpha",
+                    dstFactor: "one-minus-src-alpha",
+                    operation: "add",
+                  },
+                  alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+                },
+              },
+            ],
+          },
+          primitive: { topology: "triangle-strip" },
+        });
+      }
+      _initBuffers() {
+        let e = this.device;
+        ((this.quadBuffer = e.createBuffer({
+          size: 32,
+          usage: GPUBufferUsage.VERTEX,
+          mappedAtCreation: !0,
+        })),
+          new Float32Array(this.quadBuffer.getMappedRange()).set([-1, -1, 1, -1, -1, 1, 1, 1]),
+          this.quadBuffer.unmap(),
+          (this.panelBuffer = e.createBuffer({
+            size: 32,
+            usage: GPUBufferUsage.VERTEX,
+            mappedAtCreation: !0,
+          })),
+          new Float32Array(this.panelBuffer.getMappedRange()).set([
+            -0.5, -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5,
+          ]),
+          this.panelBuffer.unmap(),
+          (this.blitUniformBuffer = e.createBuffer({
+            size: 16,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })),
+          (this.blurUniformBuffer = e.createBuffer({
+            size: 16,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })),
+          (this.glassUniformBuffer = e.createBuffer({
+            size: 112,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })));
+      }
+      resize(e, t) {
+        if (!(this.width === e && this.height === t)) {
+          ((this.width = e), (this.height = t));
+          for (let r of this.targetCache.values()) this._freeTargetSet(r);
+          (this.targetCache.clear(), (this.activeTargets = null));
+        }
+      }
+      uploadAndBlur(e, t, r, n, i, s) {
+        if (!this._initialized || !this.device || !this._setActiveSize(n, i)) return;
+        let l = this.device,
+          a = this.width,
+          u = this.height,
+          o = this.activeTargets,
+          d = document.createElement("canvas");
+        ((d.width = a),
+          (d.height = u),
+          d.getContext("2d").drawImage(e, -t, -r),
+          (!this.bgTexture || this.bgTexture.width !== a || this.bgTexture.height !== u) &&
+            (this.bgTexture && this.bgTexture.destroy(),
+            (this.bgTexture = l.createTexture({
+              size: [a, u],
+              format: "rgba8unorm",
+              usage:
+                GPUTextureUsage.TEXTURE_BINDING |
+                GPUTextureUsage.COPY_DST |
+                GPUTextureUsage.RENDER_ATTACHMENT,
+            })),
+            (this.bgTextureView = this.bgTexture.createView())),
+          l.queue.copyExternalImageToTexture(
+            { source: d, flipY: !0 },
+            { texture: this.bgTexture },
+            [a, u],
+          ));
+        let f = l.createCommandEncoder();
+        this._blitPass(f, this.bgTextureView, o.bg.view, a, u, 1, 1, 0, 0);
+        let h = o.blurA.w,
+          b = o.blurA.h;
+        if ((this._blitPass(f, o.bg.view, o.blurA.view, h, b, 1, 1, 0, 0), s > 0)) {
+          let g = s * 2.5;
+          for (let p = 0; p < L; p++)
+            (this._blurPass(f, o.blurA.view, o.blurB.view, h, b, g / h, 0),
+              this._blurPass(f, o.blurB.view, o.blurA.view, h, b, 0, g / b));
+        }
+        l.queue.submit([f.finish()]);
+      }
+      _blitPass(e, t, r, n, i, s, l, a, u) {
+        let o = this.device;
+        o.queue.writeBuffer(this.blitUniformBuffer, 0, new Float32Array([s, l, a, u]));
+        let d = o.createBindGroup({
+            layout: this.blitPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.blitUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: t },
+            ],
+          }),
+          c = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: r,
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (c.setPipeline(this.blitPipeline),
+          c.setBindGroup(0, d),
+          c.setVertexBuffer(0, this.quadBuffer),
+          c.setViewport(0, 0, n, i, 0, 1),
+          c.draw(4),
+          c.end());
+      }
+      _blurPass(e, t, r, n, i, s, l) {
+        let a = this.device;
+        a.queue.writeBuffer(this.blurUniformBuffer, 0, new Float32Array([s, l, 0, 0]));
+        let u = a.createBindGroup({
+            layout: this.blurPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.blurUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: t },
+            ],
+          }),
+          o = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: r,
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (o.setPipeline(this.blurPipeline),
+          o.setBindGroup(0, u),
+          o.setVertexBuffer(0, this.quadBuffer),
+          o.setViewport(0, 0, n, i, 0, 1),
+          o.draw(4),
+          o.end());
+      }
+      renderGlassPanel(e, t, r, n) {
+        if (!this._initialized || !this.device || !this.context) return;
+        let i = this.device,
+          s = this.width,
+          l = this.height,
+          a = this.activeTargets,
+          u = new Float32Array([
+            s * 0.5,
+            l * 0.5,
+            t * n,
+            r * n,
+            s,
+            l,
+            e.cornerRadius * n,
+            T * n,
+            e.refraction,
+            e.chromAberration,
+            e.edgeHighlight,
+            e.specular,
+            e.fresnel,
+            e.distortion,
+            e.opacity,
+            e.saturation,
+            e.tintStrength,
+            e.zRadius * n,
+            e.brightness,
+            e.shadowOpacity,
+            e.shadowSpread * n,
+            e.shadowOffsetY * n,
+            e.bevelMode,
+            0,
+            0,
+            0,
+            0,
+            0,
+          ]);
+        i.queue.writeBuffer(this.glassUniformBuffer, 0, u);
+        let o = i.createBindGroup({
+            layout: this.glassPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.glassUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: a.bg.view },
+              { binding: 3, resource: a.blurA.view },
+            ],
+          }),
+          d = i.createCommandEncoder(),
+          c = d.beginRenderPass({
+            colorAttachments: [
+              {
+                view: this.context.getCurrentTexture().createView(),
+                loadOp: "load",
+                storeOp: "store",
+              },
+            ],
+          });
+        (c.setPipeline(this.glassPipeline),
+          c.setBindGroup(0, o),
+          c.setVertexBuffer(0, this.panelBuffer),
+          c.setViewport(0, 0, s, l, 0, 1),
+          c.draw(4),
+          c.end(),
+          i.queue.submit([d.finish()]));
+      }
+      clear() {
+        if (!this._initialized || !this.device || !this.context) return;
+        let e = this.device.createCommandEncoder(),
+          t = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: this.context.getCurrentTexture().createView(),
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (t.setViewport(0, 0, this.width, this.height, 0, 1),
+          t.end(),
+          this.device.queue.submit([e.finish()]));
+      }
+      destroy() {
+        for (let e of this.targetCache.values()) this._freeTargetSet(e);
+        (this.targetCache.clear(),
+          this.bgTexture && this.bgTexture.destroy(),
+          this.quadBuffer && this.quadBuffer.destroy(),
+          this.panelBuffer && this.panelBuffer.destroy(),
+          this.blitUniformBuffer && this.blitUniformBuffer.destroy(),
+          this.blurUniformBuffer && this.blurUniformBuffer.destroy(),
+          this.glassUniformBuffer && this.glassUniformBuffer.destroy(),
+          this.device?.destroy(),
+          this.canvas.remove());
+      }
+      _setActiveSize(e, t) {
+        if (e <= 0 || t <= 0) return !1;
+        ((this.width = e),
+          (this.height = t),
+          (this.canvas.width < e || this.canvas.height < t) &&
+            ((this.canvas.width = Math.max(this.canvas.width, e)),
+            (this.canvas.height = Math.max(this.canvas.height, t)),
+            this.context?.configure({
+              device: this.device,
+              format: this.format,
+              alphaMode: "premultiplied",
+            })));
+        let r = `${e}x${t}`,
+          n = this.targetCache.get(r);
+        return (
+          n ||
+            ((n = {
+              bg: this._makeTarget(e, t),
+              blurA: this._makeTarget(e, t),
+              blurB: this._makeTarget(e, t),
+            }),
+            this.targetCache.set(r, n)),
+          (this.activeTargets = n),
+          !0
+        );
+      }
+      _makeTarget(e, t) {
+        let r = this.device.createTexture({
+          size: [e, t],
+          format: "rgba8unorm",
+          usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
+        });
+        return { texture: r, view: r.createView(), w: e, h: t };
+      }
+      _freeTarget(e) {
+        e && e.texture.destroy();
+      }
+      _freeTargetSet(e) {
+        (this._freeTarget(e.bg), this._freeTarget(e.blurA), this._freeTarget(e.blurB));
+      }
+    };
+  var R = class {
+    canvas;
+    ctx;
+    renderer;
+    sceneCanvas;
+    sceneCtx;
+    drawElementImage;
+    _initPromise;
+    _initialized = !1;
+    constructor(e) {
+      ((this.canvas = e),
+        (this.ctx = e.getContext("2d")),
+        (this.renderer = new y()),
+        (this.sceneCanvas = document.createElement("canvas")),
+        (this.sceneCtx = this.sceneCanvas.getContext("2d")));
+      let t = this.ctx;
+      ((this.drawElementImage = t.drawElementImage?.bind(t) ?? t.drawElement?.bind(t) ?? null),
+        (this._initPromise = this._initWebGPU()));
+    }
+    async _initWebGPU() {
+      try {
+        return (await this.renderer.init())
+          ? ((this._initialized = !0), console.log("LiquidGlass: WebGPU renderer initialized"), !0)
+          : (console.error("LiquidGlass: WebGPU not available"), !1);
+      } catch (e) {
+        return (console.error("LiquidGlass: WebGPU init failed", e), !1);
+      }
+    }
+    get isReady() {
+      return this._initialized;
+    }
+    async waitForInit() {
+      return this._initPromise;
+    }
+    render() {
+      let e = this.canvas.width,
+        t = this.canvas.height;
+      if (e === 0 || t === 0 || !this.drawElementImage || !this._initialized) return;
+      this.ctx.clearRect(0, 0, e, t);
+      let r = window.devicePixelRatio || 1,
+        n = this.canvas.getBoundingClientRect(),
+        i = Array.from(this.canvas.children),
+        s = Array.from(this.canvas.querySelectorAll(".liquid-glass")),
+        l = new Set(s);
+      i.length === 0 &&
+        !this.__lg_warn_empty &&
+        (console.warn("LiquidGlass: No children found inside the canvas to render."),
+        (this.__lg_warn_empty = !0));
+      for (let a of i)
+        if (!l.has(a)) {
+          let u = a,
+            o = this._getElementPosition(u, n);
+          if (o.w <= 0 || o.h <= 0) continue;
+          let d = o.x * r,
+            c = o.y * r;
+          try {
+            let f = this.drawElementImage(a, d, c);
+            f && (u.style.transform = f.toString());
+          } catch (f) {
+            a.__lg_error_logged ||
+              (console.warn(
+                `LiquidGlass: Failed to draw background element ${a.tagName}.${a.className}:`,
+                f.message || f,
+              ),
+              (a.__lg_error_logged = !0));
+          }
+        }
+      for (let a of s)
+        try {
+          this._renderGlassElement(a, n, r);
+        } catch (u) {
+          a.__lg_error_logged_glass ||
+            (console.error(
+              `LiquidGlass: Failed to render glass effect for ${a.tagName}.${a.className}:`,
+              u.message || u,
+            ),
+            (a.__lg_error_logged_glass = !0));
+        }
+    }
+    renderGlassElements() {
+      let e = this.canvas.width,
+        t = this.canvas.height;
+      if (e === 0 || t === 0 || !this.drawElementImage || !this._initialized) return;
+      let r = window.devicePixelRatio || 1,
+        n = this.canvas.getBoundingClientRect(),
+        i = this.canvas.querySelectorAll(".liquid-glass");
+      for (let s of i) this._renderGlassElement(s, n, r);
+    }
+    _parseCSSLength(e, t) {
+      return !e || e === "auto"
+        ? NaN
+        : ((e = e.trim()),
+          e.startsWith("calc(")
+            ? this._parseCalc(e, t)
+            : e.endsWith("%")
+              ? (parseFloat(e) / 100) * t
+              : parseFloat(e) || 0);
+    }
+    _parseCalc(e, t) {
+      let r = e.match(/calc\((.+)\)/);
+      if (!r) return 0;
+      let n = r[1].trim(),
+        i = n.match(/(.+)\s*\+\s*(.+)/),
+        s = n.match(/(.+)\s*-\s*(.+)/);
+      if (s) {
+        let l = this._parseCSSLength(s[1].trim(), t),
+          a = this._parseCSSLength(s[2].trim(), t);
+        return l - a;
+      }
+      if (i) {
+        let l = this._parseCSSLength(i[1].trim(), t),
+          a = this._parseCSSLength(i[2].trim(), t);
+        return l + a;
+      }
+      return this._parseCSSLength(n, t);
+    }
+    _parseTransform(e, t, r) {
+      let n = 0,
+        i = 0;
+      if (!e || e === "none") return { tx: n, ty: i };
+      let s = e.match(/translate\(\s*([^,)]+)(?:\s*,\s*([^)]+))?\s*\)/);
+      s &&
+        ((n = this._parseTranslateValue(s[1], t)),
+        (i = s[2] ? this._parseTranslateValue(s[2], r) : 0));
+      let l = e.match(/translateX\(\s*([^)]+)\s*\)/);
+      l && (n = this._parseTranslateValue(l[1], t));
+      let a = e.match(/translateY\(\s*([^)]+)\s*\)/);
+      a && (i = this._parseTranslateValue(a[1], r));
+      let u = e.match(/translate3d\(\s*([^,]+)\s*,\s*([^,]+)\s*,\s*[^)]+\s*\)/);
+      return (
+        u && ((n = this._parseTranslateValue(u[1], t)), (i = this._parseTranslateValue(u[2], r))),
+        { tx: n, ty: i }
+      );
+    }
+    _parseTranslateValue(e, t) {
+      return ((e = e.trim()), e.endsWith("%") ? (parseFloat(e) / 100) * t : parseFloat(e) || 0);
+    }
+    _getElementPosition(e, t) {
+      let r = getComputedStyle(e),
+        n = parseFloat(getComputedStyle(this.canvas).width) || this.canvas.width || 1536,
+        i = parseFloat(getComputedStyle(this.canvas).height) || this.canvas.height || 1024,
+        s = e.getBoundingClientRect(),
+        l = s.width || parseFloat(r.width) || 0,
+        a = s.height || parseFloat(r.height) || 0,
+        u = 0,
+        o = 0,
+        d = e.style,
+        c = d.left || r.left,
+        f = d.right || r.right,
+        h = d.top || r.top,
+        b = d.bottom || r.bottom,
+        g = this._parseCSSLength(c, n),
+        p = this._parseCSSLength(f, n),
+        v = this._parseCSSLength(h, i),
+        S = this._parseCSSLength(b, i),
+        P = parseFloat(r.marginLeft) || 0,
+        x = parseFloat(r.marginRight) || 0,
+        M = parseFloat(r.marginTop) || 0,
+        A = parseFloat(r.marginBottom) || 0,
+        G = !isNaN(g),
+        U = !isNaN(p);
+      G && U && g === 0 && p === 0
+        ? (u = (n - l) / 2)
+        : (G && U) || G
+          ? (u = g + P)
+          : U && (u = n - l - p - x);
+      let B = !isNaN(v),
+        C = !isNaN(S);
+      B && C && v === 0 && S === 0
+        ? (o = (i - a) / 2)
+        : (B && C) || B
+          ? (o = v + M)
+          : C && (o = i - a - S - A);
+      let { tx: V, ty: F } = this._parseTransform(r.transform, l, a);
+      return ((u += V), (o += F), { x: u, y: o, w: l, h: a });
+    }
+    _renderGlassElement(e, t, r) {
+      if (!this.drawElementImage) return;
+      let n = this._getConfigFromCSS(e),
+        i = this._getElementPosition(e, t),
+        s = i.x,
+        l = i.y,
+        a = i.w,
+        u = i.h,
+        o = s * r,
+        d = l * r,
+        c = a * r,
+        f = u * r,
+        h = T * r,
+        b = o - h,
+        g = d - h,
+        p = c + h * 2,
+        v = f + h * 2;
+      this._captureRegion(b, g, p, v);
+      let S = Math.round(p),
+        P = Math.round(v);
+      (this.renderer.clear(),
+        this.renderer.uploadAndBlur(this.sceneCanvas, 0, 0, S, P, n.blurAmount),
+        this.renderer.renderGlassPanel(n, a, u, r),
+        this.ctx.drawImage(this.renderer.canvas, 0, 0, p, v, b, g, p, v));
+      try {
+        let x = this._drawGlassElementContent(e, o, d);
+        x && (e.style.transform = x.toString());
+      } catch (x) {
+        e.__lg_error_logged ||
+          (console.warn(
+            `LiquidGlass: Failed to draw glass element ${e.tagName}.${e.className}:`,
+            x,
+          ),
+          (e.__lg_error_logged = !0));
+      }
+    }
+    _drawGlassElementContent(e, t, r) {
+      if (!this.drawElementImage) return;
+      let n = this._suppressGlassChrome(e);
+      try {
+        return this.drawElementImage(e, t, r);
+      } finally {
+        this._restoreInlineStyles(e, n);
+      }
+    }
+    _suppressGlassChrome(e) {
+      let t = new Map(),
+        r = [
+          "background",
+          "backgroundColor",
+          "backgroundImage",
+          "borderColor",
+          "boxShadow",
+          "filter",
+          "outlineColor",
+        ];
+      for (let n of r) t.set(n, e.style[n]);
+      return (
+        (e.style.background = "transparent"),
+        (e.style.backgroundColor = "transparent"),
+        (e.style.backgroundImage = "none"),
+        (e.style.borderColor = "transparent"),
+        (e.style.boxShadow = "none"),
+        (e.style.filter = "none"),
+        (e.style.outlineColor = "transparent"),
+        t
+      );
+    }
+    _restoreInlineStyles(e, t) {
+      for (let [r, n] of t) e.style[r] = n;
+    }
+    _captureRegion(e, t, r, n) {
+      let i = Math.round(r),
+        s = Math.round(n);
+      ((this.sceneCanvas.width !== i || this.sceneCanvas.height !== s) &&
+        ((this.sceneCanvas.width = i), (this.sceneCanvas.height = s)),
+        (this.sceneCtx.fillStyle = "#ffffff"),
+        this.sceneCtx.fillRect(0, 0, i, s),
+        this.sceneCtx.drawImage(this.canvas, e, t, r, n, 0, 0, i, s));
+    }
+    _getConfigFromCSS(e) {
+      let t = getComputedStyle(e),
+        r = { ...w };
+      for (let [n, i] of Object.entries(_)) {
+        let s = t.getPropertyValue(n).trim();
+        if (s) {
+          let l = parseFloat(s);
+          isNaN(l) || (r[i] = l);
+        }
+      }
+      return r;
+    }
+    destroy() {
+      this.renderer.destroy();
+    }
+  };
+  return I(Y);
+})();
diff --git a/registry/blocks/liquid-glass-context-menu/liquid-glass-context-menu.html b/registry/blocks/liquid-glass-context-menu/liquid-glass-context-menu.html
new file mode 100644
index 000000000..fb3165a04
--- /dev/null
+++ b/registry/blocks/liquid-glass-context-menu/liquid-glass-context-menu.html
@@ -0,0 +1,375 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Liquid Glass Context Menu</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="lib/liquid-glass.iife.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #0a0218;
+        overflow: hidden;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #three-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        z-index: 0;
+      }
+      #glass-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        z-index: 1;
+      }
+
+      /* ── Glass Panel ── */
+      .menu-panel {
+        position: absolute;
+        width: 260px;
+        height: 380px;
+        background: rgba(255, 255, 255, 0.06);
+        --lg-blur: 0.22;
+        --lg-refraction: 0.6;
+        --lg-corner-radius: 16;
+        --lg-z-radius: 38;
+        --lg-specular: 0.2;
+        --lg-fresnel: 0.9;
+        --lg-edge-highlight: 0.1;
+        --lg-chrom-aberration: 0.05;
+        --lg-shadow-opacity: 0.35;
+        --lg-shadow-spread: 14;
+        --lg-shadow-offset-y: 4;
+        --lg-saturation: 0.25;
+      }
+      #glass-menu {
+        top: 200px;
+        left: 300px;
+      }
+
+      /* ── Text Overlay ── */
+      .text-overlay {
+        position: absolute;
+        z-index: 2;
+        pointer-events: none;
+      }
+      .menu-text {
+        width: 260px;
+        height: 380px;
+        display: flex;
+        flex-direction: column;
+        padding: 10px 0;
+      }
+      #text-menu {
+        top: 200px;
+        left: 300px;
+      }
+
+      .menu-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 10px 18px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #fff;
+        cursor: default;
+      }
+      .menu-item svg {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+        stroke: rgba(255, 255, 255, 0.7);
+        fill: none;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .menu-sep {
+        height: 1px;
+        margin: 6px 18px;
+        background: rgba(255, 255, 255, 0.1);
+      }
+      .menu-footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 18px;
+        margin-top: auto;
+      }
+      .menu-footer-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+        font-size: 11px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.55);
+      }
+      .menu-footer-item svg {
+        width: 20px;
+        height: 20px;
+        stroke: rgba(255, 255, 255, 0.55);
+        fill: none;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .menu-kbd {
+        margin-left: auto;
+        font-size: 12px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.3);
+        font-variant-numeric: tabular-nums;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="liquid-glass-context-menu"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="8"
+      data-root="true"
+    >
+      <canvas id="three-canvas" width="1920" height="1080"></canvas>
+
+      <canvas id="glass-canvas" layoutsubtree width="1920" height="1080">
+        <div id="glass-menu" class="menu-panel liquid-glass"></div>
+      </canvas>
+
+      <div id="text-menu" class="text-overlay menu-text">
+        <div class="menu-item">
+          <svg viewBox="0 0 24 24">
+            <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
+            <polyline points="16 6 12 2 8 6" />
+            <line x1="12" y1="2" x2="12" y2="15" />
+          </svg>
+          <span>Share</span>
+        </div>
+        <div class="menu-item">
+          <svg viewBox="0 0 24 24">
+            <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
+          </svg>
+          <span>Add to Bookmarks</span>
+        </div>
+        <div class="menu-item">
+          <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg>
+          <span>Add Bookmark to...</span>
+        </div>
+        <div class="menu-sep"></div>
+        <div class="menu-item">
+          <svg viewBox="0 0 24 24">
+            <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+            <line x1="9" y1="3" x2="9" y2="21" />
+          </svg>
+          <span>New Tab</span>
+          <span class="menu-kbd">&#8984;T</span>
+        </div>
+        <div class="menu-item">
+          <svg viewBox="0 0 24 24">
+            <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+            <path d="M9 3v18" />
+            <path d="M14 9l3 3-3 3" />
+          </svg>
+          <span>New Private Tab</span>
+          <span class="menu-kbd">&#8679;&#8984;N</span>
+        </div>
+        <div class="menu-sep"></div>
+        <div class="menu-footer">
+          <div class="menu-footer-item">
+            <svg viewBox="0 0 24 24">
+              <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
+            </svg>
+            <span>Bookmarks</span>
+          </div>
+          <div class="menu-footer-item">
+            <svg viewBox="0 0 24 24">
+              <rect x="3" y="3" width="7" height="7" />
+              <rect x="14" y="3" width="7" height="7" />
+              <rect x="3" y="14" width="7" height="7" />
+              <rect x="14" y="14" width="7" height="7" />
+            </svg>
+            <span>All Tabs</span>
+          </div>
+        </div>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      var W = 1920,
+        H = 1080,
+        DURATION = 8;
+
+      /* ── Three.js Aurora Shader ─────────────────────────────────────── */
+      var vs = "varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); }";
+      var fs = [
+        "precision highp float;",
+        "varying vec2 vUv;",
+        "uniform float uTime;",
+        "vec3 mod289(vec3 x){return x-floor(x*(1.0/289.0))*289.0;}",
+        "vec4 mod289(vec4 x){return x-floor(x*(1.0/289.0))*289.0;}",
+        "vec4 permute(vec4 x){return mod289(((x*34.0)+1.0)*x);}",
+        "vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-0.85373472095314*r;}",
+        "float snoise(vec3 v){",
+        "  const vec2 C=vec2(1.0/6.0,1.0/3.0);const vec4 D=vec4(0.0,0.5,1.0,2.0);",
+        "  vec3 i=floor(v+dot(v,C.yyy));vec3 x0=v-i+dot(i,C.xxx);",
+        "  vec3 g=step(x0.yzx,x0.xyz);vec3 l=1.0-g;",
+        "  vec3 i1=min(g.xyz,l.zxy);vec3 i2=max(g.xyz,l.zxy);",
+        "  vec3 x1=x0-i1+C.xxx;vec3 x2=x0-i2+C.yyy;vec3 x3=x0-D.yyy;",
+        "  i=mod289(i);",
+        "  vec4 p=permute(permute(permute(i.z+vec4(0.0,i1.z,i2.z,1.0))+i.y+vec4(0.0,i1.y,i2.y,1.0))+i.x+vec4(0.0,i1.x,i2.x,1.0));",
+        "  float n_=0.142857142857;vec3 ns=n_*D.wyz-D.xzx;",
+        "  vec4 j=p-49.0*floor(p*ns.z*ns.z);vec4 x_=floor(j*ns.z);vec4 y_=floor(j-7.0*x_);",
+        "  vec4 x=x_*ns.x+ns.yyyy;vec4 y=y_*ns.x+ns.yyyy;vec4 h=1.0-abs(x)-abs(y);",
+        "  vec4 b0=vec4(x.xy,y.xy);vec4 b1=vec4(x.zw,y.zw);",
+        "  vec4 s0=floor(b0)*2.0+1.0;vec4 s1=floor(b1)*2.0+1.0;",
+        "  vec4 sh=-step(h,vec4(0.0));",
+        "  vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;",
+        "  vec3 p0=vec3(a0.xy,h.x);vec3 p1=vec3(a0.zw,h.y);vec3 p2=vec3(a1.xy,h.z);vec3 p3=vec3(a1.zw,h.w);",
+        "  vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));",
+        "  p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;",
+        "  vec4 m=max(0.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);m=m*m;",
+        "  return 42.0*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));",
+        "}",
+        "void main(){",
+        "  vec2 uv=vUv;float ar=1920.0/1080.0;vec2 p=vec2(uv.x*ar,uv.y);float t=uTime*0.06;",
+        "  float wx=snoise(vec3(p*1.4,t*0.5))*0.2;float wy=snoise(vec3(p*1.4+100.0,t*0.5))*0.2;",
+        "  vec2 wp=p+vec2(wx,wy);",
+        "  vec3 base=mix(vec3(0.10,0.02,0.22),vec3(0.04,0.10,0.25),smoothstep(0.0,1.0,uv.x*0.6+uv.y*0.4));",
+        "  float angle=0.65;float ridgeUv=dot(wp,vec2(cos(angle),sin(angle)));",
+        "  float ridge1=sin(ridgeUv*8.0+t*2.0+snoise(vec3(wp*0.8,t))*1.5);",
+        "  float ridge2=sin(ridgeUv*5.5-t*1.4+snoise(vec3(wp*1.2+50.0,t*0.7))*2.0);",
+        "  float ridge3=sin(ridgeUv*12.0+t*3.0+snoise(vec3(wp*0.6+80.0,t*0.4))*1.0);",
+        "  float crease1=pow(abs(ridge1),0.35)*sign(ridge1)*0.5+0.5;",
+        "  float crease2=pow(abs(ridge2),0.4)*sign(ridge2)*0.5+0.5;",
+        "  float crease3=pow(abs(ridge3),0.5)*sign(ridge3)*0.5+0.5;",
+        "  vec3 warm=mix(vec3(0.9,0.4,0.08),vec3(0.95,0.65,0.15),crease1);",
+        "  float warmZone=smoothstep(0.15,0.75,uv.x+uv.y*0.4+snoise(vec3(uv*2.0,t))*0.3);",
+        "  vec3 cool=mix(vec3(0.02,0.4,0.55),vec3(0.25,0.7,0.82),crease2);",
+        "  float coolZone=smoothstep(0.25,0.85,1.2-uv.x+uv.y*0.5+snoise(vec3(uv*2.0+40.0,t*0.8))*0.25);",
+        "  vec3 hot=mix(vec3(0.8,0.1,0.4),vec3(0.6,0.08,0.65),crease3);",
+        "  float hotZone=smoothstep(0.5,0.9,snoise(vec3(uv*2.5+20.0,t*0.6))*0.5+0.5);",
+        "  vec3 col=base;",
+        "  col=mix(col,warm,warmZone*0.75*smoothstep(0.3,0.7,crease1));",
+        "  col=mix(col,cool,coolZone*0.65*smoothstep(0.2,0.65,crease2));",
+        "  col=mix(col,hot,hotZone*0.5*smoothstep(0.35,0.8,crease3));",
+        "  float edgeGlow=pow(1.0-abs(ridge1),6.0)*0.4+pow(1.0-abs(ridge2),5.0)*0.25;",
+        "  col+=edgeGlow*mix(warm,cool,uv.x)*0.8;",
+        "  col*=1.0-pow(abs(ridge1),4.0)*0.15;",
+        "  float vig=1.0-smoothstep(0.5,1.5,length((uv-0.5)*vec2(1.3,1.0)));",
+        "  col*=0.65+vig*0.5;",
+        "  float luma=dot(col,vec3(0.299,0.587,0.114));col=mix(vec3(luma),col,1.5);",
+        "  col=clamp(col,0.0,1.0);col=pow(col,vec3(0.9));",
+        "  gl_FragColor=vec4(col,1.0);",
+        "}",
+      ].join("\n");
+
+      /* ── Three.js Setup ─────────────────────────────────────────────── */
+      var threeCanvas = document.getElementById("three-canvas");
+      var renderer = new THREE.WebGLRenderer({ canvas: threeCanvas, alpha: false });
+      renderer.setSize(W, H, false);
+      renderer.setPixelRatio(1);
+
+      var scene = new THREE.Scene();
+      var camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+      var uniforms = { uTime: { value: 0 } };
+      var mat = new THREE.ShaderMaterial({
+        vertexShader: vs,
+        fragmentShader: fs,
+        uniforms: uniforms,
+      });
+      var quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), mat);
+      scene.add(quad);
+
+      /* ── Glass Canvas ───────────────────────────────────────────────── */
+      var glassCanvas = document.getElementById("glass-canvas");
+      var ctx = glassCanvas.getContext("2d");
+      var lg = new LiquidGlass.LiquidGlassCanvas(glassCanvas);
+
+      function renderGlass(time) {
+        uniforms.uTime.value = time;
+        renderer.render(scene, camera);
+        ctx.clearRect(0, 0, W, H);
+        ctx.drawImage(threeCanvas, 0, 0, W, H);
+        lg.renderGlassElements();
+      }
+
+      /* ── GSAP Timeline ──────────────────────────────────────────────── */
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var gm = document.getElementById("glass-menu");
+      var tm = document.getElementById("text-menu");
+
+      /* Diagonal drift: top-left to bottom-right, then back */
+      tl.fromTo(
+        [gm, tm],
+        { left: 260, top: 160 },
+        { left: 1380, top: 160, duration: 4, ease: "sine.inOut" },
+        0,
+      );
+      tl.fromTo([gm, tm], { top: 160 }, { top: 540, duration: 4, ease: "power2.inOut" }, 0);
+
+      /* Return sweep */
+      tl.to([gm, tm], { left: 260, duration: 4, ease: "sine.inOut" }, 4);
+      tl.to([gm, tm], { top: 160, duration: 4, ease: "power1.inOut" }, 4);
+
+      /* Gentle vertical oscillation on top of the drift */
+      tl.fromTo(
+        [gm, tm],
+        { top: "+=0" },
+        { top: "+=60", duration: 1.8, ease: "sine.inOut", yoyo: true, repeat: 3 },
+        0,
+      );
+
+      /* Duration driver */
+      tl.to({ v: 0 }, { v: 1, duration: DURATION, ease: "none" }, 0);
+
+      tl.eventCallback("onUpdate", function () {
+        renderGlass(tl.time());
+      });
+
+      window.__timelines["liquid-glass-context-menu"] = tl;
+
+      setTimeout(function () {
+        renderGlass(0);
+      }, 0);
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/liquid-glass-context-menu/registry-item.json b/registry/blocks/liquid-glass-context-menu/registry-item.json
new file mode 100644
index 000000000..4e09287d0
--- /dev/null
+++ b/registry/blocks/liquid-glass-context-menu/registry-item.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "liquid-glass-context-menu",
+  "type": "hyperframes:block",
+  "title": "Liquid Glass Context Menu",
+  "description": "Frosted glass context menu panel drifting over an aurora shader background",
+  "stability": "experimental",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 8,
+  "tags": ["liquid-glass-html-in-canvas", "webgpu"],
+  "files": [
+    {
+      "path": "liquid-glass-context-menu.html",
+      "target": "compositions/liquid-glass-context-menu.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.png"
+  }
+}
diff --git a/registry/blocks/liquid-glass-media-controls/lib/liquid-glass.iife.js b/registry/blocks/liquid-glass-media-controls/lib/liquid-glass.iife.js
new file mode 100644
index 000000000..ae5210629
--- /dev/null
+++ b/registry/blocks/liquid-glass-media-controls/lib/liquid-glass.iife.js
@@ -0,0 +1,1048 @@
+var LiquidGlass = (() => {
+  var E = Object.defineProperty;
+  var D = Object.getOwnPropertyDescriptor;
+  var z = Object.getOwnPropertyNames;
+  var N = Object.prototype.hasOwnProperty;
+  var O = (m, e) => {
+      for (var t in e) E(m, t, { get: e[t], enumerable: !0 });
+    },
+    H = (m, e, t, r) => {
+      if ((e && typeof e == "object") || typeof e == "function")
+        for (let n of z(e))
+          !N.call(m, n) &&
+            n !== t &&
+            E(m, n, { get: () => e[n], enumerable: !(r = D(e, n)) || r.enumerable });
+      return m;
+    };
+  var I = (m) => H(E({}, "__esModule", { value: !0 }), m);
+  var Y = {};
+  O(Y, {
+    CSS_PROPERTY_MAP: () => _,
+    DEFAULTS: () => w,
+    GlassRendererGPU: () => y,
+    LiquidGlassCanvas: () => R,
+  });
+  var w = {
+      blurAmount: 0,
+      refraction: 0.69,
+      chromAberration: 0.05,
+      edgeHighlight: 0.05,
+      specular: 0,
+      fresnel: 1,
+      distortion: 0,
+      cornerRadius: 65,
+      zRadius: 40,
+      opacity: 1,
+      saturation: 0,
+      tintStrength: 0,
+      brightness: 0,
+      shadowOpacity: 0.3,
+      shadowSpread: 10,
+      shadowOffsetY: 1,
+      bevelMode: 0,
+    },
+    _ = {
+      "--lg-blur": "blurAmount",
+      "--lg-refraction": "refraction",
+      "--lg-chrom-aberration": "chromAberration",
+      "--lg-edge-highlight": "edgeHighlight",
+      "--lg-specular": "specular",
+      "--lg-fresnel": "fresnel",
+      "--lg-distortion": "distortion",
+      "--lg-corner-radius": "cornerRadius",
+      "--lg-z-radius": "zRadius",
+      "--lg-opacity": "opacity",
+      "--lg-saturation": "saturation",
+      "--lg-tint": "tintStrength",
+      "--lg-brightness": "brightness",
+      "--lg-shadow-opacity": "shadowOpacity",
+      "--lg-shadow-spread": "shadowSpread",
+      "--lg-shadow-offset-y": "shadowOffsetY",
+      "--lg-bevel-mode": "bevelMode",
+    },
+    L = 6,
+    T = 20;
+  var q = `// Blit shader - copy texture with UV transform
+
+struct BlitUniforms {
+  scale: vec2f,
+  offset: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: BlitUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var tex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) uv: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  out.uv = pos * 0.5 + 0.5;
+  out.position = vec4f(pos, 0.0, 1.0);
+  return out;
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  return textureSample(tex, texSampler, in.uv * u.scale + u.offset);
+}
+`,
+    k = `// Blur shader - 9-tap Gaussian blur (single direction)
+
+struct BlurUniforms {
+  dir: vec2f,
+  _pad: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: BlurUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var tex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) uv: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  out.uv = pos * 0.5 + 0.5;
+  out.position = vec4f(pos, 0.0, 1.0);
+  return out;
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  var s = textureSample(tex, texSampler, in.uv) * 0.227027;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 1.0) * 0.194594;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 1.0) * 0.194594;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 2.0) * 0.121622;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 2.0) * 0.121622;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 3.0) * 0.054054;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 3.0) * 0.054054;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 4.0) * 0.016216;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 4.0) * 0.016216;
+  return s;
+}
+`,
+    W = `// Glass shader - the core liquid glass effect
+
+struct GlassUniforms {
+  center: vec2f,
+  size: vec2f,
+  res: vec2f,
+  radius: f32,
+  pad: f32,
+  refract: f32,
+  chroma: f32,
+  edgeHL: f32,
+  spec: f32,
+  fresnel: f32,
+  distort: f32,
+  alpha: f32,
+  sat: f32,
+  tint: f32,
+  zRadius: f32,
+  brightness: f32,
+  shadowAlpha: f32,
+  shadowSpread: f32,
+  shadowOffY: f32,
+  bevelMode: f32,
+  _pad: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: GlassUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var bgTex: texture_2d<f32>;
+@group(0) @binding(3) var blurTex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) localPx: vec2f,
+  @location(1) screenUV: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  let total = u.size + vec2f(u.pad * 2.0);
+  out.localPx = pos * total;
+  let px = u.center + pos * total;
+  out.screenUV = vec2f(px.x / u.res.x, 1.0 - px.y / u.res.y);
+  var ndc = (px / u.res) * 2.0 - 1.0;
+  ndc.y = -ndc.y;
+  out.position = vec4f(ndc, 0.0, 1.0);
+  return out;
+}
+
+// Rounded-rect signed distance
+fn rrSDF(p: vec2f, b: vec2f, r: f32) -> f32 {
+  let q = abs(p) - b + vec2f(r);
+  return min(max(q.x, q.y), 0.0) + length(max(q, vec2f(0.0))) - r;
+}
+
+// Bevel height field
+fn bevelHeight(d: f32, zR: f32) -> f32 {
+  if (d <= 0.0) { return 0.0; }
+  if (d >= zR) { return zR; }
+  return sqrt(d * (2.0 * zR - d));
+}
+
+fn hash(p: vec2f) -> f32 {
+  return fract(sin(dot(p, vec2f(127.1, 311.7))) * 43758.5453);
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  let half_ = u.size * 0.5;
+  let r = min(u.radius, min(half_.x, half_.y));
+  let sdf = rrSDF(in.localPx, half_, r);
+
+  // Anti-aliased mask
+  let mask = 1.0 - smoothstep(-1.5, 0.5, sdf);
+
+  let maxD = min(half_.x, half_.y);
+  let inside = -sdf;
+  let edge = smoothstep(maxD * 0.35, 0.0, inside);
+
+  // Surface normal via bevel height field
+  let zR = u.zRadius;
+  let e = 2.0;
+  let dC = inside;
+  let dR = -rrSDF(in.localPx + vec2f(e, 0.0), half_, r);
+  let dL = -rrSDF(in.localPx - vec2f(e, 0.0), half_, r);
+  let dU = -rrSDF(in.localPx + vec2f(0.0, e), half_, r);
+  let dD = -rrSDF(in.localPx - vec2f(0.0, e), half_, r);
+  let hC = bevelHeight(dC, zR);
+  let hR = bevelHeight(dR, zR);
+  let hL = bevelHeight(dL, zR);
+  let hU = bevelHeight(dU, zR);
+  let hD = bevelHeight(dD, zR);
+  let hGrad = vec2f(hR - hL, hU - hD) / (2.0 * e);
+  let N = normalize(vec3f(-hGrad, 1.0));
+
+  let depth = smoothstep(0.0, zR, inside);
+
+  // Refraction - compute both modes and select
+  let pxToUV = vec2f(1.0, -1.0) / u.res;
+  let ior = 1.5;
+  let refrPow = 1.0 - 1.0 / ior;
+  let thickness = hC * 2.0;
+  let thickNorm = thickness / max(zR * 2.0, 1.0);
+
+  // Biconvex mode
+  let exitRefr = hGrad * refrPow;
+  let entryRefr = hGrad * refrPow;
+  let throughRefr = entryRefr * thickNorm * 0.5;
+  var refrPxBiconvex = (exitRefr + entryRefr + throughRefr) * u.refract * 30.0;
+  let centerDir = -in.localPx / max(half_, vec2f(1.0));
+  refrPxBiconvex += centerDir * u.refract * 4.0 * depth;
+
+  // Dome mode
+  let refrPxDome = -in.localPx * u.refract * depth * 0.35;
+
+  // Select based on bevel mode
+  let refrPx = select(refrPxBiconvex, refrPxDome, u.bevelMode >= 0.5);
+  let refr = refrPx * pxToUV;
+
+  // Micro-distortion noise
+  let ns = in.localPx * 0.08;
+  let absPxToUV = vec2f(1.0) / u.res;
+  let micro = (vec2f(hash(ns), hash(ns + vec2f(37.0))) - 0.5) * u.distort * 4.0 * absPxToUV;
+
+  // Chromatic aberration
+  let caS = u.chroma * 18.0 * (edge * 0.7 + 0.3) * 2.0;
+  let caD = N.xy * caS * pxToUV;
+  let base = in.screenUV + refr + micro;
+
+  // Sample textures (must be in uniform control flow)
+  let sharpR = textureSample(bgTex, texSampler, base + caD).r;
+  let sharpG = textureSample(bgTex, texSampler, base).g;
+  let sharpB = textureSample(bgTex, texSampler, base - caD).b;
+  let sharp = vec3f(sharpR, sharpG, sharpB);
+
+  let blurR = textureSample(blurTex, texSampler, base + caD).r;
+  let blurG = textureSample(blurTex, texSampler, base).g;
+  let blurB = textureSample(blurTex, texSampler, base - caD).b;
+  let blur = vec3f(blurR, blurG, blurB);
+
+  // Edge-weighted blur mix
+  let edgeMix = 1.0 - edge * 0.15;
+  var col = mix(sharp, blur, edgeMix);
+
+  // Brightness
+  col *= 1.0 + u.brightness;
+
+  // Saturation
+  let lum = dot(col, vec3f(0.299, 0.587, 0.114));
+  col = mix(vec3f(lum), col, 1.0 + u.sat);
+
+  // Cool glass tint
+  col = mix(col, col * vec3f(0.92, 0.95, 1.05), u.tint);
+  col *= 1.0 + 0.06 * depth;
+
+  // Fresnel
+  let fres = pow(1.0 - abs(N.z), 4.0) * u.fresnel;
+
+  // Specular highlights (multi-light Blinn-Phong)
+  let V = vec3f(0.0, 0.0, 1.0);
+  let L1 = normalize(vec3f(0.4, 0.7, 1.0));
+  let H1 = normalize(L1 + V);
+  let sp1 = pow(max(dot(N, H1), 0.0), 90.0);
+  let L2 = normalize(vec3f(-0.3, -0.5, 1.0));
+  let H2 = normalize(L2 + V);
+  let sp2 = pow(max(dot(N, H2), 0.0), 50.0) * 0.3;
+  let L3 = normalize(vec3f(0.1, 0.3, 1.0));
+  let spB = pow(max(dot(N, L3), 0.0), 6.0) * 0.1;
+  let L4 = normalize(vec3f(0.0, 0.9, 0.4));
+  let H4 = normalize(L4 + V);
+  let sp4 = pow(max(dot(N, H4), 0.0), 120.0) * 0.6;
+  let totalSpec = (sp1 + sp2 + spB + sp4) * u.spec;
+
+  // Inner border / stroke highlight
+  let borderWidth = 1.5;
+  let innerStroke = smoothstep(-borderWidth - 1.0, -borderWidth, sdf)
+                  * (1.0 - smoothstep(-1.0, 0.0, sdf));
+  let topBias = 0.5 + 0.5 * (-in.localPx.y / half_.y);
+  let innerStrokeFinal = innerStroke * (0.4 + 0.6 * topBias);
+
+  // Edge highlight & inner glow
+  let rim = edge * u.edgeHL * 0.22;
+  let innerGlow = smoothstep(5.0, 0.0, -sdf) * u.edgeHL * 0.15;
+
+  // Environment-like reflection (fake)
+  let envRefl = (N.y * 0.5 + 0.5) * fres * 0.08;
+
+  // Composite glass effect
+  var fin = col;
+  fin += vec3f(totalSpec);
+  fin += vec3f(rim + innerGlow);
+  fin += vec3f(innerStrokeFinal * u.edgeHL * 0.55);
+  fin += vec3f(envRefl);
+  fin = mix(fin, vec3f(1.0), fres * 0.2);
+
+  // Shadow calculation (outside panel)
+  let sdfShadow = rrSDF(in.localPx - vec2f(0.0, u.shadowOffY), half_, r);
+  let shadowD = max(sdfShadow - 1.0, 0.0);
+  let spread = max(u.shadowSpread, 1.0);
+  let falloff = 1.0 / (spread * spread);
+  let outerShadow = exp(-shadowD * shadowD * falloff) * 0.65;
+  let contactShadow = exp(-shadowD * 0.08 / max(spread * 0.04, 0.01)) * 0.35;
+  let shadow = (outerShadow + contactShadow) * u.shadowAlpha;
+
+  // Select between shadow (outside) and glass (inside)
+  let isOutside = sdf > 0.0;
+  let finalColor = select(fin, vec3f(0.0), isOutside);
+  let finalAlpha = select(mask * u.alpha, shadow, isOutside);
+
+  return vec4f(finalColor, finalAlpha);
+}
+`,
+    y = class {
+      canvas;
+      device = null;
+      context = null;
+      format = "bgra8unorm";
+      blitPipeline = null;
+      blurPipeline = null;
+      glassPipeline = null;
+      quadBuffer = null;
+      panelBuffer = null;
+      blitUniformBuffer = null;
+      blurUniformBuffer = null;
+      glassUniformBuffer = null;
+      sampler = null;
+      targetCache = new Map();
+      activeTargets = null;
+      bgTexture = null;
+      bgTextureView = null;
+      width = 0;
+      height = 0;
+      _initPromise = null;
+      _initialized = !1;
+      constructor() {
+        ((this.canvas = document.createElement("canvas")),
+          (this.canvas.style.display = "none"),
+          document.body.appendChild(this.canvas));
+      }
+      async init() {
+        return this._initPromise
+          ? this._initPromise
+          : ((this._initPromise = this._doInit()), this._initPromise);
+      }
+      async _doInit() {
+        if (!navigator.gpu) return (console.warn("WebGPU not supported"), !1);
+        let e = await navigator.gpu.requestAdapter();
+        return e
+          ? ((this.device = await e.requestDevice()),
+            this.device
+              ? ((this.context = this.canvas.getContext("webgpu")),
+                this.context
+                  ? ((this.format = navigator.gpu.getPreferredCanvasFormat()),
+                    this.context.configure({
+                      device: this.device,
+                      format: this.format,
+                      alphaMode: "premultiplied",
+                    }),
+                    this._initPipelines(),
+                    this._initBuffers(),
+                    (this._initialized = !0),
+                    !0)
+                  : (console.warn("Failed to get WebGPU context"), !1))
+              : (console.warn("Failed to get WebGPU device"), !1))
+          : (console.warn("No WebGPU adapter found"), !1);
+      }
+      get initialized() {
+        return this._initialized;
+      }
+      _initPipelines() {
+        let e = this.device;
+        this.sampler = e.createSampler({
+          magFilter: "linear",
+          minFilter: "linear",
+          addressModeU: "clamp-to-edge",
+          addressModeV: "clamp-to-edge",
+        });
+        let t = e.createShaderModule({ code: q }),
+          r = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.blitPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [r] }),
+          vertex: {
+            module: t,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: { module: t, entryPoint: "fragmentMain", targets: [{ format: "rgba8unorm" }] },
+          primitive: { topology: "triangle-strip" },
+        });
+        let n = e.createShaderModule({ code: k }),
+          i = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.blurPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [i] }),
+          vertex: {
+            module: n,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: { module: n, entryPoint: "fragmentMain", targets: [{ format: "rgba8unorm" }] },
+          primitive: { topology: "triangle-strip" },
+        });
+        let s = e.createShaderModule({ code: W }),
+          l = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+              { binding: 3, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.glassPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [l] }),
+          vertex: {
+            module: s,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: {
+            module: s,
+            entryPoint: "fragmentMain",
+            targets: [
+              {
+                format: this.format,
+                blend: {
+                  color: {
+                    srcFactor: "src-alpha",
+                    dstFactor: "one-minus-src-alpha",
+                    operation: "add",
+                  },
+                  alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+                },
+              },
+            ],
+          },
+          primitive: { topology: "triangle-strip" },
+        });
+      }
+      _initBuffers() {
+        let e = this.device;
+        ((this.quadBuffer = e.createBuffer({
+          size: 32,
+          usage: GPUBufferUsage.VERTEX,
+          mappedAtCreation: !0,
+        })),
+          new Float32Array(this.quadBuffer.getMappedRange()).set([-1, -1, 1, -1, -1, 1, 1, 1]),
+          this.quadBuffer.unmap(),
+          (this.panelBuffer = e.createBuffer({
+            size: 32,
+            usage: GPUBufferUsage.VERTEX,
+            mappedAtCreation: !0,
+          })),
+          new Float32Array(this.panelBuffer.getMappedRange()).set([
+            -0.5, -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5,
+          ]),
+          this.panelBuffer.unmap(),
+          (this.blitUniformBuffer = e.createBuffer({
+            size: 16,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })),
+          (this.blurUniformBuffer = e.createBuffer({
+            size: 16,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })),
+          (this.glassUniformBuffer = e.createBuffer({
+            size: 112,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })));
+      }
+      resize(e, t) {
+        if (!(this.width === e && this.height === t)) {
+          ((this.width = e), (this.height = t));
+          for (let r of this.targetCache.values()) this._freeTargetSet(r);
+          (this.targetCache.clear(), (this.activeTargets = null));
+        }
+      }
+      uploadAndBlur(e, t, r, n, i, s) {
+        if (!this._initialized || !this.device || !this._setActiveSize(n, i)) return;
+        let l = this.device,
+          a = this.width,
+          u = this.height,
+          o = this.activeTargets,
+          d = document.createElement("canvas");
+        ((d.width = a),
+          (d.height = u),
+          d.getContext("2d").drawImage(e, -t, -r),
+          (!this.bgTexture || this.bgTexture.width !== a || this.bgTexture.height !== u) &&
+            (this.bgTexture && this.bgTexture.destroy(),
+            (this.bgTexture = l.createTexture({
+              size: [a, u],
+              format: "rgba8unorm",
+              usage:
+                GPUTextureUsage.TEXTURE_BINDING |
+                GPUTextureUsage.COPY_DST |
+                GPUTextureUsage.RENDER_ATTACHMENT,
+            })),
+            (this.bgTextureView = this.bgTexture.createView())),
+          l.queue.copyExternalImageToTexture(
+            { source: d, flipY: !0 },
+            { texture: this.bgTexture },
+            [a, u],
+          ));
+        let f = l.createCommandEncoder();
+        this._blitPass(f, this.bgTextureView, o.bg.view, a, u, 1, 1, 0, 0);
+        let h = o.blurA.w,
+          b = o.blurA.h;
+        if ((this._blitPass(f, o.bg.view, o.blurA.view, h, b, 1, 1, 0, 0), s > 0)) {
+          let g = s * 2.5;
+          for (let p = 0; p < L; p++)
+            (this._blurPass(f, o.blurA.view, o.blurB.view, h, b, g / h, 0),
+              this._blurPass(f, o.blurB.view, o.blurA.view, h, b, 0, g / b));
+        }
+        l.queue.submit([f.finish()]);
+      }
+      _blitPass(e, t, r, n, i, s, l, a, u) {
+        let o = this.device;
+        o.queue.writeBuffer(this.blitUniformBuffer, 0, new Float32Array([s, l, a, u]));
+        let d = o.createBindGroup({
+            layout: this.blitPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.blitUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: t },
+            ],
+          }),
+          c = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: r,
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (c.setPipeline(this.blitPipeline),
+          c.setBindGroup(0, d),
+          c.setVertexBuffer(0, this.quadBuffer),
+          c.setViewport(0, 0, n, i, 0, 1),
+          c.draw(4),
+          c.end());
+      }
+      _blurPass(e, t, r, n, i, s, l) {
+        let a = this.device;
+        a.queue.writeBuffer(this.blurUniformBuffer, 0, new Float32Array([s, l, 0, 0]));
+        let u = a.createBindGroup({
+            layout: this.blurPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.blurUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: t },
+            ],
+          }),
+          o = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: r,
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (o.setPipeline(this.blurPipeline),
+          o.setBindGroup(0, u),
+          o.setVertexBuffer(0, this.quadBuffer),
+          o.setViewport(0, 0, n, i, 0, 1),
+          o.draw(4),
+          o.end());
+      }
+      renderGlassPanel(e, t, r, n) {
+        if (!this._initialized || !this.device || !this.context) return;
+        let i = this.device,
+          s = this.width,
+          l = this.height,
+          a = this.activeTargets,
+          u = new Float32Array([
+            s * 0.5,
+            l * 0.5,
+            t * n,
+            r * n,
+            s,
+            l,
+            e.cornerRadius * n,
+            T * n,
+            e.refraction,
+            e.chromAberration,
+            e.edgeHighlight,
+            e.specular,
+            e.fresnel,
+            e.distortion,
+            e.opacity,
+            e.saturation,
+            e.tintStrength,
+            e.zRadius * n,
+            e.brightness,
+            e.shadowOpacity,
+            e.shadowSpread * n,
+            e.shadowOffsetY * n,
+            e.bevelMode,
+            0,
+            0,
+            0,
+            0,
+            0,
+          ]);
+        i.queue.writeBuffer(this.glassUniformBuffer, 0, u);
+        let o = i.createBindGroup({
+            layout: this.glassPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.glassUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: a.bg.view },
+              { binding: 3, resource: a.blurA.view },
+            ],
+          }),
+          d = i.createCommandEncoder(),
+          c = d.beginRenderPass({
+            colorAttachments: [
+              {
+                view: this.context.getCurrentTexture().createView(),
+                loadOp: "load",
+                storeOp: "store",
+              },
+            ],
+          });
+        (c.setPipeline(this.glassPipeline),
+          c.setBindGroup(0, o),
+          c.setVertexBuffer(0, this.panelBuffer),
+          c.setViewport(0, 0, s, l, 0, 1),
+          c.draw(4),
+          c.end(),
+          i.queue.submit([d.finish()]));
+      }
+      clear() {
+        if (!this._initialized || !this.device || !this.context) return;
+        let e = this.device.createCommandEncoder(),
+          t = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: this.context.getCurrentTexture().createView(),
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (t.setViewport(0, 0, this.width, this.height, 0, 1),
+          t.end(),
+          this.device.queue.submit([e.finish()]));
+      }
+      destroy() {
+        for (let e of this.targetCache.values()) this._freeTargetSet(e);
+        (this.targetCache.clear(),
+          this.bgTexture && this.bgTexture.destroy(),
+          this.quadBuffer && this.quadBuffer.destroy(),
+          this.panelBuffer && this.panelBuffer.destroy(),
+          this.blitUniformBuffer && this.blitUniformBuffer.destroy(),
+          this.blurUniformBuffer && this.blurUniformBuffer.destroy(),
+          this.glassUniformBuffer && this.glassUniformBuffer.destroy(),
+          this.device?.destroy(),
+          this.canvas.remove());
+      }
+      _setActiveSize(e, t) {
+        if (e <= 0 || t <= 0) return !1;
+        ((this.width = e),
+          (this.height = t),
+          (this.canvas.width < e || this.canvas.height < t) &&
+            ((this.canvas.width = Math.max(this.canvas.width, e)),
+            (this.canvas.height = Math.max(this.canvas.height, t)),
+            this.context?.configure({
+              device: this.device,
+              format: this.format,
+              alphaMode: "premultiplied",
+            })));
+        let r = `${e}x${t}`,
+          n = this.targetCache.get(r);
+        return (
+          n ||
+            ((n = {
+              bg: this._makeTarget(e, t),
+              blurA: this._makeTarget(e, t),
+              blurB: this._makeTarget(e, t),
+            }),
+            this.targetCache.set(r, n)),
+          (this.activeTargets = n),
+          !0
+        );
+      }
+      _makeTarget(e, t) {
+        let r = this.device.createTexture({
+          size: [e, t],
+          format: "rgba8unorm",
+          usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
+        });
+        return { texture: r, view: r.createView(), w: e, h: t };
+      }
+      _freeTarget(e) {
+        e && e.texture.destroy();
+      }
+      _freeTargetSet(e) {
+        (this._freeTarget(e.bg), this._freeTarget(e.blurA), this._freeTarget(e.blurB));
+      }
+    };
+  var R = class {
+    canvas;
+    ctx;
+    renderer;
+    sceneCanvas;
+    sceneCtx;
+    drawElementImage;
+    _initPromise;
+    _initialized = !1;
+    constructor(e) {
+      ((this.canvas = e),
+        (this.ctx = e.getContext("2d")),
+        (this.renderer = new y()),
+        (this.sceneCanvas = document.createElement("canvas")),
+        (this.sceneCtx = this.sceneCanvas.getContext("2d")));
+      let t = this.ctx;
+      ((this.drawElementImage = t.drawElementImage?.bind(t) ?? t.drawElement?.bind(t) ?? null),
+        (this._initPromise = this._initWebGPU()));
+    }
+    async _initWebGPU() {
+      try {
+        return (await this.renderer.init())
+          ? ((this._initialized = !0), console.log("LiquidGlass: WebGPU renderer initialized"), !0)
+          : (console.error("LiquidGlass: WebGPU not available"), !1);
+      } catch (e) {
+        return (console.error("LiquidGlass: WebGPU init failed", e), !1);
+      }
+    }
+    get isReady() {
+      return this._initialized;
+    }
+    async waitForInit() {
+      return this._initPromise;
+    }
+    render() {
+      let e = this.canvas.width,
+        t = this.canvas.height;
+      if (e === 0 || t === 0 || !this.drawElementImage || !this._initialized) return;
+      this.ctx.clearRect(0, 0, e, t);
+      let r = window.devicePixelRatio || 1,
+        n = this.canvas.getBoundingClientRect(),
+        i = Array.from(this.canvas.children),
+        s = Array.from(this.canvas.querySelectorAll(".liquid-glass")),
+        l = new Set(s);
+      i.length === 0 &&
+        !this.__lg_warn_empty &&
+        (console.warn("LiquidGlass: No children found inside the canvas to render."),
+        (this.__lg_warn_empty = !0));
+      for (let a of i)
+        if (!l.has(a)) {
+          let u = a,
+            o = this._getElementPosition(u, n);
+          if (o.w <= 0 || o.h <= 0) continue;
+          let d = o.x * r,
+            c = o.y * r;
+          try {
+            let f = this.drawElementImage(a, d, c);
+            f && (u.style.transform = f.toString());
+          } catch (f) {
+            a.__lg_error_logged ||
+              (console.warn(
+                `LiquidGlass: Failed to draw background element ${a.tagName}.${a.className}:`,
+                f.message || f,
+              ),
+              (a.__lg_error_logged = !0));
+          }
+        }
+      for (let a of s)
+        try {
+          this._renderGlassElement(a, n, r);
+        } catch (u) {
+          a.__lg_error_logged_glass ||
+            (console.error(
+              `LiquidGlass: Failed to render glass effect for ${a.tagName}.${a.className}:`,
+              u.message || u,
+            ),
+            (a.__lg_error_logged_glass = !0));
+        }
+    }
+    renderGlassElements() {
+      let e = this.canvas.width,
+        t = this.canvas.height;
+      if (e === 0 || t === 0 || !this.drawElementImage || !this._initialized) return;
+      let r = window.devicePixelRatio || 1,
+        n = this.canvas.getBoundingClientRect(),
+        i = this.canvas.querySelectorAll(".liquid-glass");
+      for (let s of i) this._renderGlassElement(s, n, r);
+    }
+    _parseCSSLength(e, t) {
+      return !e || e === "auto"
+        ? NaN
+        : ((e = e.trim()),
+          e.startsWith("calc(")
+            ? this._parseCalc(e, t)
+            : e.endsWith("%")
+              ? (parseFloat(e) / 100) * t
+              : parseFloat(e) || 0);
+    }
+    _parseCalc(e, t) {
+      let r = e.match(/calc\((.+)\)/);
+      if (!r) return 0;
+      let n = r[1].trim(),
+        i = n.match(/(.+)\s*\+\s*(.+)/),
+        s = n.match(/(.+)\s*-\s*(.+)/);
+      if (s) {
+        let l = this._parseCSSLength(s[1].trim(), t),
+          a = this._parseCSSLength(s[2].trim(), t);
+        return l - a;
+      }
+      if (i) {
+        let l = this._parseCSSLength(i[1].trim(), t),
+          a = this._parseCSSLength(i[2].trim(), t);
+        return l + a;
+      }
+      return this._parseCSSLength(n, t);
+    }
+    _parseTransform(e, t, r) {
+      let n = 0,
+        i = 0;
+      if (!e || e === "none") return { tx: n, ty: i };
+      let s = e.match(/translate\(\s*([^,)]+)(?:\s*,\s*([^)]+))?\s*\)/);
+      s &&
+        ((n = this._parseTranslateValue(s[1], t)),
+        (i = s[2] ? this._parseTranslateValue(s[2], r) : 0));
+      let l = e.match(/translateX\(\s*([^)]+)\s*\)/);
+      l && (n = this._parseTranslateValue(l[1], t));
+      let a = e.match(/translateY\(\s*([^)]+)\s*\)/);
+      a && (i = this._parseTranslateValue(a[1], r));
+      let u = e.match(/translate3d\(\s*([^,]+)\s*,\s*([^,]+)\s*,\s*[^)]+\s*\)/);
+      return (
+        u && ((n = this._parseTranslateValue(u[1], t)), (i = this._parseTranslateValue(u[2], r))),
+        { tx: n, ty: i }
+      );
+    }
+    _parseTranslateValue(e, t) {
+      return ((e = e.trim()), e.endsWith("%") ? (parseFloat(e) / 100) * t : parseFloat(e) || 0);
+    }
+    _getElementPosition(e, t) {
+      let r = getComputedStyle(e),
+        n = parseFloat(getComputedStyle(this.canvas).width) || this.canvas.width || 1536,
+        i = parseFloat(getComputedStyle(this.canvas).height) || this.canvas.height || 1024,
+        s = e.getBoundingClientRect(),
+        l = s.width || parseFloat(r.width) || 0,
+        a = s.height || parseFloat(r.height) || 0,
+        u = 0,
+        o = 0,
+        d = e.style,
+        c = d.left || r.left,
+        f = d.right || r.right,
+        h = d.top || r.top,
+        b = d.bottom || r.bottom,
+        g = this._parseCSSLength(c, n),
+        p = this._parseCSSLength(f, n),
+        v = this._parseCSSLength(h, i),
+        S = this._parseCSSLength(b, i),
+        P = parseFloat(r.marginLeft) || 0,
+        x = parseFloat(r.marginRight) || 0,
+        M = parseFloat(r.marginTop) || 0,
+        A = parseFloat(r.marginBottom) || 0,
+        G = !isNaN(g),
+        U = !isNaN(p);
+      G && U && g === 0 && p === 0
+        ? (u = (n - l) / 2)
+        : (G && U) || G
+          ? (u = g + P)
+          : U && (u = n - l - p - x);
+      let B = !isNaN(v),
+        C = !isNaN(S);
+      B && C && v === 0 && S === 0
+        ? (o = (i - a) / 2)
+        : (B && C) || B
+          ? (o = v + M)
+          : C && (o = i - a - S - A);
+      let { tx: V, ty: F } = this._parseTransform(r.transform, l, a);
+      return ((u += V), (o += F), { x: u, y: o, w: l, h: a });
+    }
+    _renderGlassElement(e, t, r) {
+      if (!this.drawElementImage) return;
+      let n = this._getConfigFromCSS(e),
+        i = this._getElementPosition(e, t),
+        s = i.x,
+        l = i.y,
+        a = i.w,
+        u = i.h,
+        o = s * r,
+        d = l * r,
+        c = a * r,
+        f = u * r,
+        h = T * r,
+        b = o - h,
+        g = d - h,
+        p = c + h * 2,
+        v = f + h * 2;
+      this._captureRegion(b, g, p, v);
+      let S = Math.round(p),
+        P = Math.round(v);
+      (this.renderer.clear(),
+        this.renderer.uploadAndBlur(this.sceneCanvas, 0, 0, S, P, n.blurAmount),
+        this.renderer.renderGlassPanel(n, a, u, r),
+        this.ctx.drawImage(this.renderer.canvas, 0, 0, p, v, b, g, p, v));
+      try {
+        let x = this._drawGlassElementContent(e, o, d);
+        x && (e.style.transform = x.toString());
+      } catch (x) {
+        e.__lg_error_logged ||
+          (console.warn(
+            `LiquidGlass: Failed to draw glass element ${e.tagName}.${e.className}:`,
+            x,
+          ),
+          (e.__lg_error_logged = !0));
+      }
+    }
+    _drawGlassElementContent(e, t, r) {
+      if (!this.drawElementImage) return;
+      let n = this._suppressGlassChrome(e);
+      try {
+        return this.drawElementImage(e, t, r);
+      } finally {
+        this._restoreInlineStyles(e, n);
+      }
+    }
+    _suppressGlassChrome(e) {
+      let t = new Map(),
+        r = [
+          "background",
+          "backgroundColor",
+          "backgroundImage",
+          "borderColor",
+          "boxShadow",
+          "filter",
+          "outlineColor",
+        ];
+      for (let n of r) t.set(n, e.style[n]);
+      return (
+        (e.style.background = "transparent"),
+        (e.style.backgroundColor = "transparent"),
+        (e.style.backgroundImage = "none"),
+        (e.style.borderColor = "transparent"),
+        (e.style.boxShadow = "none"),
+        (e.style.filter = "none"),
+        (e.style.outlineColor = "transparent"),
+        t
+      );
+    }
+    _restoreInlineStyles(e, t) {
+      for (let [r, n] of t) e.style[r] = n;
+    }
+    _captureRegion(e, t, r, n) {
+      let i = Math.round(r),
+        s = Math.round(n);
+      ((this.sceneCanvas.width !== i || this.sceneCanvas.height !== s) &&
+        ((this.sceneCanvas.width = i), (this.sceneCanvas.height = s)),
+        (this.sceneCtx.fillStyle = "#ffffff"),
+        this.sceneCtx.fillRect(0, 0, i, s),
+        this.sceneCtx.drawImage(this.canvas, e, t, r, n, 0, 0, i, s));
+    }
+    _getConfigFromCSS(e) {
+      let t = getComputedStyle(e),
+        r = { ...w };
+      for (let [n, i] of Object.entries(_)) {
+        let s = t.getPropertyValue(n).trim();
+        if (s) {
+          let l = parseFloat(s);
+          isNaN(l) || (r[i] = l);
+        }
+      }
+      return r;
+    }
+    destroy() {
+      this.renderer.destroy();
+    }
+  };
+  return I(Y);
+})();
diff --git a/registry/blocks/liquid-glass-media-controls/liquid-glass-media-controls.html b/registry/blocks/liquid-glass-media-controls/liquid-glass-media-controls.html
new file mode 100644
index 000000000..c56791f74
--- /dev/null
+++ b/registry/blocks/liquid-glass-media-controls/liquid-glass-media-controls.html
@@ -0,0 +1,569 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Liquid Glass Media Controls</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="lib/liquid-glass.iife.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #0a0218;
+        overflow: hidden;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #three-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        z-index: 0;
+      }
+      #glass-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        z-index: 1;
+      }
+
+      /* ── Glass Panels ── */
+      .glass-panel {
+        position: absolute;
+        background: rgba(255, 255, 255, 0.06);
+        --lg-blur: 0.22;
+        --lg-refraction: 0.6;
+        --lg-corner-radius: 36;
+        --lg-z-radius: 38;
+        --lg-specular: 0.2;
+        --lg-fresnel: 0.9;
+        --lg-edge-highlight: 0.1;
+        --lg-chrom-aberration: 0.05;
+        --lg-shadow-opacity: 0.35;
+        --lg-shadow-spread: 14;
+        --lg-shadow-offset-y: 4;
+        --lg-saturation: 0.25;
+      }
+      .search-panel {
+        width: 480px;
+        height: 56px;
+        --lg-corner-radius: 18;
+      }
+      .toggle-panel {
+        width: 480px;
+        height: 50px;
+        --lg-corner-radius: 44;
+      }
+      .media-panel {
+        width: 480px;
+        height: 88px;
+        --lg-corner-radius: 44;
+      }
+      .slider-panel {
+        width: 480px;
+        height: 58px;
+        --lg-corner-radius: 22;
+      }
+
+      #glass-search {
+        top: 400px;
+        left: 720px;
+      }
+      #glass-toggle {
+        top: 470px;
+        left: 720px;
+      }
+      #glass-media {
+        top: 534px;
+        left: 720px;
+      }
+      #glass-slider {
+        top: 636px;
+        left: 720px;
+      }
+
+      /* ── Text Overlays ── */
+      .text-overlay {
+        position: absolute;
+        z-index: 2;
+        pointer-events: none;
+      }
+
+      /* Search bar */
+      .search-text {
+        width: 480px;
+        height: 56px;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 0 20px;
+      }
+      .search-text svg {
+        width: 18px;
+        height: 18px;
+        stroke: rgba(255, 255, 255, 0.45);
+        fill: none;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        flex-shrink: 0;
+      }
+      .search-text span {
+        font-size: 15px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.4);
+      }
+      #text-search {
+        top: 400px;
+        left: 720px;
+      }
+
+      /* Toggle row */
+      .toggle-text {
+        width: 480px;
+        height: 50px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0;
+      }
+      .toggle-item {
+        flex: 1;
+        text-align: center;
+        font-size: 13px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.45);
+        line-height: 50px;
+      }
+      .toggle-item.active {
+        color: #fff;
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 44px;
+      }
+      #text-toggle {
+        top: 470px;
+        left: 720px;
+      }
+
+      /* Media pill */
+      .media-text {
+        width: 480px;
+        height: 88px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 16px;
+      }
+      .album-art {
+        width: 60px;
+        height: 60px;
+        border-radius: 14px;
+        background: linear-gradient(135deg, #6366f1, #ec4899);
+        flex-shrink: 0;
+      }
+      .media-info {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        flex: 1;
+        min-width: 0;
+      }
+      .media-title {
+        font-size: 15px;
+        font-weight: 700;
+        color: #fff;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .media-artist {
+        font-size: 13px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.5);
+      }
+      .transport {
+        display: flex;
+        align-items: center;
+        gap: 18px;
+        margin-left: auto;
+        padding-right: 4px;
+      }
+      .transport svg {
+        width: 22px;
+        height: 22px;
+        fill: #fff;
+        stroke: none;
+      }
+      .transport .play-btn svg {
+        width: 30px;
+        height: 30px;
+      }
+      #text-media {
+        top: 534px;
+        left: 720px;
+      }
+
+      /* Brightness slider */
+      .slider-text {
+        width: 480px;
+        height: 58px;
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        padding: 0 22px;
+      }
+      .slider-text svg {
+        width: 20px;
+        height: 20px;
+        stroke: rgba(255, 255, 255, 0.6);
+        fill: none;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        flex-shrink: 0;
+      }
+      .slider-track {
+        flex: 1;
+        height: 6px;
+        background: rgba(255, 255, 255, 0.12);
+        border-radius: 3px;
+        position: relative;
+      }
+      .slider-fill {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 68%;
+        height: 100%;
+        background: #fff;
+        border-radius: 3px;
+      }
+      .slider-pct {
+        font-size: 14px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.7);
+        font-variant-numeric: tabular-nums;
+        width: 36px;
+        text-align: right;
+      }
+      #text-slider {
+        top: 636px;
+        left: 720px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="liquid-glass-media-controls"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="8"
+      data-root="true"
+    >
+      <canvas id="three-canvas" width="1920" height="1080"></canvas>
+
+      <canvas id="glass-canvas" layoutsubtree width="1920" height="1080">
+        <div id="glass-search" class="glass-panel search-panel liquid-glass"></div>
+        <div id="glass-toggle" class="glass-panel toggle-panel liquid-glass"></div>
+        <div id="glass-media" class="glass-panel media-panel liquid-glass"></div>
+        <div id="glass-slider" class="glass-panel slider-panel liquid-glass"></div>
+      </canvas>
+
+      <!-- Search bar -->
+      <div id="text-search" class="text-overlay search-text">
+        <svg viewBox="0 0 24 24">
+          <circle cx="11" cy="11" r="8" />
+          <line x1="21" y1="21" x2="16.65" y2="16.65" />
+        </svg>
+        <span>Search</span>
+      </div>
+
+      <!-- Toggle row -->
+      <div id="text-toggle" class="text-overlay toggle-text">
+        <div class="toggle-item active">All</div>
+        <div class="toggle-item">Favorites</div>
+        <div class="toggle-item">Recent</div>
+      </div>
+
+      <!-- Media pill -->
+      <div id="text-media" class="text-overlay media-text">
+        <div class="album-art"></div>
+        <div class="media-info">
+          <div class="media-title">Midnight Drive</div>
+          <div class="media-artist">Glass Resonance</div>
+        </div>
+        <div class="transport">
+          <span>
+            <svg viewBox="0 0 24 24">
+              <polygon points="19 20 9 12 19 4" />
+              <line x1="5" y1="4" x2="5" y2="20" stroke="#fff" stroke-width="2" />
+            </svg>
+          </span>
+          <span class="play-btn">
+            <svg viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21" /></svg>
+          </span>
+          <span>
+            <svg viewBox="0 0 24 24">
+              <polygon points="5 4 15 12 5 20" />
+              <line x1="19" y1="4" x2="19" y2="20" stroke="#fff" stroke-width="2" />
+            </svg>
+          </span>
+        </div>
+      </div>
+
+      <!-- Brightness slider -->
+      <div id="text-slider" class="text-overlay slider-text">
+        <svg viewBox="0 0 24 24">
+          <circle cx="12" cy="12" r="5" />
+          <line x1="12" y1="1" x2="12" y2="3" />
+          <line x1="12" y1="21" x2="12" y2="23" />
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+          <line x1="1" y1="12" x2="3" y2="12" />
+          <line x1="21" y1="12" x2="23" y2="12" />
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+        </svg>
+        <div class="slider-track"><div class="slider-fill"></div></div>
+        <span class="slider-pct">68%</span>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      var W = 1920,
+        H = 1080,
+        DURATION = 8;
+
+      /* ── Three.js Aurora Shader ─────────────────────────────────────── */
+      var vs = "varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); }";
+      var fs = [
+        "precision highp float;",
+        "varying vec2 vUv;",
+        "uniform float uTime;",
+        "vec3 mod289(vec3 x){return x-floor(x*(1.0/289.0))*289.0;}",
+        "vec4 mod289(vec4 x){return x-floor(x*(1.0/289.0))*289.0;}",
+        "vec4 permute(vec4 x){return mod289(((x*34.0)+1.0)*x);}",
+        "vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-0.85373472095314*r;}",
+        "float snoise(vec3 v){",
+        "  const vec2 C=vec2(1.0/6.0,1.0/3.0);const vec4 D=vec4(0.0,0.5,1.0,2.0);",
+        "  vec3 i=floor(v+dot(v,C.yyy));vec3 x0=v-i+dot(i,C.xxx);",
+        "  vec3 g=step(x0.yzx,x0.xyz);vec3 l=1.0-g;",
+        "  vec3 i1=min(g.xyz,l.zxy);vec3 i2=max(g.xyz,l.zxy);",
+        "  vec3 x1=x0-i1+C.xxx;vec3 x2=x0-i2+C.yyy;vec3 x3=x0-D.yyy;",
+        "  i=mod289(i);",
+        "  vec4 p=permute(permute(permute(i.z+vec4(0.0,i1.z,i2.z,1.0))+i.y+vec4(0.0,i1.y,i2.y,1.0))+i.x+vec4(0.0,i1.x,i2.x,1.0));",
+        "  float n_=0.142857142857;vec3 ns=n_*D.wyz-D.xzx;",
+        "  vec4 j=p-49.0*floor(p*ns.z*ns.z);vec4 x_=floor(j*ns.z);vec4 y_=floor(j-7.0*x_);",
+        "  vec4 x=x_*ns.x+ns.yyyy;vec4 y=y_*ns.x+ns.yyyy;vec4 h=1.0-abs(x)-abs(y);",
+        "  vec4 b0=vec4(x.xy,y.xy);vec4 b1=vec4(x.zw,y.zw);",
+        "  vec4 s0=floor(b0)*2.0+1.0;vec4 s1=floor(b1)*2.0+1.0;",
+        "  vec4 sh=-step(h,vec4(0.0));",
+        "  vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;",
+        "  vec3 p0=vec3(a0.xy,h.x);vec3 p1=vec3(a0.zw,h.y);vec3 p2=vec3(a1.xy,h.z);vec3 p3=vec3(a1.zw,h.w);",
+        "  vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));",
+        "  p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;",
+        "  vec4 m=max(0.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);m=m*m;",
+        "  return 42.0*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));",
+        "}",
+        "void main(){",
+        "  vec2 uv=vUv;float ar=1920.0/1080.0;vec2 p=vec2(uv.x*ar,uv.y);float t=uTime*0.06;",
+        "  float wx=snoise(vec3(p*1.4,t*0.5))*0.2;float wy=snoise(vec3(p*1.4+100.0,t*0.5))*0.2;",
+        "  vec2 wp=p+vec2(wx,wy);",
+        "  vec3 base=mix(vec3(0.10,0.02,0.22),vec3(0.04,0.10,0.25),smoothstep(0.0,1.0,uv.x*0.6+uv.y*0.4));",
+        "  float angle=0.65;float ridgeUv=dot(wp,vec2(cos(angle),sin(angle)));",
+        "  float ridge1=sin(ridgeUv*8.0+t*2.0+snoise(vec3(wp*0.8,t))*1.5);",
+        "  float ridge2=sin(ridgeUv*5.5-t*1.4+snoise(vec3(wp*1.2+50.0,t*0.7))*2.0);",
+        "  float ridge3=sin(ridgeUv*12.0+t*3.0+snoise(vec3(wp*0.6+80.0,t*0.4))*1.0);",
+        "  float crease1=pow(abs(ridge1),0.35)*sign(ridge1)*0.5+0.5;",
+        "  float crease2=pow(abs(ridge2),0.4)*sign(ridge2)*0.5+0.5;",
+        "  float crease3=pow(abs(ridge3),0.5)*sign(ridge3)*0.5+0.5;",
+        "  vec3 warm=mix(vec3(0.9,0.4,0.08),vec3(0.95,0.65,0.15),crease1);",
+        "  float warmZone=smoothstep(0.15,0.75,uv.x+uv.y*0.4+snoise(vec3(uv*2.0,t))*0.3);",
+        "  vec3 cool=mix(vec3(0.02,0.4,0.55),vec3(0.25,0.7,0.82),crease2);",
+        "  float coolZone=smoothstep(0.25,0.85,1.2-uv.x+uv.y*0.5+snoise(vec3(uv*2.0+40.0,t*0.8))*0.25);",
+        "  vec3 hot=mix(vec3(0.8,0.1,0.4),vec3(0.6,0.08,0.65),crease3);",
+        "  float hotZone=smoothstep(0.5,0.9,snoise(vec3(uv*2.5+20.0,t*0.6))*0.5+0.5);",
+        "  vec3 col=base;",
+        "  col=mix(col,warm,warmZone*0.75*smoothstep(0.3,0.7,crease1));",
+        "  col=mix(col,cool,coolZone*0.65*smoothstep(0.2,0.65,crease2));",
+        "  col=mix(col,hot,hotZone*0.5*smoothstep(0.35,0.8,crease3));",
+        "  float edgeGlow=pow(1.0-abs(ridge1),6.0)*0.4+pow(1.0-abs(ridge2),5.0)*0.25;",
+        "  col+=edgeGlow*mix(warm,cool,uv.x)*0.8;",
+        "  col*=1.0-pow(abs(ridge1),4.0)*0.15;",
+        "  float vig=1.0-smoothstep(0.5,1.5,length((uv-0.5)*vec2(1.3,1.0)));",
+        "  col*=0.65+vig*0.5;",
+        "  float luma=dot(col,vec3(0.299,0.587,0.114));col=mix(vec3(luma),col,1.5);",
+        "  col=clamp(col,0.0,1.0);col=pow(col,vec3(0.9));",
+        "  gl_FragColor=vec4(col,1.0);",
+        "}",
+      ].join("\n");
+
+      /* ── Three.js Setup ─────────────────────────────────────────────── */
+      var threeCanvas = document.getElementById("three-canvas");
+      var renderer = new THREE.WebGLRenderer({ canvas: threeCanvas, alpha: false });
+      renderer.setSize(W, H, false);
+      renderer.setPixelRatio(1);
+
+      var scene = new THREE.Scene();
+      var camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+      var uniforms = { uTime: { value: 0 } };
+      var shaderMat = new THREE.ShaderMaterial({
+        vertexShader: vs,
+        fragmentShader: fs,
+        uniforms: uniforms,
+      });
+      var quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), shaderMat);
+      scene.add(quad);
+
+      /* ── Glass Canvas ───────────────────────────────────────────────── */
+      var glassCanvas = document.getElementById("glass-canvas");
+      var ctx = glassCanvas.getContext("2d");
+      var lg = new LiquidGlass.LiquidGlassCanvas(glassCanvas);
+
+      function renderGlass(time) {
+        uniforms.uTime.value = time;
+        renderer.render(scene, camera);
+        ctx.clearRect(0, 0, W, H);
+        ctx.drawImage(threeCanvas, 0, 0, W, H);
+        lg.renderGlassElements();
+      }
+
+      /* ── GSAP Timeline ──────────────────────────────────────────────── */
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var gs = document.getElementById("glass-search");
+      var gt = document.getElementById("glass-toggle");
+      var gm = document.getElementById("glass-media");
+      var gsl = document.getElementById("glass-slider");
+      var ts = document.getElementById("text-search");
+      var tt = document.getElementById("text-toggle");
+      var tm = document.getElementById("text-media");
+      var tsl = document.getElementById("text-slider");
+
+      /* All panels start stacked at center */
+      var cx = 720,
+        cy = 496;
+
+      /* Search: drifts upper-left */
+      tl.fromTo(
+        [gs, ts],
+        { left: cx, top: cy },
+        { left: 180, top: 180, duration: 3, ease: "power2.out" },
+        0,
+      );
+      tl.to(
+        [gs, ts],
+        { left: 320, top: 260, duration: 5, ease: "sine.inOut", yoyo: true, repeat: 1 },
+        3,
+      );
+      tl.fromTo(
+        [gs, ts],
+        { top: "+=0" },
+        { top: "+=50", duration: 2.2, ease: "sine.inOut", yoyo: true, repeat: 2 },
+        1,
+      );
+
+      /* Toggle: drifts upper-right */
+      tl.fromTo(
+        [gt, tt],
+        { left: cx, top: cy },
+        { left: 1340, top: 220, duration: 3.2, ease: "back.out(1.2)" },
+        0,
+      );
+      tl.to(
+        [gt, tt],
+        { left: 1200, top: 300, duration: 4.8, ease: "sine.inOut", yoyo: true, repeat: 1 },
+        3.2,
+      );
+      tl.fromTo(
+        [gt, tt],
+        { top: "+=0" },
+        { top: "+=40", duration: 1.9, ease: "sine.inOut", yoyo: true, repeat: 3 },
+        0.5,
+      );
+
+      /* Media: drifts lower-left */
+      tl.fromTo(
+        [gm, tm],
+        { left: cx, top: cy },
+        { left: 200, top: 740, duration: 2.8, ease: "expo.out" },
+        0,
+      );
+      tl.to(
+        [gm, tm],
+        { left: 400, top: 680, duration: 5.2, ease: "sine.inOut", yoyo: true, repeat: 1 },
+        2.8,
+      );
+      tl.fromTo(
+        [gm, tm],
+        { top: "+=0" },
+        { top: "+=55", duration: 2.5, ease: "sine.inOut", yoyo: true, repeat: 2 },
+        0.8,
+      );
+
+      /* Slider: drifts lower-right */
+      tl.fromTo(
+        [gsl, tsl],
+        { left: cx, top: cy },
+        { left: 1280, top: 800, duration: 3.5, ease: "circ.out" },
+        0,
+      );
+      tl.to(
+        [gsl, tsl],
+        { left: 1100, top: 720, duration: 4.5, ease: "sine.inOut", yoyo: true, repeat: 1 },
+        3.5,
+      );
+      tl.fromTo(
+        [gsl, tsl],
+        { top: "+=0" },
+        { top: "+=45", duration: 2.0, ease: "sine.inOut", yoyo: true, repeat: 2 },
+        0.3,
+      );
+
+      /* Duration driver */
+      tl.to({ v: 0 }, { v: 1, duration: DURATION, ease: "none" }, 0);
+
+      tl.eventCallback("onUpdate", function () {
+        renderGlass(tl.time());
+      });
+
+      window.__timelines["liquid-glass-media-controls"] = tl;
+
+      setTimeout(function () {
+        renderGlass(0);
+      }, 0);
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/liquid-glass-media-controls/registry-item.json b/registry/blocks/liquid-glass-media-controls/registry-item.json
new file mode 100644
index 000000000..8f13b85e6
--- /dev/null
+++ b/registry/blocks/liquid-glass-media-controls/registry-item.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "liquid-glass-media-controls",
+  "type": "hyperframes:block",
+  "title": "Liquid Glass Media Controls",
+  "description": "Frosted glass media control panels spreading over an aurora shader background",
+  "stability": "experimental",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 8,
+  "tags": ["liquid-glass-html-in-canvas", "webgpu"],
+  "files": [
+    {
+      "path": "liquid-glass-media-controls.html",
+      "target": "compositions/liquid-glass-media-controls.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.png"
+  }
+}
diff --git a/registry/blocks/liquid-glass-notification/lib/liquid-glass.iife.js b/registry/blocks/liquid-glass-notification/lib/liquid-glass.iife.js
new file mode 100644
index 000000000..ae5210629
--- /dev/null
+++ b/registry/blocks/liquid-glass-notification/lib/liquid-glass.iife.js
@@ -0,0 +1,1048 @@
+var LiquidGlass = (() => {
+  var E = Object.defineProperty;
+  var D = Object.getOwnPropertyDescriptor;
+  var z = Object.getOwnPropertyNames;
+  var N = Object.prototype.hasOwnProperty;
+  var O = (m, e) => {
+      for (var t in e) E(m, t, { get: e[t], enumerable: !0 });
+    },
+    H = (m, e, t, r) => {
+      if ((e && typeof e == "object") || typeof e == "function")
+        for (let n of z(e))
+          !N.call(m, n) &&
+            n !== t &&
+            E(m, n, { get: () => e[n], enumerable: !(r = D(e, n)) || r.enumerable });
+      return m;
+    };
+  var I = (m) => H(E({}, "__esModule", { value: !0 }), m);
+  var Y = {};
+  O(Y, {
+    CSS_PROPERTY_MAP: () => _,
+    DEFAULTS: () => w,
+    GlassRendererGPU: () => y,
+    LiquidGlassCanvas: () => R,
+  });
+  var w = {
+      blurAmount: 0,
+      refraction: 0.69,
+      chromAberration: 0.05,
+      edgeHighlight: 0.05,
+      specular: 0,
+      fresnel: 1,
+      distortion: 0,
+      cornerRadius: 65,
+      zRadius: 40,
+      opacity: 1,
+      saturation: 0,
+      tintStrength: 0,
+      brightness: 0,
+      shadowOpacity: 0.3,
+      shadowSpread: 10,
+      shadowOffsetY: 1,
+      bevelMode: 0,
+    },
+    _ = {
+      "--lg-blur": "blurAmount",
+      "--lg-refraction": "refraction",
+      "--lg-chrom-aberration": "chromAberration",
+      "--lg-edge-highlight": "edgeHighlight",
+      "--lg-specular": "specular",
+      "--lg-fresnel": "fresnel",
+      "--lg-distortion": "distortion",
+      "--lg-corner-radius": "cornerRadius",
+      "--lg-z-radius": "zRadius",
+      "--lg-opacity": "opacity",
+      "--lg-saturation": "saturation",
+      "--lg-tint": "tintStrength",
+      "--lg-brightness": "brightness",
+      "--lg-shadow-opacity": "shadowOpacity",
+      "--lg-shadow-spread": "shadowSpread",
+      "--lg-shadow-offset-y": "shadowOffsetY",
+      "--lg-bevel-mode": "bevelMode",
+    },
+    L = 6,
+    T = 20;
+  var q = `// Blit shader - copy texture with UV transform
+
+struct BlitUniforms {
+  scale: vec2f,
+  offset: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: BlitUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var tex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) uv: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  out.uv = pos * 0.5 + 0.5;
+  out.position = vec4f(pos, 0.0, 1.0);
+  return out;
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  return textureSample(tex, texSampler, in.uv * u.scale + u.offset);
+}
+`,
+    k = `// Blur shader - 9-tap Gaussian blur (single direction)
+
+struct BlurUniforms {
+  dir: vec2f,
+  _pad: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: BlurUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var tex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) uv: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  out.uv = pos * 0.5 + 0.5;
+  out.position = vec4f(pos, 0.0, 1.0);
+  return out;
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  var s = textureSample(tex, texSampler, in.uv) * 0.227027;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 1.0) * 0.194594;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 1.0) * 0.194594;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 2.0) * 0.121622;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 2.0) * 0.121622;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 3.0) * 0.054054;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 3.0) * 0.054054;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 4.0) * 0.016216;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 4.0) * 0.016216;
+  return s;
+}
+`,
+    W = `// Glass shader - the core liquid glass effect
+
+struct GlassUniforms {
+  center: vec2f,
+  size: vec2f,
+  res: vec2f,
+  radius: f32,
+  pad: f32,
+  refract: f32,
+  chroma: f32,
+  edgeHL: f32,
+  spec: f32,
+  fresnel: f32,
+  distort: f32,
+  alpha: f32,
+  sat: f32,
+  tint: f32,
+  zRadius: f32,
+  brightness: f32,
+  shadowAlpha: f32,
+  shadowSpread: f32,
+  shadowOffY: f32,
+  bevelMode: f32,
+  _pad: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: GlassUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var bgTex: texture_2d<f32>;
+@group(0) @binding(3) var blurTex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) localPx: vec2f,
+  @location(1) screenUV: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  let total = u.size + vec2f(u.pad * 2.0);
+  out.localPx = pos * total;
+  let px = u.center + pos * total;
+  out.screenUV = vec2f(px.x / u.res.x, 1.0 - px.y / u.res.y);
+  var ndc = (px / u.res) * 2.0 - 1.0;
+  ndc.y = -ndc.y;
+  out.position = vec4f(ndc, 0.0, 1.0);
+  return out;
+}
+
+// Rounded-rect signed distance
+fn rrSDF(p: vec2f, b: vec2f, r: f32) -> f32 {
+  let q = abs(p) - b + vec2f(r);
+  return min(max(q.x, q.y), 0.0) + length(max(q, vec2f(0.0))) - r;
+}
+
+// Bevel height field
+fn bevelHeight(d: f32, zR: f32) -> f32 {
+  if (d <= 0.0) { return 0.0; }
+  if (d >= zR) { return zR; }
+  return sqrt(d * (2.0 * zR - d));
+}
+
+fn hash(p: vec2f) -> f32 {
+  return fract(sin(dot(p, vec2f(127.1, 311.7))) * 43758.5453);
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  let half_ = u.size * 0.5;
+  let r = min(u.radius, min(half_.x, half_.y));
+  let sdf = rrSDF(in.localPx, half_, r);
+
+  // Anti-aliased mask
+  let mask = 1.0 - smoothstep(-1.5, 0.5, sdf);
+
+  let maxD = min(half_.x, half_.y);
+  let inside = -sdf;
+  let edge = smoothstep(maxD * 0.35, 0.0, inside);
+
+  // Surface normal via bevel height field
+  let zR = u.zRadius;
+  let e = 2.0;
+  let dC = inside;
+  let dR = -rrSDF(in.localPx + vec2f(e, 0.0), half_, r);
+  let dL = -rrSDF(in.localPx - vec2f(e, 0.0), half_, r);
+  let dU = -rrSDF(in.localPx + vec2f(0.0, e), half_, r);
+  let dD = -rrSDF(in.localPx - vec2f(0.0, e), half_, r);
+  let hC = bevelHeight(dC, zR);
+  let hR = bevelHeight(dR, zR);
+  let hL = bevelHeight(dL, zR);
+  let hU = bevelHeight(dU, zR);
+  let hD = bevelHeight(dD, zR);
+  let hGrad = vec2f(hR - hL, hU - hD) / (2.0 * e);
+  let N = normalize(vec3f(-hGrad, 1.0));
+
+  let depth = smoothstep(0.0, zR, inside);
+
+  // Refraction - compute both modes and select
+  let pxToUV = vec2f(1.0, -1.0) / u.res;
+  let ior = 1.5;
+  let refrPow = 1.0 - 1.0 / ior;
+  let thickness = hC * 2.0;
+  let thickNorm = thickness / max(zR * 2.0, 1.0);
+
+  // Biconvex mode
+  let exitRefr = hGrad * refrPow;
+  let entryRefr = hGrad * refrPow;
+  let throughRefr = entryRefr * thickNorm * 0.5;
+  var refrPxBiconvex = (exitRefr + entryRefr + throughRefr) * u.refract * 30.0;
+  let centerDir = -in.localPx / max(half_, vec2f(1.0));
+  refrPxBiconvex += centerDir * u.refract * 4.0 * depth;
+
+  // Dome mode
+  let refrPxDome = -in.localPx * u.refract * depth * 0.35;
+
+  // Select based on bevel mode
+  let refrPx = select(refrPxBiconvex, refrPxDome, u.bevelMode >= 0.5);
+  let refr = refrPx * pxToUV;
+
+  // Micro-distortion noise
+  let ns = in.localPx * 0.08;
+  let absPxToUV = vec2f(1.0) / u.res;
+  let micro = (vec2f(hash(ns), hash(ns + vec2f(37.0))) - 0.5) * u.distort * 4.0 * absPxToUV;
+
+  // Chromatic aberration
+  let caS = u.chroma * 18.0 * (edge * 0.7 + 0.3) * 2.0;
+  let caD = N.xy * caS * pxToUV;
+  let base = in.screenUV + refr + micro;
+
+  // Sample textures (must be in uniform control flow)
+  let sharpR = textureSample(bgTex, texSampler, base + caD).r;
+  let sharpG = textureSample(bgTex, texSampler, base).g;
+  let sharpB = textureSample(bgTex, texSampler, base - caD).b;
+  let sharp = vec3f(sharpR, sharpG, sharpB);
+
+  let blurR = textureSample(blurTex, texSampler, base + caD).r;
+  let blurG = textureSample(blurTex, texSampler, base).g;
+  let blurB = textureSample(blurTex, texSampler, base - caD).b;
+  let blur = vec3f(blurR, blurG, blurB);
+
+  // Edge-weighted blur mix
+  let edgeMix = 1.0 - edge * 0.15;
+  var col = mix(sharp, blur, edgeMix);
+
+  // Brightness
+  col *= 1.0 + u.brightness;
+
+  // Saturation
+  let lum = dot(col, vec3f(0.299, 0.587, 0.114));
+  col = mix(vec3f(lum), col, 1.0 + u.sat);
+
+  // Cool glass tint
+  col = mix(col, col * vec3f(0.92, 0.95, 1.05), u.tint);
+  col *= 1.0 + 0.06 * depth;
+
+  // Fresnel
+  let fres = pow(1.0 - abs(N.z), 4.0) * u.fresnel;
+
+  // Specular highlights (multi-light Blinn-Phong)
+  let V = vec3f(0.0, 0.0, 1.0);
+  let L1 = normalize(vec3f(0.4, 0.7, 1.0));
+  let H1 = normalize(L1 + V);
+  let sp1 = pow(max(dot(N, H1), 0.0), 90.0);
+  let L2 = normalize(vec3f(-0.3, -0.5, 1.0));
+  let H2 = normalize(L2 + V);
+  let sp2 = pow(max(dot(N, H2), 0.0), 50.0) * 0.3;
+  let L3 = normalize(vec3f(0.1, 0.3, 1.0));
+  let spB = pow(max(dot(N, L3), 0.0), 6.0) * 0.1;
+  let L4 = normalize(vec3f(0.0, 0.9, 0.4));
+  let H4 = normalize(L4 + V);
+  let sp4 = pow(max(dot(N, H4), 0.0), 120.0) * 0.6;
+  let totalSpec = (sp1 + sp2 + spB + sp4) * u.spec;
+
+  // Inner border / stroke highlight
+  let borderWidth = 1.5;
+  let innerStroke = smoothstep(-borderWidth - 1.0, -borderWidth, sdf)
+                  * (1.0 - smoothstep(-1.0, 0.0, sdf));
+  let topBias = 0.5 + 0.5 * (-in.localPx.y / half_.y);
+  let innerStrokeFinal = innerStroke * (0.4 + 0.6 * topBias);
+
+  // Edge highlight & inner glow
+  let rim = edge * u.edgeHL * 0.22;
+  let innerGlow = smoothstep(5.0, 0.0, -sdf) * u.edgeHL * 0.15;
+
+  // Environment-like reflection (fake)
+  let envRefl = (N.y * 0.5 + 0.5) * fres * 0.08;
+
+  // Composite glass effect
+  var fin = col;
+  fin += vec3f(totalSpec);
+  fin += vec3f(rim + innerGlow);
+  fin += vec3f(innerStrokeFinal * u.edgeHL * 0.55);
+  fin += vec3f(envRefl);
+  fin = mix(fin, vec3f(1.0), fres * 0.2);
+
+  // Shadow calculation (outside panel)
+  let sdfShadow = rrSDF(in.localPx - vec2f(0.0, u.shadowOffY), half_, r);
+  let shadowD = max(sdfShadow - 1.0, 0.0);
+  let spread = max(u.shadowSpread, 1.0);
+  let falloff = 1.0 / (spread * spread);
+  let outerShadow = exp(-shadowD * shadowD * falloff) * 0.65;
+  let contactShadow = exp(-shadowD * 0.08 / max(spread * 0.04, 0.01)) * 0.35;
+  let shadow = (outerShadow + contactShadow) * u.shadowAlpha;
+
+  // Select between shadow (outside) and glass (inside)
+  let isOutside = sdf > 0.0;
+  let finalColor = select(fin, vec3f(0.0), isOutside);
+  let finalAlpha = select(mask * u.alpha, shadow, isOutside);
+
+  return vec4f(finalColor, finalAlpha);
+}
+`,
+    y = class {
+      canvas;
+      device = null;
+      context = null;
+      format = "bgra8unorm";
+      blitPipeline = null;
+      blurPipeline = null;
+      glassPipeline = null;
+      quadBuffer = null;
+      panelBuffer = null;
+      blitUniformBuffer = null;
+      blurUniformBuffer = null;
+      glassUniformBuffer = null;
+      sampler = null;
+      targetCache = new Map();
+      activeTargets = null;
+      bgTexture = null;
+      bgTextureView = null;
+      width = 0;
+      height = 0;
+      _initPromise = null;
+      _initialized = !1;
+      constructor() {
+        ((this.canvas = document.createElement("canvas")),
+          (this.canvas.style.display = "none"),
+          document.body.appendChild(this.canvas));
+      }
+      async init() {
+        return this._initPromise
+          ? this._initPromise
+          : ((this._initPromise = this._doInit()), this._initPromise);
+      }
+      async _doInit() {
+        if (!navigator.gpu) return (console.warn("WebGPU not supported"), !1);
+        let e = await navigator.gpu.requestAdapter();
+        return e
+          ? ((this.device = await e.requestDevice()),
+            this.device
+              ? ((this.context = this.canvas.getContext("webgpu")),
+                this.context
+                  ? ((this.format = navigator.gpu.getPreferredCanvasFormat()),
+                    this.context.configure({
+                      device: this.device,
+                      format: this.format,
+                      alphaMode: "premultiplied",
+                    }),
+                    this._initPipelines(),
+                    this._initBuffers(),
+                    (this._initialized = !0),
+                    !0)
+                  : (console.warn("Failed to get WebGPU context"), !1))
+              : (console.warn("Failed to get WebGPU device"), !1))
+          : (console.warn("No WebGPU adapter found"), !1);
+      }
+      get initialized() {
+        return this._initialized;
+      }
+      _initPipelines() {
+        let e = this.device;
+        this.sampler = e.createSampler({
+          magFilter: "linear",
+          minFilter: "linear",
+          addressModeU: "clamp-to-edge",
+          addressModeV: "clamp-to-edge",
+        });
+        let t = e.createShaderModule({ code: q }),
+          r = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.blitPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [r] }),
+          vertex: {
+            module: t,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: { module: t, entryPoint: "fragmentMain", targets: [{ format: "rgba8unorm" }] },
+          primitive: { topology: "triangle-strip" },
+        });
+        let n = e.createShaderModule({ code: k }),
+          i = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.blurPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [i] }),
+          vertex: {
+            module: n,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: { module: n, entryPoint: "fragmentMain", targets: [{ format: "rgba8unorm" }] },
+          primitive: { topology: "triangle-strip" },
+        });
+        let s = e.createShaderModule({ code: W }),
+          l = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+              { binding: 3, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.glassPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [l] }),
+          vertex: {
+            module: s,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: {
+            module: s,
+            entryPoint: "fragmentMain",
+            targets: [
+              {
+                format: this.format,
+                blend: {
+                  color: {
+                    srcFactor: "src-alpha",
+                    dstFactor: "one-minus-src-alpha",
+                    operation: "add",
+                  },
+                  alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+                },
+              },
+            ],
+          },
+          primitive: { topology: "triangle-strip" },
+        });
+      }
+      _initBuffers() {
+        let e = this.device;
+        ((this.quadBuffer = e.createBuffer({
+          size: 32,
+          usage: GPUBufferUsage.VERTEX,
+          mappedAtCreation: !0,
+        })),
+          new Float32Array(this.quadBuffer.getMappedRange()).set([-1, -1, 1, -1, -1, 1, 1, 1]),
+          this.quadBuffer.unmap(),
+          (this.panelBuffer = e.createBuffer({
+            size: 32,
+            usage: GPUBufferUsage.VERTEX,
+            mappedAtCreation: !0,
+          })),
+          new Float32Array(this.panelBuffer.getMappedRange()).set([
+            -0.5, -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5,
+          ]),
+          this.panelBuffer.unmap(),
+          (this.blitUniformBuffer = e.createBuffer({
+            size: 16,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })),
+          (this.blurUniformBuffer = e.createBuffer({
+            size: 16,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })),
+          (this.glassUniformBuffer = e.createBuffer({
+            size: 112,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })));
+      }
+      resize(e, t) {
+        if (!(this.width === e && this.height === t)) {
+          ((this.width = e), (this.height = t));
+          for (let r of this.targetCache.values()) this._freeTargetSet(r);
+          (this.targetCache.clear(), (this.activeTargets = null));
+        }
+      }
+      uploadAndBlur(e, t, r, n, i, s) {
+        if (!this._initialized || !this.device || !this._setActiveSize(n, i)) return;
+        let l = this.device,
+          a = this.width,
+          u = this.height,
+          o = this.activeTargets,
+          d = document.createElement("canvas");
+        ((d.width = a),
+          (d.height = u),
+          d.getContext("2d").drawImage(e, -t, -r),
+          (!this.bgTexture || this.bgTexture.width !== a || this.bgTexture.height !== u) &&
+            (this.bgTexture && this.bgTexture.destroy(),
+            (this.bgTexture = l.createTexture({
+              size: [a, u],
+              format: "rgba8unorm",
+              usage:
+                GPUTextureUsage.TEXTURE_BINDING |
+                GPUTextureUsage.COPY_DST |
+                GPUTextureUsage.RENDER_ATTACHMENT,
+            })),
+            (this.bgTextureView = this.bgTexture.createView())),
+          l.queue.copyExternalImageToTexture(
+            { source: d, flipY: !0 },
+            { texture: this.bgTexture },
+            [a, u],
+          ));
+        let f = l.createCommandEncoder();
+        this._blitPass(f, this.bgTextureView, o.bg.view, a, u, 1, 1, 0, 0);
+        let h = o.blurA.w,
+          b = o.blurA.h;
+        if ((this._blitPass(f, o.bg.view, o.blurA.view, h, b, 1, 1, 0, 0), s > 0)) {
+          let g = s * 2.5;
+          for (let p = 0; p < L; p++)
+            (this._blurPass(f, o.blurA.view, o.blurB.view, h, b, g / h, 0),
+              this._blurPass(f, o.blurB.view, o.blurA.view, h, b, 0, g / b));
+        }
+        l.queue.submit([f.finish()]);
+      }
+      _blitPass(e, t, r, n, i, s, l, a, u) {
+        let o = this.device;
+        o.queue.writeBuffer(this.blitUniformBuffer, 0, new Float32Array([s, l, a, u]));
+        let d = o.createBindGroup({
+            layout: this.blitPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.blitUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: t },
+            ],
+          }),
+          c = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: r,
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (c.setPipeline(this.blitPipeline),
+          c.setBindGroup(0, d),
+          c.setVertexBuffer(0, this.quadBuffer),
+          c.setViewport(0, 0, n, i, 0, 1),
+          c.draw(4),
+          c.end());
+      }
+      _blurPass(e, t, r, n, i, s, l) {
+        let a = this.device;
+        a.queue.writeBuffer(this.blurUniformBuffer, 0, new Float32Array([s, l, 0, 0]));
+        let u = a.createBindGroup({
+            layout: this.blurPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.blurUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: t },
+            ],
+          }),
+          o = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: r,
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (o.setPipeline(this.blurPipeline),
+          o.setBindGroup(0, u),
+          o.setVertexBuffer(0, this.quadBuffer),
+          o.setViewport(0, 0, n, i, 0, 1),
+          o.draw(4),
+          o.end());
+      }
+      renderGlassPanel(e, t, r, n) {
+        if (!this._initialized || !this.device || !this.context) return;
+        let i = this.device,
+          s = this.width,
+          l = this.height,
+          a = this.activeTargets,
+          u = new Float32Array([
+            s * 0.5,
+            l * 0.5,
+            t * n,
+            r * n,
+            s,
+            l,
+            e.cornerRadius * n,
+            T * n,
+            e.refraction,
+            e.chromAberration,
+            e.edgeHighlight,
+            e.specular,
+            e.fresnel,
+            e.distortion,
+            e.opacity,
+            e.saturation,
+            e.tintStrength,
+            e.zRadius * n,
+            e.brightness,
+            e.shadowOpacity,
+            e.shadowSpread * n,
+            e.shadowOffsetY * n,
+            e.bevelMode,
+            0,
+            0,
+            0,
+            0,
+            0,
+          ]);
+        i.queue.writeBuffer(this.glassUniformBuffer, 0, u);
+        let o = i.createBindGroup({
+            layout: this.glassPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.glassUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: a.bg.view },
+              { binding: 3, resource: a.blurA.view },
+            ],
+          }),
+          d = i.createCommandEncoder(),
+          c = d.beginRenderPass({
+            colorAttachments: [
+              {
+                view: this.context.getCurrentTexture().createView(),
+                loadOp: "load",
+                storeOp: "store",
+              },
+            ],
+          });
+        (c.setPipeline(this.glassPipeline),
+          c.setBindGroup(0, o),
+          c.setVertexBuffer(0, this.panelBuffer),
+          c.setViewport(0, 0, s, l, 0, 1),
+          c.draw(4),
+          c.end(),
+          i.queue.submit([d.finish()]));
+      }
+      clear() {
+        if (!this._initialized || !this.device || !this.context) return;
+        let e = this.device.createCommandEncoder(),
+          t = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: this.context.getCurrentTexture().createView(),
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (t.setViewport(0, 0, this.width, this.height, 0, 1),
+          t.end(),
+          this.device.queue.submit([e.finish()]));
+      }
+      destroy() {
+        for (let e of this.targetCache.values()) this._freeTargetSet(e);
+        (this.targetCache.clear(),
+          this.bgTexture && this.bgTexture.destroy(),
+          this.quadBuffer && this.quadBuffer.destroy(),
+          this.panelBuffer && this.panelBuffer.destroy(),
+          this.blitUniformBuffer && this.blitUniformBuffer.destroy(),
+          this.blurUniformBuffer && this.blurUniformBuffer.destroy(),
+          this.glassUniformBuffer && this.glassUniformBuffer.destroy(),
+          this.device?.destroy(),
+          this.canvas.remove());
+      }
+      _setActiveSize(e, t) {
+        if (e <= 0 || t <= 0) return !1;
+        ((this.width = e),
+          (this.height = t),
+          (this.canvas.width < e || this.canvas.height < t) &&
+            ((this.canvas.width = Math.max(this.canvas.width, e)),
+            (this.canvas.height = Math.max(this.canvas.height, t)),
+            this.context?.configure({
+              device: this.device,
+              format: this.format,
+              alphaMode: "premultiplied",
+            })));
+        let r = `${e}x${t}`,
+          n = this.targetCache.get(r);
+        return (
+          n ||
+            ((n = {
+              bg: this._makeTarget(e, t),
+              blurA: this._makeTarget(e, t),
+              blurB: this._makeTarget(e, t),
+            }),
+            this.targetCache.set(r, n)),
+          (this.activeTargets = n),
+          !0
+        );
+      }
+      _makeTarget(e, t) {
+        let r = this.device.createTexture({
+          size: [e, t],
+          format: "rgba8unorm",
+          usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
+        });
+        return { texture: r, view: r.createView(), w: e, h: t };
+      }
+      _freeTarget(e) {
+        e && e.texture.destroy();
+      }
+      _freeTargetSet(e) {
+        (this._freeTarget(e.bg), this._freeTarget(e.blurA), this._freeTarget(e.blurB));
+      }
+    };
+  var R = class {
+    canvas;
+    ctx;
+    renderer;
+    sceneCanvas;
+    sceneCtx;
+    drawElementImage;
+    _initPromise;
+    _initialized = !1;
+    constructor(e) {
+      ((this.canvas = e),
+        (this.ctx = e.getContext("2d")),
+        (this.renderer = new y()),
+        (this.sceneCanvas = document.createElement("canvas")),
+        (this.sceneCtx = this.sceneCanvas.getContext("2d")));
+      let t = this.ctx;
+      ((this.drawElementImage = t.drawElementImage?.bind(t) ?? t.drawElement?.bind(t) ?? null),
+        (this._initPromise = this._initWebGPU()));
+    }
+    async _initWebGPU() {
+      try {
+        return (await this.renderer.init())
+          ? ((this._initialized = !0), console.log("LiquidGlass: WebGPU renderer initialized"), !0)
+          : (console.error("LiquidGlass: WebGPU not available"), !1);
+      } catch (e) {
+        return (console.error("LiquidGlass: WebGPU init failed", e), !1);
+      }
+    }
+    get isReady() {
+      return this._initialized;
+    }
+    async waitForInit() {
+      return this._initPromise;
+    }
+    render() {
+      let e = this.canvas.width,
+        t = this.canvas.height;
+      if (e === 0 || t === 0 || !this.drawElementImage || !this._initialized) return;
+      this.ctx.clearRect(0, 0, e, t);
+      let r = window.devicePixelRatio || 1,
+        n = this.canvas.getBoundingClientRect(),
+        i = Array.from(this.canvas.children),
+        s = Array.from(this.canvas.querySelectorAll(".liquid-glass")),
+        l = new Set(s);
+      i.length === 0 &&
+        !this.__lg_warn_empty &&
+        (console.warn("LiquidGlass: No children found inside the canvas to render."),
+        (this.__lg_warn_empty = !0));
+      for (let a of i)
+        if (!l.has(a)) {
+          let u = a,
+            o = this._getElementPosition(u, n);
+          if (o.w <= 0 || o.h <= 0) continue;
+          let d = o.x * r,
+            c = o.y * r;
+          try {
+            let f = this.drawElementImage(a, d, c);
+            f && (u.style.transform = f.toString());
+          } catch (f) {
+            a.__lg_error_logged ||
+              (console.warn(
+                `LiquidGlass: Failed to draw background element ${a.tagName}.${a.className}:`,
+                f.message || f,
+              ),
+              (a.__lg_error_logged = !0));
+          }
+        }
+      for (let a of s)
+        try {
+          this._renderGlassElement(a, n, r);
+        } catch (u) {
+          a.__lg_error_logged_glass ||
+            (console.error(
+              `LiquidGlass: Failed to render glass effect for ${a.tagName}.${a.className}:`,
+              u.message || u,
+            ),
+            (a.__lg_error_logged_glass = !0));
+        }
+    }
+    renderGlassElements() {
+      let e = this.canvas.width,
+        t = this.canvas.height;
+      if (e === 0 || t === 0 || !this.drawElementImage || !this._initialized) return;
+      let r = window.devicePixelRatio || 1,
+        n = this.canvas.getBoundingClientRect(),
+        i = this.canvas.querySelectorAll(".liquid-glass");
+      for (let s of i) this._renderGlassElement(s, n, r);
+    }
+    _parseCSSLength(e, t) {
+      return !e || e === "auto"
+        ? NaN
+        : ((e = e.trim()),
+          e.startsWith("calc(")
+            ? this._parseCalc(e, t)
+            : e.endsWith("%")
+              ? (parseFloat(e) / 100) * t
+              : parseFloat(e) || 0);
+    }
+    _parseCalc(e, t) {
+      let r = e.match(/calc\((.+)\)/);
+      if (!r) return 0;
+      let n = r[1].trim(),
+        i = n.match(/(.+)\s*\+\s*(.+)/),
+        s = n.match(/(.+)\s*-\s*(.+)/);
+      if (s) {
+        let l = this._parseCSSLength(s[1].trim(), t),
+          a = this._parseCSSLength(s[2].trim(), t);
+        return l - a;
+      }
+      if (i) {
+        let l = this._parseCSSLength(i[1].trim(), t),
+          a = this._parseCSSLength(i[2].trim(), t);
+        return l + a;
+      }
+      return this._parseCSSLength(n, t);
+    }
+    _parseTransform(e, t, r) {
+      let n = 0,
+        i = 0;
+      if (!e || e === "none") return { tx: n, ty: i };
+      let s = e.match(/translate\(\s*([^,)]+)(?:\s*,\s*([^)]+))?\s*\)/);
+      s &&
+        ((n = this._parseTranslateValue(s[1], t)),
+        (i = s[2] ? this._parseTranslateValue(s[2], r) : 0));
+      let l = e.match(/translateX\(\s*([^)]+)\s*\)/);
+      l && (n = this._parseTranslateValue(l[1], t));
+      let a = e.match(/translateY\(\s*([^)]+)\s*\)/);
+      a && (i = this._parseTranslateValue(a[1], r));
+      let u = e.match(/translate3d\(\s*([^,]+)\s*,\s*([^,]+)\s*,\s*[^)]+\s*\)/);
+      return (
+        u && ((n = this._parseTranslateValue(u[1], t)), (i = this._parseTranslateValue(u[2], r))),
+        { tx: n, ty: i }
+      );
+    }
+    _parseTranslateValue(e, t) {
+      return ((e = e.trim()), e.endsWith("%") ? (parseFloat(e) / 100) * t : parseFloat(e) || 0);
+    }
+    _getElementPosition(e, t) {
+      let r = getComputedStyle(e),
+        n = parseFloat(getComputedStyle(this.canvas).width) || this.canvas.width || 1536,
+        i = parseFloat(getComputedStyle(this.canvas).height) || this.canvas.height || 1024,
+        s = e.getBoundingClientRect(),
+        l = s.width || parseFloat(r.width) || 0,
+        a = s.height || parseFloat(r.height) || 0,
+        u = 0,
+        o = 0,
+        d = e.style,
+        c = d.left || r.left,
+        f = d.right || r.right,
+        h = d.top || r.top,
+        b = d.bottom || r.bottom,
+        g = this._parseCSSLength(c, n),
+        p = this._parseCSSLength(f, n),
+        v = this._parseCSSLength(h, i),
+        S = this._parseCSSLength(b, i),
+        P = parseFloat(r.marginLeft) || 0,
+        x = parseFloat(r.marginRight) || 0,
+        M = parseFloat(r.marginTop) || 0,
+        A = parseFloat(r.marginBottom) || 0,
+        G = !isNaN(g),
+        U = !isNaN(p);
+      G && U && g === 0 && p === 0
+        ? (u = (n - l) / 2)
+        : (G && U) || G
+          ? (u = g + P)
+          : U && (u = n - l - p - x);
+      let B = !isNaN(v),
+        C = !isNaN(S);
+      B && C && v === 0 && S === 0
+        ? (o = (i - a) / 2)
+        : (B && C) || B
+          ? (o = v + M)
+          : C && (o = i - a - S - A);
+      let { tx: V, ty: F } = this._parseTransform(r.transform, l, a);
+      return ((u += V), (o += F), { x: u, y: o, w: l, h: a });
+    }
+    _renderGlassElement(e, t, r) {
+      if (!this.drawElementImage) return;
+      let n = this._getConfigFromCSS(e),
+        i = this._getElementPosition(e, t),
+        s = i.x,
+        l = i.y,
+        a = i.w,
+        u = i.h,
+        o = s * r,
+        d = l * r,
+        c = a * r,
+        f = u * r,
+        h = T * r,
+        b = o - h,
+        g = d - h,
+        p = c + h * 2,
+        v = f + h * 2;
+      this._captureRegion(b, g, p, v);
+      let S = Math.round(p),
+        P = Math.round(v);
+      (this.renderer.clear(),
+        this.renderer.uploadAndBlur(this.sceneCanvas, 0, 0, S, P, n.blurAmount),
+        this.renderer.renderGlassPanel(n, a, u, r),
+        this.ctx.drawImage(this.renderer.canvas, 0, 0, p, v, b, g, p, v));
+      try {
+        let x = this._drawGlassElementContent(e, o, d);
+        x && (e.style.transform = x.toString());
+      } catch (x) {
+        e.__lg_error_logged ||
+          (console.warn(
+            `LiquidGlass: Failed to draw glass element ${e.tagName}.${e.className}:`,
+            x,
+          ),
+          (e.__lg_error_logged = !0));
+      }
+    }
+    _drawGlassElementContent(e, t, r) {
+      if (!this.drawElementImage) return;
+      let n = this._suppressGlassChrome(e);
+      try {
+        return this.drawElementImage(e, t, r);
+      } finally {
+        this._restoreInlineStyles(e, n);
+      }
+    }
+    _suppressGlassChrome(e) {
+      let t = new Map(),
+        r = [
+          "background",
+          "backgroundColor",
+          "backgroundImage",
+          "borderColor",
+          "boxShadow",
+          "filter",
+          "outlineColor",
+        ];
+      for (let n of r) t.set(n, e.style[n]);
+      return (
+        (e.style.background = "transparent"),
+        (e.style.backgroundColor = "transparent"),
+        (e.style.backgroundImage = "none"),
+        (e.style.borderColor = "transparent"),
+        (e.style.boxShadow = "none"),
+        (e.style.filter = "none"),
+        (e.style.outlineColor = "transparent"),
+        t
+      );
+    }
+    _restoreInlineStyles(e, t) {
+      for (let [r, n] of t) e.style[r] = n;
+    }
+    _captureRegion(e, t, r, n) {
+      let i = Math.round(r),
+        s = Math.round(n);
+      ((this.sceneCanvas.width !== i || this.sceneCanvas.height !== s) &&
+        ((this.sceneCanvas.width = i), (this.sceneCanvas.height = s)),
+        (this.sceneCtx.fillStyle = "#ffffff"),
+        this.sceneCtx.fillRect(0, 0, i, s),
+        this.sceneCtx.drawImage(this.canvas, e, t, r, n, 0, 0, i, s));
+    }
+    _getConfigFromCSS(e) {
+      let t = getComputedStyle(e),
+        r = { ...w };
+      for (let [n, i] of Object.entries(_)) {
+        let s = t.getPropertyValue(n).trim();
+        if (s) {
+          let l = parseFloat(s);
+          isNaN(l) || (r[i] = l);
+        }
+      }
+      return r;
+    }
+    destroy() {
+      this.renderer.destroy();
+    }
+  };
+  return I(Y);
+})();
diff --git a/registry/blocks/liquid-glass-notification/liquid-glass-notification.html b/registry/blocks/liquid-glass-notification/liquid-glass-notification.html
new file mode 100644
index 000000000..b8a8b1dbd
--- /dev/null
+++ b/registry/blocks/liquid-glass-notification/liquid-glass-notification.html
@@ -0,0 +1,354 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Liquid Glass Notification</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="lib/liquid-glass.iife.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #0a0218;
+        overflow: hidden;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #three-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        z-index: 0;
+      }
+      #glass-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        z-index: 1;
+      }
+
+      /* ── Glass Panels (NO text inside) ── */
+      .notif-card {
+        position: absolute;
+        width: 520px;
+        height: 110px;
+        background: rgba(255, 255, 255, 0.06);
+        --lg-blur: 0.22;
+        --lg-refraction: 0.6;
+        --lg-corner-radius: 40;
+        --lg-z-radius: 38;
+        --lg-specular: 0.2;
+        --lg-fresnel: 0.9;
+        --lg-edge-highlight: 0.1;
+        --lg-chrom-aberration: 0.05;
+        --lg-shadow-opacity: 0.35;
+        --lg-shadow-spread: 14;
+        --lg-shadow-offset-y: 4;
+        --lg-saturation: 0.25;
+      }
+      #glass-card1 {
+        top: 380px;
+        left: 100px;
+      }
+      #glass-card2 {
+        top: 560px;
+        left: 1300px;
+      }
+
+      /* ── Text Overlays ── */
+      .text-overlay {
+        position: absolute;
+        z-index: 2;
+        pointer-events: none;
+      }
+      .notif-text {
+        width: 520px;
+        height: 110px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 24px;
+      }
+      #text-card1 {
+        top: 380px;
+        left: 100px;
+      }
+      #text-card2 {
+        top: 560px;
+        left: 1300px;
+      }
+
+      .avatar {
+        width: 56px;
+        height: 56px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 700;
+        font-size: 18px;
+        color: #fff;
+        flex-shrink: 0;
+      }
+      .avatar-ja {
+        background: linear-gradient(135deg, #6366f1, #8b5cf6);
+      }
+      .avatar-kl {
+        background: linear-gradient(135deg, #f59e0b, #ef4444);
+      }
+
+      .notif-body {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        min-width: 0;
+      }
+      .notif-header {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+      .notif-name {
+        font-weight: 700;
+        font-size: 16px;
+        color: #fff;
+      }
+      .notif-time {
+        font-size: 13px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.45);
+        font-variant-numeric: tabular-nums;
+      }
+      .notif-msg {
+        font-size: 14px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.72);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="liquid-glass-notification"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="8"
+      data-root="true"
+    >
+      <!-- Layer 0: Three.js aurora -->
+      <canvas id="three-canvas" width="1920" height="1080"></canvas>
+
+      <!-- Layer 1: Glass panels (layoutsubtree, NO text) -->
+      <canvas id="glass-canvas" layoutsubtree width="1920" height="1080">
+        <div id="glass-card1" class="notif-card liquid-glass"></div>
+        <div id="glass-card2" class="notif-card liquid-glass"></div>
+      </canvas>
+
+      <!-- Layer 2: Text overlays -->
+      <div id="text-card1" class="text-overlay notif-text">
+        <div class="avatar avatar-ja">JA</div>
+        <div class="notif-body">
+          <div class="notif-header">
+            <span class="notif-name">Julia Alvarez</span>
+            <span class="notif-time">2m ago</span>
+          </div>
+          <div class="notif-msg">The new render pipeline is looking incredible!</div>
+        </div>
+      </div>
+
+      <div id="text-card2" class="text-overlay notif-text">
+        <div class="avatar avatar-kl">KL</div>
+        <div class="notif-body">
+          <div class="notif-header">
+            <span class="notif-name">Kevin Liu</span>
+            <span class="notif-time">5m ago</span>
+          </div>
+          <div class="notif-msg">Shipped the liquid glass effect to production</div>
+        </div>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      var W = 1920,
+        H = 1080,
+        DURATION = 8;
+
+      /* ── Three.js Aurora Shader ─────────────────────────────────────── */
+      var vs = "varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); }";
+      var fs = [
+        "precision highp float;",
+        "varying vec2 vUv;",
+        "uniform float uTime;",
+        "vec3 mod289(vec3 x){return x-floor(x*(1.0/289.0))*289.0;}",
+        "vec4 mod289(vec4 x){return x-floor(x*(1.0/289.0))*289.0;}",
+        "vec4 permute(vec4 x){return mod289(((x*34.0)+1.0)*x);}",
+        "vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-0.85373472095314*r;}",
+        "float snoise(vec3 v){",
+        "  const vec2 C=vec2(1.0/6.0,1.0/3.0);const vec4 D=vec4(0.0,0.5,1.0,2.0);",
+        "  vec3 i=floor(v+dot(v,C.yyy));vec3 x0=v-i+dot(i,C.xxx);",
+        "  vec3 g=step(x0.yzx,x0.xyz);vec3 l=1.0-g;",
+        "  vec3 i1=min(g.xyz,l.zxy);vec3 i2=max(g.xyz,l.zxy);",
+        "  vec3 x1=x0-i1+C.xxx;vec3 x2=x0-i2+C.yyy;vec3 x3=x0-D.yyy;",
+        "  i=mod289(i);",
+        "  vec4 p=permute(permute(permute(i.z+vec4(0.0,i1.z,i2.z,1.0))+i.y+vec4(0.0,i1.y,i2.y,1.0))+i.x+vec4(0.0,i1.x,i2.x,1.0));",
+        "  float n_=0.142857142857;vec3 ns=n_*D.wyz-D.xzx;",
+        "  vec4 j=p-49.0*floor(p*ns.z*ns.z);vec4 x_=floor(j*ns.z);vec4 y_=floor(j-7.0*x_);",
+        "  vec4 x=x_*ns.x+ns.yyyy;vec4 y=y_*ns.x+ns.yyyy;vec4 h=1.0-abs(x)-abs(y);",
+        "  vec4 b0=vec4(x.xy,y.xy);vec4 b1=vec4(x.zw,y.zw);",
+        "  vec4 s0=floor(b0)*2.0+1.0;vec4 s1=floor(b1)*2.0+1.0;",
+        "  vec4 sh=-step(h,vec4(0.0));",
+        "  vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;",
+        "  vec3 p0=vec3(a0.xy,h.x);vec3 p1=vec3(a0.zw,h.y);vec3 p2=vec3(a1.xy,h.z);vec3 p3=vec3(a1.zw,h.w);",
+        "  vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));",
+        "  p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;",
+        "  vec4 m=max(0.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);m=m*m;",
+        "  return 42.0*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));",
+        "}",
+        "void main(){",
+        "  vec2 uv=vUv;float ar=1920.0/1080.0;vec2 p=vec2(uv.x*ar,uv.y);float t=uTime*0.06;",
+        "  float wx=snoise(vec3(p*1.4,t*0.5))*0.2;float wy=snoise(vec3(p*1.4+100.0,t*0.5))*0.2;",
+        "  vec2 wp=p+vec2(wx,wy);",
+        "  vec3 base=mix(vec3(0.10,0.02,0.22),vec3(0.04,0.10,0.25),smoothstep(0.0,1.0,uv.x*0.6+uv.y*0.4));",
+        "  float angle=0.65;float ridgeUv=dot(wp,vec2(cos(angle),sin(angle)));",
+        "  float ridge1=sin(ridgeUv*8.0+t*2.0+snoise(vec3(wp*0.8,t))*1.5);",
+        "  float ridge2=sin(ridgeUv*5.5-t*1.4+snoise(vec3(wp*1.2+50.0,t*0.7))*2.0);",
+        "  float ridge3=sin(ridgeUv*12.0+t*3.0+snoise(vec3(wp*0.6+80.0,t*0.4))*1.0);",
+        "  float crease1=pow(abs(ridge1),0.35)*sign(ridge1)*0.5+0.5;",
+        "  float crease2=pow(abs(ridge2),0.4)*sign(ridge2)*0.5+0.5;",
+        "  float crease3=pow(abs(ridge3),0.5)*sign(ridge3)*0.5+0.5;",
+        "  vec3 warm=mix(vec3(0.9,0.4,0.08),vec3(0.95,0.65,0.15),crease1);",
+        "  float warmZone=smoothstep(0.15,0.75,uv.x+uv.y*0.4+snoise(vec3(uv*2.0,t))*0.3);",
+        "  vec3 cool=mix(vec3(0.02,0.4,0.55),vec3(0.25,0.7,0.82),crease2);",
+        "  float coolZone=smoothstep(0.25,0.85,1.2-uv.x+uv.y*0.5+snoise(vec3(uv*2.0+40.0,t*0.8))*0.25);",
+        "  vec3 hot=mix(vec3(0.8,0.1,0.4),vec3(0.6,0.08,0.65),crease3);",
+        "  float hotZone=smoothstep(0.5,0.9,snoise(vec3(uv*2.5+20.0,t*0.6))*0.5+0.5);",
+        "  vec3 col=base;",
+        "  col=mix(col,warm,warmZone*0.75*smoothstep(0.3,0.7,crease1));",
+        "  col=mix(col,cool,coolZone*0.65*smoothstep(0.2,0.65,crease2));",
+        "  col=mix(col,hot,hotZone*0.5*smoothstep(0.35,0.8,crease3));",
+        "  float edgeGlow=pow(1.0-abs(ridge1),6.0)*0.4+pow(1.0-abs(ridge2),5.0)*0.25;",
+        "  col+=edgeGlow*mix(warm,cool,uv.x)*0.8;",
+        "  col*=1.0-pow(abs(ridge1),4.0)*0.15;",
+        "  float vig=1.0-smoothstep(0.5,1.5,length((uv-0.5)*vec2(1.3,1.0)));",
+        "  col*=0.65+vig*0.5;",
+        "  float luma=dot(col,vec3(0.299,0.587,0.114));col=mix(vec3(luma),col,1.5);",
+        "  col=clamp(col,0.0,1.0);col=pow(col,vec3(0.9));",
+        "  gl_FragColor=vec4(col,1.0);",
+        "}",
+      ].join("\n");
+
+      /* ── Three.js Setup ─────────────────────────────────────────────── */
+      var threeCanvas = document.getElementById("three-canvas");
+      var renderer = new THREE.WebGLRenderer({ canvas: threeCanvas, alpha: false });
+      renderer.setSize(W, H, false);
+      renderer.setPixelRatio(1);
+
+      var scene = new THREE.Scene();
+      var camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+      var uniforms = { uTime: { value: 0 } };
+      var mat = new THREE.ShaderMaterial({
+        vertexShader: vs,
+        fragmentShader: fs,
+        uniforms: uniforms,
+      });
+      var quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), mat);
+      scene.add(quad);
+
+      /* ── Glass Canvas ───────────────────────────────────────────────── */
+      var glassCanvas = document.getElementById("glass-canvas");
+      var ctx = glassCanvas.getContext("2d");
+      var lg = new LiquidGlass.LiquidGlassCanvas(glassCanvas);
+
+      function renderGlass(time) {
+        uniforms.uTime.value = time;
+        renderer.render(scene, camera);
+        ctx.clearRect(0, 0, W, H);
+        ctx.drawImage(threeCanvas, 0, 0, W, H);
+        lg.renderGlassElements();
+      }
+
+      /* ── GSAP Timeline ──────────────────────────────────────────────── */
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var gc1 = document.getElementById("glass-card1");
+      var gc2 = document.getElementById("glass-card2");
+      var tc1 = document.getElementById("text-card1");
+      var tc2 = document.getElementById("text-card2");
+
+      /* Card 1: sweeps left-to-right with vertical sine wave */
+      tl.fromTo(
+        [gc1, tc1],
+        { left: 80, top: 340 },
+        { left: 1320, top: 340, duration: 8, ease: "sine.inOut", yoyo: true, repeat: 1 },
+        0,
+      );
+      tl.fromTo(
+        [gc1, tc1],
+        { top: 340 },
+        { top: 520, duration: 2.6, ease: "sine.inOut", yoyo: true, repeat: 2 },
+        0,
+      );
+
+      /* Card 2: sweeps right-to-left with offset vertical wave */
+      tl.fromTo(
+        [gc2, tc2],
+        { left: 1300, top: 580 },
+        { left: 100, top: 580, duration: 8, ease: "sine.inOut", yoyo: true, repeat: 1 },
+        0,
+      );
+      tl.fromTo(
+        [gc2, tc2],
+        { top: 580 },
+        { top: 400, duration: 3.2, ease: "power1.inOut", yoyo: true, repeat: 2 },
+        0,
+      );
+
+      /* Duration driver */
+      tl.to({ v: 0 }, { v: 1, duration: DURATION, ease: "none" }, 0);
+
+      tl.eventCallback("onUpdate", function () {
+        renderGlass(tl.time());
+      });
+
+      window.__timelines["liquid-glass-notification"] = tl;
+
+      setTimeout(function () {
+        renderGlass(0);
+      }, 0);
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/liquid-glass-notification/registry-item.json b/registry/blocks/liquid-glass-notification/registry-item.json
new file mode 100644
index 000000000..028a5520f
--- /dev/null
+++ b/registry/blocks/liquid-glass-notification/registry-item.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "liquid-glass-notification",
+  "type": "hyperframes:block",
+  "title": "Liquid Glass Notification",
+  "description": "Frosted glass notification cards floating over an aurora shader background",
+  "stability": "experimental",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 8,
+  "tags": ["liquid-glass-html-in-canvas", "webgpu"],
+  "files": [
+    {
+      "path": "liquid-glass-notification.html",
+      "target": "compositions/liquid-glass-notification.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.png"
+  }
+}
diff --git a/registry/blocks/liquid-glass-widgets/lib/liquid-glass.iife.js b/registry/blocks/liquid-glass-widgets/lib/liquid-glass.iife.js
new file mode 100644
index 000000000..ae5210629
--- /dev/null
+++ b/registry/blocks/liquid-glass-widgets/lib/liquid-glass.iife.js
@@ -0,0 +1,1048 @@
+var LiquidGlass = (() => {
+  var E = Object.defineProperty;
+  var D = Object.getOwnPropertyDescriptor;
+  var z = Object.getOwnPropertyNames;
+  var N = Object.prototype.hasOwnProperty;
+  var O = (m, e) => {
+      for (var t in e) E(m, t, { get: e[t], enumerable: !0 });
+    },
+    H = (m, e, t, r) => {
+      if ((e && typeof e == "object") || typeof e == "function")
+        for (let n of z(e))
+          !N.call(m, n) &&
+            n !== t &&
+            E(m, n, { get: () => e[n], enumerable: !(r = D(e, n)) || r.enumerable });
+      return m;
+    };
+  var I = (m) => H(E({}, "__esModule", { value: !0 }), m);
+  var Y = {};
+  O(Y, {
+    CSS_PROPERTY_MAP: () => _,
+    DEFAULTS: () => w,
+    GlassRendererGPU: () => y,
+    LiquidGlassCanvas: () => R,
+  });
+  var w = {
+      blurAmount: 0,
+      refraction: 0.69,
+      chromAberration: 0.05,
+      edgeHighlight: 0.05,
+      specular: 0,
+      fresnel: 1,
+      distortion: 0,
+      cornerRadius: 65,
+      zRadius: 40,
+      opacity: 1,
+      saturation: 0,
+      tintStrength: 0,
+      brightness: 0,
+      shadowOpacity: 0.3,
+      shadowSpread: 10,
+      shadowOffsetY: 1,
+      bevelMode: 0,
+    },
+    _ = {
+      "--lg-blur": "blurAmount",
+      "--lg-refraction": "refraction",
+      "--lg-chrom-aberration": "chromAberration",
+      "--lg-edge-highlight": "edgeHighlight",
+      "--lg-specular": "specular",
+      "--lg-fresnel": "fresnel",
+      "--lg-distortion": "distortion",
+      "--lg-corner-radius": "cornerRadius",
+      "--lg-z-radius": "zRadius",
+      "--lg-opacity": "opacity",
+      "--lg-saturation": "saturation",
+      "--lg-tint": "tintStrength",
+      "--lg-brightness": "brightness",
+      "--lg-shadow-opacity": "shadowOpacity",
+      "--lg-shadow-spread": "shadowSpread",
+      "--lg-shadow-offset-y": "shadowOffsetY",
+      "--lg-bevel-mode": "bevelMode",
+    },
+    L = 6,
+    T = 20;
+  var q = `// Blit shader - copy texture with UV transform
+
+struct BlitUniforms {
+  scale: vec2f,
+  offset: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: BlitUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var tex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) uv: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  out.uv = pos * 0.5 + 0.5;
+  out.position = vec4f(pos, 0.0, 1.0);
+  return out;
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  return textureSample(tex, texSampler, in.uv * u.scale + u.offset);
+}
+`,
+    k = `// Blur shader - 9-tap Gaussian blur (single direction)
+
+struct BlurUniforms {
+  dir: vec2f,
+  _pad: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: BlurUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var tex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) uv: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  out.uv = pos * 0.5 + 0.5;
+  out.position = vec4f(pos, 0.0, 1.0);
+  return out;
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  var s = textureSample(tex, texSampler, in.uv) * 0.227027;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 1.0) * 0.194594;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 1.0) * 0.194594;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 2.0) * 0.121622;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 2.0) * 0.121622;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 3.0) * 0.054054;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 3.0) * 0.054054;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 4.0) * 0.016216;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 4.0) * 0.016216;
+  return s;
+}
+`,
+    W = `// Glass shader - the core liquid glass effect
+
+struct GlassUniforms {
+  center: vec2f,
+  size: vec2f,
+  res: vec2f,
+  radius: f32,
+  pad: f32,
+  refract: f32,
+  chroma: f32,
+  edgeHL: f32,
+  spec: f32,
+  fresnel: f32,
+  distort: f32,
+  alpha: f32,
+  sat: f32,
+  tint: f32,
+  zRadius: f32,
+  brightness: f32,
+  shadowAlpha: f32,
+  shadowSpread: f32,
+  shadowOffY: f32,
+  bevelMode: f32,
+  _pad: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: GlassUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var bgTex: texture_2d<f32>;
+@group(0) @binding(3) var blurTex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) localPx: vec2f,
+  @location(1) screenUV: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  let total = u.size + vec2f(u.pad * 2.0);
+  out.localPx = pos * total;
+  let px = u.center + pos * total;
+  out.screenUV = vec2f(px.x / u.res.x, 1.0 - px.y / u.res.y);
+  var ndc = (px / u.res) * 2.0 - 1.0;
+  ndc.y = -ndc.y;
+  out.position = vec4f(ndc, 0.0, 1.0);
+  return out;
+}
+
+// Rounded-rect signed distance
+fn rrSDF(p: vec2f, b: vec2f, r: f32) -> f32 {
+  let q = abs(p) - b + vec2f(r);
+  return min(max(q.x, q.y), 0.0) + length(max(q, vec2f(0.0))) - r;
+}
+
+// Bevel height field
+fn bevelHeight(d: f32, zR: f32) -> f32 {
+  if (d <= 0.0) { return 0.0; }
+  if (d >= zR) { return zR; }
+  return sqrt(d * (2.0 * zR - d));
+}
+
+fn hash(p: vec2f) -> f32 {
+  return fract(sin(dot(p, vec2f(127.1, 311.7))) * 43758.5453);
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  let half_ = u.size * 0.5;
+  let r = min(u.radius, min(half_.x, half_.y));
+  let sdf = rrSDF(in.localPx, half_, r);
+
+  // Anti-aliased mask
+  let mask = 1.0 - smoothstep(-1.5, 0.5, sdf);
+
+  let maxD = min(half_.x, half_.y);
+  let inside = -sdf;
+  let edge = smoothstep(maxD * 0.35, 0.0, inside);
+
+  // Surface normal via bevel height field
+  let zR = u.zRadius;
+  let e = 2.0;
+  let dC = inside;
+  let dR = -rrSDF(in.localPx + vec2f(e, 0.0), half_, r);
+  let dL = -rrSDF(in.localPx - vec2f(e, 0.0), half_, r);
+  let dU = -rrSDF(in.localPx + vec2f(0.0, e), half_, r);
+  let dD = -rrSDF(in.localPx - vec2f(0.0, e), half_, r);
+  let hC = bevelHeight(dC, zR);
+  let hR = bevelHeight(dR, zR);
+  let hL = bevelHeight(dL, zR);
+  let hU = bevelHeight(dU, zR);
+  let hD = bevelHeight(dD, zR);
+  let hGrad = vec2f(hR - hL, hU - hD) / (2.0 * e);
+  let N = normalize(vec3f(-hGrad, 1.0));
+
+  let depth = smoothstep(0.0, zR, inside);
+
+  // Refraction - compute both modes and select
+  let pxToUV = vec2f(1.0, -1.0) / u.res;
+  let ior = 1.5;
+  let refrPow = 1.0 - 1.0 / ior;
+  let thickness = hC * 2.0;
+  let thickNorm = thickness / max(zR * 2.0, 1.0);
+
+  // Biconvex mode
+  let exitRefr = hGrad * refrPow;
+  let entryRefr = hGrad * refrPow;
+  let throughRefr = entryRefr * thickNorm * 0.5;
+  var refrPxBiconvex = (exitRefr + entryRefr + throughRefr) * u.refract * 30.0;
+  let centerDir = -in.localPx / max(half_, vec2f(1.0));
+  refrPxBiconvex += centerDir * u.refract * 4.0 * depth;
+
+  // Dome mode
+  let refrPxDome = -in.localPx * u.refract * depth * 0.35;
+
+  // Select based on bevel mode
+  let refrPx = select(refrPxBiconvex, refrPxDome, u.bevelMode >= 0.5);
+  let refr = refrPx * pxToUV;
+
+  // Micro-distortion noise
+  let ns = in.localPx * 0.08;
+  let absPxToUV = vec2f(1.0) / u.res;
+  let micro = (vec2f(hash(ns), hash(ns + vec2f(37.0))) - 0.5) * u.distort * 4.0 * absPxToUV;
+
+  // Chromatic aberration
+  let caS = u.chroma * 18.0 * (edge * 0.7 + 0.3) * 2.0;
+  let caD = N.xy * caS * pxToUV;
+  let base = in.screenUV + refr + micro;
+
+  // Sample textures (must be in uniform control flow)
+  let sharpR = textureSample(bgTex, texSampler, base + caD).r;
+  let sharpG = textureSample(bgTex, texSampler, base).g;
+  let sharpB = textureSample(bgTex, texSampler, base - caD).b;
+  let sharp = vec3f(sharpR, sharpG, sharpB);
+
+  let blurR = textureSample(blurTex, texSampler, base + caD).r;
+  let blurG = textureSample(blurTex, texSampler, base).g;
+  let blurB = textureSample(blurTex, texSampler, base - caD).b;
+  let blur = vec3f(blurR, blurG, blurB);
+
+  // Edge-weighted blur mix
+  let edgeMix = 1.0 - edge * 0.15;
+  var col = mix(sharp, blur, edgeMix);
+
+  // Brightness
+  col *= 1.0 + u.brightness;
+
+  // Saturation
+  let lum = dot(col, vec3f(0.299, 0.587, 0.114));
+  col = mix(vec3f(lum), col, 1.0 + u.sat);
+
+  // Cool glass tint
+  col = mix(col, col * vec3f(0.92, 0.95, 1.05), u.tint);
+  col *= 1.0 + 0.06 * depth;
+
+  // Fresnel
+  let fres = pow(1.0 - abs(N.z), 4.0) * u.fresnel;
+
+  // Specular highlights (multi-light Blinn-Phong)
+  let V = vec3f(0.0, 0.0, 1.0);
+  let L1 = normalize(vec3f(0.4, 0.7, 1.0));
+  let H1 = normalize(L1 + V);
+  let sp1 = pow(max(dot(N, H1), 0.0), 90.0);
+  let L2 = normalize(vec3f(-0.3, -0.5, 1.0));
+  let H2 = normalize(L2 + V);
+  let sp2 = pow(max(dot(N, H2), 0.0), 50.0) * 0.3;
+  let L3 = normalize(vec3f(0.1, 0.3, 1.0));
+  let spB = pow(max(dot(N, L3), 0.0), 6.0) * 0.1;
+  let L4 = normalize(vec3f(0.0, 0.9, 0.4));
+  let H4 = normalize(L4 + V);
+  let sp4 = pow(max(dot(N, H4), 0.0), 120.0) * 0.6;
+  let totalSpec = (sp1 + sp2 + spB + sp4) * u.spec;
+
+  // Inner border / stroke highlight
+  let borderWidth = 1.5;
+  let innerStroke = smoothstep(-borderWidth - 1.0, -borderWidth, sdf)
+                  * (1.0 - smoothstep(-1.0, 0.0, sdf));
+  let topBias = 0.5 + 0.5 * (-in.localPx.y / half_.y);
+  let innerStrokeFinal = innerStroke * (0.4 + 0.6 * topBias);
+
+  // Edge highlight & inner glow
+  let rim = edge * u.edgeHL * 0.22;
+  let innerGlow = smoothstep(5.0, 0.0, -sdf) * u.edgeHL * 0.15;
+
+  // Environment-like reflection (fake)
+  let envRefl = (N.y * 0.5 + 0.5) * fres * 0.08;
+
+  // Composite glass effect
+  var fin = col;
+  fin += vec3f(totalSpec);
+  fin += vec3f(rim + innerGlow);
+  fin += vec3f(innerStrokeFinal * u.edgeHL * 0.55);
+  fin += vec3f(envRefl);
+  fin = mix(fin, vec3f(1.0), fres * 0.2);
+
+  // Shadow calculation (outside panel)
+  let sdfShadow = rrSDF(in.localPx - vec2f(0.0, u.shadowOffY), half_, r);
+  let shadowD = max(sdfShadow - 1.0, 0.0);
+  let spread = max(u.shadowSpread, 1.0);
+  let falloff = 1.0 / (spread * spread);
+  let outerShadow = exp(-shadowD * shadowD * falloff) * 0.65;
+  let contactShadow = exp(-shadowD * 0.08 / max(spread * 0.04, 0.01)) * 0.35;
+  let shadow = (outerShadow + contactShadow) * u.shadowAlpha;
+
+  // Select between shadow (outside) and glass (inside)
+  let isOutside = sdf > 0.0;
+  let finalColor = select(fin, vec3f(0.0), isOutside);
+  let finalAlpha = select(mask * u.alpha, shadow, isOutside);
+
+  return vec4f(finalColor, finalAlpha);
+}
+`,
+    y = class {
+      canvas;
+      device = null;
+      context = null;
+      format = "bgra8unorm";
+      blitPipeline = null;
+      blurPipeline = null;
+      glassPipeline = null;
+      quadBuffer = null;
+      panelBuffer = null;
+      blitUniformBuffer = null;
+      blurUniformBuffer = null;
+      glassUniformBuffer = null;
+      sampler = null;
+      targetCache = new Map();
+      activeTargets = null;
+      bgTexture = null;
+      bgTextureView = null;
+      width = 0;
+      height = 0;
+      _initPromise = null;
+      _initialized = !1;
+      constructor() {
+        ((this.canvas = document.createElement("canvas")),
+          (this.canvas.style.display = "none"),
+          document.body.appendChild(this.canvas));
+      }
+      async init() {
+        return this._initPromise
+          ? this._initPromise
+          : ((this._initPromise = this._doInit()), this._initPromise);
+      }
+      async _doInit() {
+        if (!navigator.gpu) return (console.warn("WebGPU not supported"), !1);
+        let e = await navigator.gpu.requestAdapter();
+        return e
+          ? ((this.device = await e.requestDevice()),
+            this.device
+              ? ((this.context = this.canvas.getContext("webgpu")),
+                this.context
+                  ? ((this.format = navigator.gpu.getPreferredCanvasFormat()),
+                    this.context.configure({
+                      device: this.device,
+                      format: this.format,
+                      alphaMode: "premultiplied",
+                    }),
+                    this._initPipelines(),
+                    this._initBuffers(),
+                    (this._initialized = !0),
+                    !0)
+                  : (console.warn("Failed to get WebGPU context"), !1))
+              : (console.warn("Failed to get WebGPU device"), !1))
+          : (console.warn("No WebGPU adapter found"), !1);
+      }
+      get initialized() {
+        return this._initialized;
+      }
+      _initPipelines() {
+        let e = this.device;
+        this.sampler = e.createSampler({
+          magFilter: "linear",
+          minFilter: "linear",
+          addressModeU: "clamp-to-edge",
+          addressModeV: "clamp-to-edge",
+        });
+        let t = e.createShaderModule({ code: q }),
+          r = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.blitPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [r] }),
+          vertex: {
+            module: t,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: { module: t, entryPoint: "fragmentMain", targets: [{ format: "rgba8unorm" }] },
+          primitive: { topology: "triangle-strip" },
+        });
+        let n = e.createShaderModule({ code: k }),
+          i = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.blurPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [i] }),
+          vertex: {
+            module: n,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: { module: n, entryPoint: "fragmentMain", targets: [{ format: "rgba8unorm" }] },
+          primitive: { topology: "triangle-strip" },
+        });
+        let s = e.createShaderModule({ code: W }),
+          l = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+              { binding: 3, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.glassPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [l] }),
+          vertex: {
+            module: s,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: {
+            module: s,
+            entryPoint: "fragmentMain",
+            targets: [
+              {
+                format: this.format,
+                blend: {
+                  color: {
+                    srcFactor: "src-alpha",
+                    dstFactor: "one-minus-src-alpha",
+                    operation: "add",
+                  },
+                  alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+                },
+              },
+            ],
+          },
+          primitive: { topology: "triangle-strip" },
+        });
+      }
+      _initBuffers() {
+        let e = this.device;
+        ((this.quadBuffer = e.createBuffer({
+          size: 32,
+          usage: GPUBufferUsage.VERTEX,
+          mappedAtCreation: !0,
+        })),
+          new Float32Array(this.quadBuffer.getMappedRange()).set([-1, -1, 1, -1, -1, 1, 1, 1]),
+          this.quadBuffer.unmap(),
+          (this.panelBuffer = e.createBuffer({
+            size: 32,
+            usage: GPUBufferUsage.VERTEX,
+            mappedAtCreation: !0,
+          })),
+          new Float32Array(this.panelBuffer.getMappedRange()).set([
+            -0.5, -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5,
+          ]),
+          this.panelBuffer.unmap(),
+          (this.blitUniformBuffer = e.createBuffer({
+            size: 16,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })),
+          (this.blurUniformBuffer = e.createBuffer({
+            size: 16,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })),
+          (this.glassUniformBuffer = e.createBuffer({
+            size: 112,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })));
+      }
+      resize(e, t) {
+        if (!(this.width === e && this.height === t)) {
+          ((this.width = e), (this.height = t));
+          for (let r of this.targetCache.values()) this._freeTargetSet(r);
+          (this.targetCache.clear(), (this.activeTargets = null));
+        }
+      }
+      uploadAndBlur(e, t, r, n, i, s) {
+        if (!this._initialized || !this.device || !this._setActiveSize(n, i)) return;
+        let l = this.device,
+          a = this.width,
+          u = this.height,
+          o = this.activeTargets,
+          d = document.createElement("canvas");
+        ((d.width = a),
+          (d.height = u),
+          d.getContext("2d").drawImage(e, -t, -r),
+          (!this.bgTexture || this.bgTexture.width !== a || this.bgTexture.height !== u) &&
+            (this.bgTexture && this.bgTexture.destroy(),
+            (this.bgTexture = l.createTexture({
+              size: [a, u],
+              format: "rgba8unorm",
+              usage:
+                GPUTextureUsage.TEXTURE_BINDING |
+                GPUTextureUsage.COPY_DST |
+                GPUTextureUsage.RENDER_ATTACHMENT,
+            })),
+            (this.bgTextureView = this.bgTexture.createView())),
+          l.queue.copyExternalImageToTexture(
+            { source: d, flipY: !0 },
+            { texture: this.bgTexture },
+            [a, u],
+          ));
+        let f = l.createCommandEncoder();
+        this._blitPass(f, this.bgTextureView, o.bg.view, a, u, 1, 1, 0, 0);
+        let h = o.blurA.w,
+          b = o.blurA.h;
+        if ((this._blitPass(f, o.bg.view, o.blurA.view, h, b, 1, 1, 0, 0), s > 0)) {
+          let g = s * 2.5;
+          for (let p = 0; p < L; p++)
+            (this._blurPass(f, o.blurA.view, o.blurB.view, h, b, g / h, 0),
+              this._blurPass(f, o.blurB.view, o.blurA.view, h, b, 0, g / b));
+        }
+        l.queue.submit([f.finish()]);
+      }
+      _blitPass(e, t, r, n, i, s, l, a, u) {
+        let o = this.device;
+        o.queue.writeBuffer(this.blitUniformBuffer, 0, new Float32Array([s, l, a, u]));
+        let d = o.createBindGroup({
+            layout: this.blitPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.blitUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: t },
+            ],
+          }),
+          c = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: r,
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (c.setPipeline(this.blitPipeline),
+          c.setBindGroup(0, d),
+          c.setVertexBuffer(0, this.quadBuffer),
+          c.setViewport(0, 0, n, i, 0, 1),
+          c.draw(4),
+          c.end());
+      }
+      _blurPass(e, t, r, n, i, s, l) {
+        let a = this.device;
+        a.queue.writeBuffer(this.blurUniformBuffer, 0, new Float32Array([s, l, 0, 0]));
+        let u = a.createBindGroup({
+            layout: this.blurPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.blurUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: t },
+            ],
+          }),
+          o = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: r,
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (o.setPipeline(this.blurPipeline),
+          o.setBindGroup(0, u),
+          o.setVertexBuffer(0, this.quadBuffer),
+          o.setViewport(0, 0, n, i, 0, 1),
+          o.draw(4),
+          o.end());
+      }
+      renderGlassPanel(e, t, r, n) {
+        if (!this._initialized || !this.device || !this.context) return;
+        let i = this.device,
+          s = this.width,
+          l = this.height,
+          a = this.activeTargets,
+          u = new Float32Array([
+            s * 0.5,
+            l * 0.5,
+            t * n,
+            r * n,
+            s,
+            l,
+            e.cornerRadius * n,
+            T * n,
+            e.refraction,
+            e.chromAberration,
+            e.edgeHighlight,
+            e.specular,
+            e.fresnel,
+            e.distortion,
+            e.opacity,
+            e.saturation,
+            e.tintStrength,
+            e.zRadius * n,
+            e.brightness,
+            e.shadowOpacity,
+            e.shadowSpread * n,
+            e.shadowOffsetY * n,
+            e.bevelMode,
+            0,
+            0,
+            0,
+            0,
+            0,
+          ]);
+        i.queue.writeBuffer(this.glassUniformBuffer, 0, u);
+        let o = i.createBindGroup({
+            layout: this.glassPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.glassUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: a.bg.view },
+              { binding: 3, resource: a.blurA.view },
+            ],
+          }),
+          d = i.createCommandEncoder(),
+          c = d.beginRenderPass({
+            colorAttachments: [
+              {
+                view: this.context.getCurrentTexture().createView(),
+                loadOp: "load",
+                storeOp: "store",
+              },
+            ],
+          });
+        (c.setPipeline(this.glassPipeline),
+          c.setBindGroup(0, o),
+          c.setVertexBuffer(0, this.panelBuffer),
+          c.setViewport(0, 0, s, l, 0, 1),
+          c.draw(4),
+          c.end(),
+          i.queue.submit([d.finish()]));
+      }
+      clear() {
+        if (!this._initialized || !this.device || !this.context) return;
+        let e = this.device.createCommandEncoder(),
+          t = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: this.context.getCurrentTexture().createView(),
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (t.setViewport(0, 0, this.width, this.height, 0, 1),
+          t.end(),
+          this.device.queue.submit([e.finish()]));
+      }
+      destroy() {
+        for (let e of this.targetCache.values()) this._freeTargetSet(e);
+        (this.targetCache.clear(),
+          this.bgTexture && this.bgTexture.destroy(),
+          this.quadBuffer && this.quadBuffer.destroy(),
+          this.panelBuffer && this.panelBuffer.destroy(),
+          this.blitUniformBuffer && this.blitUniformBuffer.destroy(),
+          this.blurUniformBuffer && this.blurUniformBuffer.destroy(),
+          this.glassUniformBuffer && this.glassUniformBuffer.destroy(),
+          this.device?.destroy(),
+          this.canvas.remove());
+      }
+      _setActiveSize(e, t) {
+        if (e <= 0 || t <= 0) return !1;
+        ((this.width = e),
+          (this.height = t),
+          (this.canvas.width < e || this.canvas.height < t) &&
+            ((this.canvas.width = Math.max(this.canvas.width, e)),
+            (this.canvas.height = Math.max(this.canvas.height, t)),
+            this.context?.configure({
+              device: this.device,
+              format: this.format,
+              alphaMode: "premultiplied",
+            })));
+        let r = `${e}x${t}`,
+          n = this.targetCache.get(r);
+        return (
+          n ||
+            ((n = {
+              bg: this._makeTarget(e, t),
+              blurA: this._makeTarget(e, t),
+              blurB: this._makeTarget(e, t),
+            }),
+            this.targetCache.set(r, n)),
+          (this.activeTargets = n),
+          !0
+        );
+      }
+      _makeTarget(e, t) {
+        let r = this.device.createTexture({
+          size: [e, t],
+          format: "rgba8unorm",
+          usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
+        });
+        return { texture: r, view: r.createView(), w: e, h: t };
+      }
+      _freeTarget(e) {
+        e && e.texture.destroy();
+      }
+      _freeTargetSet(e) {
+        (this._freeTarget(e.bg), this._freeTarget(e.blurA), this._freeTarget(e.blurB));
+      }
+    };
+  var R = class {
+    canvas;
+    ctx;
+    renderer;
+    sceneCanvas;
+    sceneCtx;
+    drawElementImage;
+    _initPromise;
+    _initialized = !1;
+    constructor(e) {
+      ((this.canvas = e),
+        (this.ctx = e.getContext("2d")),
+        (this.renderer = new y()),
+        (this.sceneCanvas = document.createElement("canvas")),
+        (this.sceneCtx = this.sceneCanvas.getContext("2d")));
+      let t = this.ctx;
+      ((this.drawElementImage = t.drawElementImage?.bind(t) ?? t.drawElement?.bind(t) ?? null),
+        (this._initPromise = this._initWebGPU()));
+    }
+    async _initWebGPU() {
+      try {
+        return (await this.renderer.init())
+          ? ((this._initialized = !0), console.log("LiquidGlass: WebGPU renderer initialized"), !0)
+          : (console.error("LiquidGlass: WebGPU not available"), !1);
+      } catch (e) {
+        return (console.error("LiquidGlass: WebGPU init failed", e), !1);
+      }
+    }
+    get isReady() {
+      return this._initialized;
+    }
+    async waitForInit() {
+      return this._initPromise;
+    }
+    render() {
+      let e = this.canvas.width,
+        t = this.canvas.height;
+      if (e === 0 || t === 0 || !this.drawElementImage || !this._initialized) return;
+      this.ctx.clearRect(0, 0, e, t);
+      let r = window.devicePixelRatio || 1,
+        n = this.canvas.getBoundingClientRect(),
+        i = Array.from(this.canvas.children),
+        s = Array.from(this.canvas.querySelectorAll(".liquid-glass")),
+        l = new Set(s);
+      i.length === 0 &&
+        !this.__lg_warn_empty &&
+        (console.warn("LiquidGlass: No children found inside the canvas to render."),
+        (this.__lg_warn_empty = !0));
+      for (let a of i)
+        if (!l.has(a)) {
+          let u = a,
+            o = this._getElementPosition(u, n);
+          if (o.w <= 0 || o.h <= 0) continue;
+          let d = o.x * r,
+            c = o.y * r;
+          try {
+            let f = this.drawElementImage(a, d, c);
+            f && (u.style.transform = f.toString());
+          } catch (f) {
+            a.__lg_error_logged ||
+              (console.warn(
+                `LiquidGlass: Failed to draw background element ${a.tagName}.${a.className}:`,
+                f.message || f,
+              ),
+              (a.__lg_error_logged = !0));
+          }
+        }
+      for (let a of s)
+        try {
+          this._renderGlassElement(a, n, r);
+        } catch (u) {
+          a.__lg_error_logged_glass ||
+            (console.error(
+              `LiquidGlass: Failed to render glass effect for ${a.tagName}.${a.className}:`,
+              u.message || u,
+            ),
+            (a.__lg_error_logged_glass = !0));
+        }
+    }
+    renderGlassElements() {
+      let e = this.canvas.width,
+        t = this.canvas.height;
+      if (e === 0 || t === 0 || !this.drawElementImage || !this._initialized) return;
+      let r = window.devicePixelRatio || 1,
+        n = this.canvas.getBoundingClientRect(),
+        i = this.canvas.querySelectorAll(".liquid-glass");
+      for (let s of i) this._renderGlassElement(s, n, r);
+    }
+    _parseCSSLength(e, t) {
+      return !e || e === "auto"
+        ? NaN
+        : ((e = e.trim()),
+          e.startsWith("calc(")
+            ? this._parseCalc(e, t)
+            : e.endsWith("%")
+              ? (parseFloat(e) / 100) * t
+              : parseFloat(e) || 0);
+    }
+    _parseCalc(e, t) {
+      let r = e.match(/calc\((.+)\)/);
+      if (!r) return 0;
+      let n = r[1].trim(),
+        i = n.match(/(.+)\s*\+\s*(.+)/),
+        s = n.match(/(.+)\s*-\s*(.+)/);
+      if (s) {
+        let l = this._parseCSSLength(s[1].trim(), t),
+          a = this._parseCSSLength(s[2].trim(), t);
+        return l - a;
+      }
+      if (i) {
+        let l = this._parseCSSLength(i[1].trim(), t),
+          a = this._parseCSSLength(i[2].trim(), t);
+        return l + a;
+      }
+      return this._parseCSSLength(n, t);
+    }
+    _parseTransform(e, t, r) {
+      let n = 0,
+        i = 0;
+      if (!e || e === "none") return { tx: n, ty: i };
+      let s = e.match(/translate\(\s*([^,)]+)(?:\s*,\s*([^)]+))?\s*\)/);
+      s &&
+        ((n = this._parseTranslateValue(s[1], t)),
+        (i = s[2] ? this._parseTranslateValue(s[2], r) : 0));
+      let l = e.match(/translateX\(\s*([^)]+)\s*\)/);
+      l && (n = this._parseTranslateValue(l[1], t));
+      let a = e.match(/translateY\(\s*([^)]+)\s*\)/);
+      a && (i = this._parseTranslateValue(a[1], r));
+      let u = e.match(/translate3d\(\s*([^,]+)\s*,\s*([^,]+)\s*,\s*[^)]+\s*\)/);
+      return (
+        u && ((n = this._parseTranslateValue(u[1], t)), (i = this._parseTranslateValue(u[2], r))),
+        { tx: n, ty: i }
+      );
+    }
+    _parseTranslateValue(e, t) {
+      return ((e = e.trim()), e.endsWith("%") ? (parseFloat(e) / 100) * t : parseFloat(e) || 0);
+    }
+    _getElementPosition(e, t) {
+      let r = getComputedStyle(e),
+        n = parseFloat(getComputedStyle(this.canvas).width) || this.canvas.width || 1536,
+        i = parseFloat(getComputedStyle(this.canvas).height) || this.canvas.height || 1024,
+        s = e.getBoundingClientRect(),
+        l = s.width || parseFloat(r.width) || 0,
+        a = s.height || parseFloat(r.height) || 0,
+        u = 0,
+        o = 0,
+        d = e.style,
+        c = d.left || r.left,
+        f = d.right || r.right,
+        h = d.top || r.top,
+        b = d.bottom || r.bottom,
+        g = this._parseCSSLength(c, n),
+        p = this._parseCSSLength(f, n),
+        v = this._parseCSSLength(h, i),
+        S = this._parseCSSLength(b, i),
+        P = parseFloat(r.marginLeft) || 0,
+        x = parseFloat(r.marginRight) || 0,
+        M = parseFloat(r.marginTop) || 0,
+        A = parseFloat(r.marginBottom) || 0,
+        G = !isNaN(g),
+        U = !isNaN(p);
+      G && U && g === 0 && p === 0
+        ? (u = (n - l) / 2)
+        : (G && U) || G
+          ? (u = g + P)
+          : U && (u = n - l - p - x);
+      let B = !isNaN(v),
+        C = !isNaN(S);
+      B && C && v === 0 && S === 0
+        ? (o = (i - a) / 2)
+        : (B && C) || B
+          ? (o = v + M)
+          : C && (o = i - a - S - A);
+      let { tx: V, ty: F } = this._parseTransform(r.transform, l, a);
+      return ((u += V), (o += F), { x: u, y: o, w: l, h: a });
+    }
+    _renderGlassElement(e, t, r) {
+      if (!this.drawElementImage) return;
+      let n = this._getConfigFromCSS(e),
+        i = this._getElementPosition(e, t),
+        s = i.x,
+        l = i.y,
+        a = i.w,
+        u = i.h,
+        o = s * r,
+        d = l * r,
+        c = a * r,
+        f = u * r,
+        h = T * r,
+        b = o - h,
+        g = d - h,
+        p = c + h * 2,
+        v = f + h * 2;
+      this._captureRegion(b, g, p, v);
+      let S = Math.round(p),
+        P = Math.round(v);
+      (this.renderer.clear(),
+        this.renderer.uploadAndBlur(this.sceneCanvas, 0, 0, S, P, n.blurAmount),
+        this.renderer.renderGlassPanel(n, a, u, r),
+        this.ctx.drawImage(this.renderer.canvas, 0, 0, p, v, b, g, p, v));
+      try {
+        let x = this._drawGlassElementContent(e, o, d);
+        x && (e.style.transform = x.toString());
+      } catch (x) {
+        e.__lg_error_logged ||
+          (console.warn(
+            `LiquidGlass: Failed to draw glass element ${e.tagName}.${e.className}:`,
+            x,
+          ),
+          (e.__lg_error_logged = !0));
+      }
+    }
+    _drawGlassElementContent(e, t, r) {
+      if (!this.drawElementImage) return;
+      let n = this._suppressGlassChrome(e);
+      try {
+        return this.drawElementImage(e, t, r);
+      } finally {
+        this._restoreInlineStyles(e, n);
+      }
+    }
+    _suppressGlassChrome(e) {
+      let t = new Map(),
+        r = [
+          "background",
+          "backgroundColor",
+          "backgroundImage",
+          "borderColor",
+          "boxShadow",
+          "filter",
+          "outlineColor",
+        ];
+      for (let n of r) t.set(n, e.style[n]);
+      return (
+        (e.style.background = "transparent"),
+        (e.style.backgroundColor = "transparent"),
+        (e.style.backgroundImage = "none"),
+        (e.style.borderColor = "transparent"),
+        (e.style.boxShadow = "none"),
+        (e.style.filter = "none"),
+        (e.style.outlineColor = "transparent"),
+        t
+      );
+    }
+    _restoreInlineStyles(e, t) {
+      for (let [r, n] of t) e.style[r] = n;
+    }
+    _captureRegion(e, t, r, n) {
+      let i = Math.round(r),
+        s = Math.round(n);
+      ((this.sceneCanvas.width !== i || this.sceneCanvas.height !== s) &&
+        ((this.sceneCanvas.width = i), (this.sceneCanvas.height = s)),
+        (this.sceneCtx.fillStyle = "#ffffff"),
+        this.sceneCtx.fillRect(0, 0, i, s),
+        this.sceneCtx.drawImage(this.canvas, e, t, r, n, 0, 0, i, s));
+    }
+    _getConfigFromCSS(e) {
+      let t = getComputedStyle(e),
+        r = { ...w };
+      for (let [n, i] of Object.entries(_)) {
+        let s = t.getPropertyValue(n).trim();
+        if (s) {
+          let l = parseFloat(s);
+          isNaN(l) || (r[i] = l);
+        }
+      }
+      return r;
+    }
+    destroy() {
+      this.renderer.destroy();
+    }
+  };
+  return I(Y);
+})();
diff --git a/registry/blocks/liquid-glass-widgets/liquid-glass-widgets.html b/registry/blocks/liquid-glass-widgets/liquid-glass-widgets.html
new file mode 100644
index 000000000..27059a685
--- /dev/null
+++ b/registry/blocks/liquid-glass-widgets/liquid-glass-widgets.html
@@ -0,0 +1,598 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Liquid Glass Widgets</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="lib/liquid-glass.iife.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #0a0218;
+        overflow: hidden;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #three-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        z-index: 0;
+      }
+      #glass-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        z-index: 1;
+      }
+
+      /* ── Glass Panels ── */
+      .glass-panel {
+        position: absolute;
+        background: rgba(255, 255, 255, 0.06);
+        --lg-blur: 0.22;
+        --lg-refraction: 0.6;
+        --lg-corner-radius: 28;
+        --lg-z-radius: 38;
+        --lg-specular: 0.2;
+        --lg-fresnel: 0.9;
+        --lg-edge-highlight: 0.1;
+        --lg-chrom-aberration: 0.05;
+        --lg-shadow-opacity: 0.35;
+        --lg-shadow-spread: 14;
+        --lg-shadow-offset-y: 4;
+        --lg-saturation: 0.25;
+      }
+      .stat-card {
+        width: 220px;
+        height: 220px;
+      }
+      .showcase-card {
+        width: 500px;
+        height: 320px;
+      }
+      .pill-chip {
+        width: 130px;
+        height: 36px;
+        --lg-corner-radius: 40;
+      }
+
+      #glass-stat1 {
+        top: 300px;
+        left: 200px;
+      }
+      #glass-stat2 {
+        top: 300px;
+        left: 460px;
+      }
+      #glass-stat3 {
+        top: 300px;
+        left: 720px;
+      }
+      #glass-showcase {
+        top: 380px;
+        left: 1100px;
+      }
+      #glass-pill1 {
+        top: 720px;
+        left: 300px;
+      }
+      #glass-pill2 {
+        top: 720px;
+        left: 460px;
+      }
+      #glass-pill3 {
+        top: 720px;
+        left: 620px;
+      }
+
+      /* ── Text Overlays ── */
+      .text-overlay {
+        position: absolute;
+        z-index: 2;
+        pointer-events: none;
+      }
+
+      /* Stat cards */
+      .stat-text {
+        width: 220px;
+        height: 220px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+      }
+      .stat-label {
+        font-size: 14px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.5);
+        text-transform: uppercase;
+        letter-spacing: 1.5px;
+      }
+      .stat-value {
+        font-size: 52px;
+        font-weight: 700;
+        color: #fff;
+        font-variant-numeric: tabular-nums;
+        line-height: 1;
+      }
+      .stat-unit {
+        font-size: 24px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.45);
+      }
+      #text-stat1 {
+        top: 300px;
+        left: 200px;
+      }
+      #text-stat2 {
+        top: 300px;
+        left: 460px;
+      }
+      #text-stat3 {
+        top: 300px;
+        left: 720px;
+      }
+
+      /* Showcase card */
+      .showcase-text {
+        width: 500px;
+        height: 320px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 20px;
+        padding: 32px;
+      }
+      .showcase-icon {
+        width: 64px;
+        height: 64px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .showcase-title {
+        font-size: 28px;
+        font-weight: 700;
+        color: #fff;
+        text-align: center;
+        line-height: 1.2;
+      }
+      .showcase-desc {
+        font-size: 15px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.5);
+        text-align: center;
+        line-height: 1.5;
+        max-width: 380px;
+      }
+      #text-showcase {
+        top: 380px;
+        left: 1100px;
+      }
+
+      /* Pill chips */
+      .pill-text {
+        width: 130px;
+        height: 36px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+      }
+      .pill-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+      .dot-green {
+        background: #4ade80;
+      }
+      .dot-blue {
+        background: #60a5fa;
+      }
+      .dot-violet {
+        background: #a78bfa;
+      }
+      .pill-label {
+        font-size: 13px;
+        font-weight: 600;
+        color: #fff;
+      }
+      #text-pill1 {
+        top: 720px;
+        left: 300px;
+      }
+      #text-pill2 {
+        top: 720px;
+        left: 460px;
+      }
+      #text-pill3 {
+        top: 720px;
+        left: 620px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="liquid-glass-widgets"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="8"
+      data-root="true"
+    >
+      <canvas id="three-canvas" width="1920" height="1080"></canvas>
+
+      <canvas id="glass-canvas" layoutsubtree width="1920" height="1080">
+        <div id="glass-stat1" class="glass-panel stat-card liquid-glass"></div>
+        <div id="glass-stat2" class="glass-panel stat-card liquid-glass"></div>
+        <div id="glass-stat3" class="glass-panel stat-card liquid-glass"></div>
+        <div id="glass-showcase" class="glass-panel showcase-card liquid-glass"></div>
+        <div id="glass-pill1" class="glass-panel pill-chip liquid-glass"></div>
+        <div id="glass-pill2" class="glass-panel pill-chip liquid-glass"></div>
+        <div id="glass-pill3" class="glass-panel pill-chip liquid-glass"></div>
+      </canvas>
+
+      <!-- Stat cards -->
+      <div id="text-stat1" class="text-overlay stat-text">
+        <span class="stat-label">Temperature</span>
+        <span class="stat-value">24<span class="stat-unit">&deg;</span></span>
+      </div>
+      <div id="text-stat2" class="text-overlay stat-text">
+        <span class="stat-label">Battery</span>
+        <span class="stat-value">87<span class="stat-unit">%</span></span>
+      </div>
+      <div id="text-stat3" class="text-overlay stat-text">
+        <span class="stat-label">Steps</span>
+        <span class="stat-value">8.2<span class="stat-unit">K</span></span>
+      </div>
+
+      <!-- Showcase card -->
+      <div id="text-showcase" class="text-overlay showcase-text">
+        <div class="showcase-icon">
+          <svg width="48" height="48" viewBox="0 0 100 100" fill="none">
+            <path
+              d="M10.1851 57.8021L33.1145 73.8313C36.2202 75.9978 41.5173 73.5433 42.4816 69.4984L51.7611 30.4271C52.7253 26.3822 48.5802 23.9277 44.4602 26.0942L13.917 42.1235C6.96677 45.7676 4.97564 54.1579 10.1851 57.8021Z"
+              fill="url(#hfm0)"
+            />
+            <path
+              d="M87.5129 57.5141L56.9696 73.5433C52.8371 75.7098 48.7046 73.2553 49.6688 69.2104L58.9483 30.1391C59.9125 26.0942 65.2097 23.6397 68.3154 25.8062L91.2447 41.8354C96.4668 45.4796 94.4631 53.8699 87.5129 57.5141Z"
+              fill="url(#hfm1)"
+            />
+            <defs>
+              <linearGradient
+                id="hfm0"
+                x1="48.5676"
+                y1="25"
+                x2="44.7804"
+                y2="71.9384"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop stop-color="#06E3FA" />
+                <stop offset="1" stop-color="#4FDB5E" />
+              </linearGradient>
+              <linearGradient
+                id="hfm1"
+                x1="54.8282"
+                y1="73.8392"
+                x2="72.0989"
+                y2="32.8932"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop stop-color="#06E3FA" />
+                <stop offset="1" stop-color="#4FDB5E" />
+              </linearGradient>
+            </defs>
+          </svg>
+        </div>
+        <div class="showcase-title">HyperFrames</div>
+        <div class="showcase-desc">
+          Write HTML, render video. Ship compositions at the speed of code.
+        </div>
+      </div>
+
+      <!-- Pill chips -->
+      <div id="text-pill1" class="text-overlay pill-text">
+        <span class="pill-dot dot-green"></span>
+        <span class="pill-label">Connected</span>
+      </div>
+      <div id="text-pill2" class="text-overlay pill-text">
+        <span class="pill-dot dot-blue"></span>
+        <span class="pill-label">Bluetooth</span>
+      </div>
+      <div id="text-pill3" class="text-overlay pill-text">
+        <span class="pill-dot dot-violet"></span>
+        <span class="pill-label">Focus</span>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      var W = 1920,
+        H = 1080,
+        DURATION = 8;
+
+      /* ── Three.js Aurora Shader ─────────────────────────────────────── */
+      var vs = "varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); }";
+      var fs = [
+        "precision highp float;",
+        "varying vec2 vUv;",
+        "uniform float uTime;",
+        "vec3 mod289(vec3 x){return x-floor(x*(1.0/289.0))*289.0;}",
+        "vec4 mod289(vec4 x){return x-floor(x*(1.0/289.0))*289.0;}",
+        "vec4 permute(vec4 x){return mod289(((x*34.0)+1.0)*x);}",
+        "vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-0.85373472095314*r;}",
+        "float snoise(vec3 v){",
+        "  const vec2 C=vec2(1.0/6.0,1.0/3.0);const vec4 D=vec4(0.0,0.5,1.0,2.0);",
+        "  vec3 i=floor(v+dot(v,C.yyy));vec3 x0=v-i+dot(i,C.xxx);",
+        "  vec3 g=step(x0.yzx,x0.xyz);vec3 l=1.0-g;",
+        "  vec3 i1=min(g.xyz,l.zxy);vec3 i2=max(g.xyz,l.zxy);",
+        "  vec3 x1=x0-i1+C.xxx;vec3 x2=x0-i2+C.yyy;vec3 x3=x0-D.yyy;",
+        "  i=mod289(i);",
+        "  vec4 p=permute(permute(permute(i.z+vec4(0.0,i1.z,i2.z,1.0))+i.y+vec4(0.0,i1.y,i2.y,1.0))+i.x+vec4(0.0,i1.x,i2.x,1.0));",
+        "  float n_=0.142857142857;vec3 ns=n_*D.wyz-D.xzx;",
+        "  vec4 j=p-49.0*floor(p*ns.z*ns.z);vec4 x_=floor(j*ns.z);vec4 y_=floor(j-7.0*x_);",
+        "  vec4 x=x_*ns.x+ns.yyyy;vec4 y=y_*ns.x+ns.yyyy;vec4 h=1.0-abs(x)-abs(y);",
+        "  vec4 b0=vec4(x.xy,y.xy);vec4 b1=vec4(x.zw,y.zw);",
+        "  vec4 s0=floor(b0)*2.0+1.0;vec4 s1=floor(b1)*2.0+1.0;",
+        "  vec4 sh=-step(h,vec4(0.0));",
+        "  vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;",
+        "  vec3 p0=vec3(a0.xy,h.x);vec3 p1=vec3(a0.zw,h.y);vec3 p2=vec3(a1.xy,h.z);vec3 p3=vec3(a1.zw,h.w);",
+        "  vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));",
+        "  p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;",
+        "  vec4 m=max(0.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);m=m*m;",
+        "  return 42.0*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));",
+        "}",
+        "void main(){",
+        "  vec2 uv=vUv;float ar=1920.0/1080.0;vec2 p=vec2(uv.x*ar,uv.y);float t=uTime*0.06;",
+        "  float wx=snoise(vec3(p*1.4,t*0.5))*0.2;float wy=snoise(vec3(p*1.4+100.0,t*0.5))*0.2;",
+        "  vec2 wp=p+vec2(wx,wy);",
+        "  vec3 base=mix(vec3(0.10,0.02,0.22),vec3(0.04,0.10,0.25),smoothstep(0.0,1.0,uv.x*0.6+uv.y*0.4));",
+        "  float angle=0.65;float ridgeUv=dot(wp,vec2(cos(angle),sin(angle)));",
+        "  float ridge1=sin(ridgeUv*8.0+t*2.0+snoise(vec3(wp*0.8,t))*1.5);",
+        "  float ridge2=sin(ridgeUv*5.5-t*1.4+snoise(vec3(wp*1.2+50.0,t*0.7))*2.0);",
+        "  float ridge3=sin(ridgeUv*12.0+t*3.0+snoise(vec3(wp*0.6+80.0,t*0.4))*1.0);",
+        "  float crease1=pow(abs(ridge1),0.35)*sign(ridge1)*0.5+0.5;",
+        "  float crease2=pow(abs(ridge2),0.4)*sign(ridge2)*0.5+0.5;",
+        "  float crease3=pow(abs(ridge3),0.5)*sign(ridge3)*0.5+0.5;",
+        "  vec3 warm=mix(vec3(0.9,0.4,0.08),vec3(0.95,0.65,0.15),crease1);",
+        "  float warmZone=smoothstep(0.15,0.75,uv.x+uv.y*0.4+snoise(vec3(uv*2.0,t))*0.3);",
+        "  vec3 cool=mix(vec3(0.02,0.4,0.55),vec3(0.25,0.7,0.82),crease2);",
+        "  float coolZone=smoothstep(0.25,0.85,1.2-uv.x+uv.y*0.5+snoise(vec3(uv*2.0+40.0,t*0.8))*0.25);",
+        "  vec3 hot=mix(vec3(0.8,0.1,0.4),vec3(0.6,0.08,0.65),crease3);",
+        "  float hotZone=smoothstep(0.5,0.9,snoise(vec3(uv*2.5+20.0,t*0.6))*0.5+0.5);",
+        "  vec3 col=base;",
+        "  col=mix(col,warm,warmZone*0.75*smoothstep(0.3,0.7,crease1));",
+        "  col=mix(col,cool,coolZone*0.65*smoothstep(0.2,0.65,crease2));",
+        "  col=mix(col,hot,hotZone*0.5*smoothstep(0.35,0.8,crease3));",
+        "  float edgeGlow=pow(1.0-abs(ridge1),6.0)*0.4+pow(1.0-abs(ridge2),5.0)*0.25;",
+        "  col+=edgeGlow*mix(warm,cool,uv.x)*0.8;",
+        "  col*=1.0-pow(abs(ridge1),4.0)*0.15;",
+        "  float vig=1.0-smoothstep(0.5,1.5,length((uv-0.5)*vec2(1.3,1.0)));",
+        "  col*=0.65+vig*0.5;",
+        "  float luma=dot(col,vec3(0.299,0.587,0.114));col=mix(vec3(luma),col,1.5);",
+        "  col=clamp(col,0.0,1.0);col=pow(col,vec3(0.9));",
+        "  gl_FragColor=vec4(col,1.0);",
+        "}",
+      ].join("\n");
+
+      /* ── Three.js Setup ─────────────────────────────────────────────── */
+      var threeCanvas = document.getElementById("three-canvas");
+      var renderer = new THREE.WebGLRenderer({ canvas: threeCanvas, alpha: false });
+      renderer.setSize(W, H, false);
+      renderer.setPixelRatio(1);
+
+      var scene = new THREE.Scene();
+      var camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+      var uniforms = { uTime: { value: 0 } };
+      var shaderMat = new THREE.ShaderMaterial({
+        vertexShader: vs,
+        fragmentShader: fs,
+        uniforms: uniforms,
+      });
+      var quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), shaderMat);
+      scene.add(quad);
+
+      /* ── Glass Canvas ───────────────────────────────────────────────── */
+      var glassCanvas = document.getElementById("glass-canvas");
+      var ctx = glassCanvas.getContext("2d");
+      var lg = new LiquidGlass.LiquidGlassCanvas(glassCanvas);
+
+      function renderGlass(time) {
+        uniforms.uTime.value = time;
+        renderer.render(scene, camera);
+        ctx.clearRect(0, 0, W, H);
+        ctx.drawImage(threeCanvas, 0, 0, W, H);
+        lg.renderGlassElements();
+      }
+
+      /* ── GSAP Timeline ──────────────────────────────────────────────── */
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      /* Glass + text element pairs */
+      var s1g = document.getElementById("glass-stat1");
+      var s2g = document.getElementById("glass-stat2");
+      var s3g = document.getElementById("glass-stat3");
+      var scg = document.getElementById("glass-showcase");
+      var p1g = document.getElementById("glass-pill1");
+      var p2g = document.getElementById("glass-pill2");
+      var p3g = document.getElementById("glass-pill3");
+      var s1t = document.getElementById("text-stat1");
+      var s2t = document.getElementById("text-stat2");
+      var s3t = document.getElementById("text-stat3");
+      var sct = document.getElementById("text-showcase");
+      var p1t = document.getElementById("text-pill1");
+      var p2t = document.getElementById("text-pill2");
+      var p3t = document.getElementById("text-pill3");
+
+      /* ── Stat cards: loose circular orbit ── */
+      /* Stat 1: elliptical orbit upper region */
+      tl.fromTo(
+        [s1g, s1t],
+        { left: 300, top: 260 },
+        { left: 900, top: 260, duration: 4, ease: "sine.inOut", yoyo: true, repeat: 1 },
+        0,
+      );
+      tl.fromTo(
+        [s1g, s1t],
+        { top: 260 },
+        { top: 440, duration: 2.6, ease: "sine.inOut", yoyo: true, repeat: 2 },
+        0,
+      );
+
+      /* Stat 2: offset orbit mid region */
+      tl.fromTo(
+        [s2g, s2t],
+        { left: 700, top: 380 },
+        { left: 1200, top: 380, duration: 3.6, ease: "sine.inOut", yoyo: true, repeat: 1 },
+        0,
+      );
+      tl.fromTo(
+        [s2g, s2t],
+        { top: 380 },
+        { top: 200, duration: 3.2, ease: "power1.inOut", yoyo: true, repeat: 1 },
+        0,
+      );
+
+      /* Stat 3: offset orbit right region */
+      tl.fromTo(
+        [s3g, s3t],
+        { left: 1100, top: 300 },
+        { left: 500, top: 300, duration: 4.4, ease: "sine.inOut", yoyo: true, repeat: 1 },
+        0,
+      );
+      tl.fromTo(
+        [s3g, s3t],
+        { top: 300 },
+        { top: 500, duration: 2.0, ease: "sine.inOut", yoyo: true, repeat: 3 },
+        0,
+      );
+
+      /* ── Showcase card: independent drift ── */
+      tl.fromTo(
+        [scg, sct],
+        { left: 1050, top: 340 },
+        { left: 700, top: 340, duration: 8, ease: "sine.inOut", yoyo: true, repeat: 1 },
+        0,
+      );
+      tl.fromTo(
+        [scg, sct],
+        { top: 340 },
+        { top: 500, duration: 3.0, ease: "power2.inOut", yoyo: true, repeat: 1 },
+        0,
+      );
+      tl.fromTo(
+        [scg, sct],
+        { top: "+=0" },
+        { top: "+=40", duration: 1.8, ease: "sine.inOut", yoyo: true, repeat: 3 },
+        0.5,
+      );
+
+      /* ── Pills: float upward then drift sideways ── */
+      /* Pill 1 */
+      tl.fromTo(
+        [p1g, p1t],
+        { left: 400, top: 780 },
+        { left: 400, top: 620, duration: 2, ease: "power2.out" },
+        0,
+      );
+      tl.to(
+        [p1g, p1t],
+        { left: 250, top: 680, duration: 6, ease: "sine.inOut", yoyo: true, repeat: 1 },
+        2,
+      );
+      tl.fromTo(
+        [p1g, p1t],
+        { top: "+=0" },
+        { top: "+=35", duration: 1.6, ease: "sine.inOut", yoyo: true, repeat: 4 },
+        0.3,
+      );
+
+      /* Pill 2 */
+      tl.fromTo(
+        [p2g, p2t],
+        { left: 700, top: 800 },
+        { left: 700, top: 650, duration: 2.2, ease: "back.out(1.4)" },
+        0,
+      );
+      tl.to(
+        [p2g, p2t],
+        { left: 900, top: 700, duration: 5.8, ease: "sine.inOut", yoyo: true, repeat: 1 },
+        2.2,
+      );
+      tl.fromTo(
+        [p2g, p2t],
+        { top: "+=0" },
+        { top: "+=30", duration: 1.4, ease: "sine.inOut", yoyo: true, repeat: 4 },
+        0.6,
+      );
+
+      /* Pill 3 */
+      tl.fromTo(
+        [p3g, p3t],
+        { left: 1000, top: 820 },
+        { left: 1000, top: 640, duration: 1.8, ease: "expo.out" },
+        0,
+      );
+      tl.to(
+        [p3g, p3t],
+        { left: 1250, top: 690, duration: 6.2, ease: "sine.inOut", yoyo: true, repeat: 1 },
+        1.8,
+      );
+      tl.fromTo(
+        [p3g, p3t],
+        { top: "+=0" },
+        { top: "+=28", duration: 1.3, ease: "sine.inOut", yoyo: true, repeat: 5 },
+        0.1,
+      );
+
+      /* Duration driver */
+      tl.to({ v: 0 }, { v: 1, duration: DURATION, ease: "none" }, 0);
+
+      tl.eventCallback("onUpdate", function () {
+        renderGlass(tl.time());
+      });
+
+      window.__timelines["liquid-glass-widgets"] = tl;
+
+      setTimeout(function () {
+        renderGlass(0);
+      }, 0);
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/liquid-glass-widgets/registry-item.json b/registry/blocks/liquid-glass-widgets/registry-item.json
new file mode 100644
index 000000000..530053ecd
--- /dev/null
+++ b/registry/blocks/liquid-glass-widgets/registry-item.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "liquid-glass-widgets",
+  "type": "hyperframes:block",
+  "title": "Liquid Glass Widgets",
+  "description": "Frosted glass stat cards, showcase panel and pill chips over an aurora shader background",
+  "stability": "experimental",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 8,
+  "tags": ["liquid-glass-html-in-canvas", "webgpu"],
+  "files": [
+    {
+      "path": "liquid-glass-widgets.html",
+      "target": "compositions/liquid-glass-widgets.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.png"
+  }
+}