@mkbabb/glass-ui 0.2.0

package/src/components/ui/toggle/index.ts

@@ -0,0 +1,27 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+export { default as Toggle } from './Toggle.vue'
+
+export const toggleVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-10 px-3',
+        sm: 'h-9 px-2.5',
+        lg: 'h-11 px-5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>

package/src/components/ui/toggle-group/ToggleGroup.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority'
+import { type HTMLAttributes, computed, provide } from 'vue'
+import { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'
+import type { toggleVariants } from '../toggle'
+import { cn } from '../../../utils'
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+
+const props = defineProps<ToggleGroupRootProps & {
+  class?: HTMLAttributes['class']
+  variant?: ToggleGroupVariants['variant']
+  size?: ToggleGroupVariants['size']
+}>()
+const emits = defineEmits<ToggleGroupRootEmits>()
+
+provide('toggleGroup', {
+  variant: props.variant,
+  size: props.size,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ToggleGroupRoot v-bind="forwarded" :class="cn('flex items-center justify-center gap-1', props.class)">
+    <slot />
+  </ToggleGroupRoot>
+</template>

package/src/components/ui/toggle-group/ToggleGroupItem.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority'
+import { type HTMLAttributes, computed, inject } from 'vue'
+import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'
+import { toggleVariants } from '../toggle'
+import { cn } from '../../../utils'
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+
+const props = defineProps<ToggleGroupItemProps & {
+  class?: HTMLAttributes['class']
+  variant?: ToggleGroupVariants['variant']
+  size?: ToggleGroupVariants['size']
+}>()
+
+const context = inject<ToggleGroupVariants>('toggleGroup')
+
+const delegatedProps = computed(() => {
+  const { class: _, variant, size, ...delegated } = props
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ToggleGroupItem
+    v-bind="forwardedProps" :class="cn(toggleVariants({
+      variant: context?.variant || variant,
+      size: context?.size || size,
+    }), props.class)"
+  >
+    <slot />
+  </ToggleGroupItem>
+</template>

package/src/components/ui/toggle-group/index.ts

@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from './ToggleGroup.vue'
+export { default as ToggleGroupItem } from './ToggleGroupItem.vue'

package/src/components/ui/tooltip/Tooltip.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipRoot v-bind="forwarded">
+    <slot />
+  </TooltipRoot>
+</template>

package/src/components/ui/tooltip/TooltipContent.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '../../../utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
+  sideOffset: 4,
+})
+
+const emits = defineEmits<TooltipContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent v-bind="{ ...forwarded, ...$attrs }" :class="cn('z-popover overflow-hidden rounded-lg border bg-popover glass-elevated [backdrop-filter:var(--glass-blur-elevated)] px-3 py-1.5 text-sm text-popover-foreground shadow-xl animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)">
+      <slot />
+    </TooltipContent>
+  </TooltipPortal>
+</template>

package/src/components/ui/tooltip/TooltipProvider.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { TooltipProvider, type TooltipProviderProps } from 'reka-ui'
+
+const props = defineProps<TooltipProviderProps>()
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>

package/src/components/ui/tooltip/TooltipTrigger.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger v-bind="props">
+    <slot />
+  </TooltipTrigger>
+</template>

package/src/components/ui/tooltip/index.ts

@@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue'
+export { default as TooltipContent } from './TooltipContent.vue'
+export { default as TooltipTrigger } from './TooltipTrigger.vue'
+export { default as TooltipProvider } from './TooltipProvider.vue'

package/src/composables/glass/index.ts

@@ -0,0 +1,8 @@
+export {
+    useGlassRenderer,
+    createGlassFilter,
+    destroyGlassFilter,
+    type GlassTier,
+    type GlassRendererOptions,
+    type GlassFilterState,
+} from "./useGlassRenderer";

package/src/composables/glass/useGlassRenderer.ts

@@ -0,0 +1,252 @@
+import { ref, onMounted } from "vue";
+
+export type GlassTier = "svg-filter" | "css" | "fallback";
+
+export interface GlassRendererOptions {
+    preferredTier?: GlassTier;
+}
+
+/**
+ * Detect best glass rendering tier.
+ *
+ * - svg-filter: Chromium — uses SVG feDisplacementMap inside backdrop-filter
+ * - css: All browsers — plain backdrop-filter blur
+ * - fallback: No backdrop-filter support
+ */
+function detectTier(): GlassTier {
+    // SVG filter in backdrop-filter only works in Chromium
+    const isChromium = !!(window as any).chrome;
+    if (isChromium && CSS.supports("backdrop-filter", "url(#x) blur(1px)")) {
+        return "svg-filter";
+    }
+    if (
+        CSS.supports("backdrop-filter", "blur(1px)") ||
+        CSS.supports("-webkit-backdrop-filter", "blur(1px)")
+    ) {
+        return "css";
+    }
+    return "fallback";
+}
+
+/**
+ * Generate a refraction displacement map on a canvas.
+ *
+ * The displacement map encodes Snell's law refraction as RGB:
+ * - R channel = X displacement (128 = neutral)
+ * - G channel = Y displacement (128 = neutral)
+ * - B channel = unused (128)
+ *
+ * Content behind the glass is displaced toward the center,
+ * simulating light bending through a convex glass surface.
+ */
+function generateDisplacementMap(
+    canvas: HTMLCanvasElement,
+    width: number,
+    height: number,
+    refractionStrength: number,
+): void {
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d")!;
+    const imageData = ctx.createImageData(width, height);
+    const data = imageData.data;
+
+    const cx = width / 2;
+    const cy = height / 2;
+    const maxR = Math.sqrt(cx * cx + cy * cy);
+
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            const dx = (x - cx) / cx; // -1 to 1
+            const dy = (y - cy) / cy; // -1 to 1
+            const dist = Math.sqrt(dx * dx + dy * dy);
+
+            // Snell's law: displacement increases toward edges
+            // Uses a smooth lens profile (parabolic with edge falloff)
+            const profile = dist * (1 - dist * 0.3) * refractionStrength;
+
+            // Displacement direction: toward center
+            const dispX = -dx * profile;
+            const dispY = -dy * profile;
+
+            // Encode as 0-255 where 128 = no displacement
+            const i = (y * width + x) * 4;
+            data[i] = Math.round(128 + dispX * 127); // R = X displacement
+            data[i + 1] = Math.round(128 + dispY * 127); // G = Y displacement
+            data[i + 2] = 128; // B = unused
+            data[i + 3] = 255; // A = full
+        }
+    }
+
+    ctx.putImageData(imageData, 0, 0);
+}
+
+/**
+ * Generate a specular highlight map for Fresnel-based edge lighting.
+ */
+function generateSpecularMap(
+    canvas: HTMLCanvasElement,
+    width: number,
+    height: number,
+): void {
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d")!;
+
+    // Radial gradient: bright at edges (Fresnel), dim at center
+    const cx = width / 2;
+    const cy = height / 2;
+    const r = Math.max(cx, cy);
+
+    const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, r);
+    grad.addColorStop(0, "rgba(255,255,255,0)");
+    grad.addColorStop(0.5, "rgba(255,255,255,0.02)");
+    grad.addColorStop(0.8, "rgba(255,255,255,0.06)");
+    grad.addColorStop(1, "rgba(255,255,255,0.12)");
+
+    ctx.fillStyle = grad;
+    ctx.fillRect(0, 0, width, height);
+
+    // Top-edge specular line (light catch)
+    const lineGrad = ctx.createLinearGradient(0, 0, width, 0);
+    lineGrad.addColorStop(0, "rgba(255,255,255,0)");
+    lineGrad.addColorStop(0.3, "rgba(255,255,255,0.15)");
+    lineGrad.addColorStop(0.5, "rgba(255,255,255,0.25)");
+    lineGrad.addColorStop(0.7, "rgba(255,255,255,0.15)");
+    lineGrad.addColorStop(1, "rgba(255,255,255,0)");
+    ctx.fillStyle = lineGrad;
+    ctx.fillRect(0, 0, width, 2);
+}
+
+let filterCounter = 0;
+
+export interface GlassFilterState {
+    filterId: string;
+    svgEl: SVGSVGElement;
+    dispCanvas: HTMLCanvasElement;
+    specCanvas: HTMLCanvasElement;
+    observer: ResizeObserver | null;
+}
+
+/**
+ * Create an SVG filter for glass refraction + frost.
+ *
+ * Architecture (Chromium SVG displacement approach):
+ * 1. Hidden canvas generates Snell's law displacement map
+ * 2. Inline SVG <filter> references the canvas via <feImage>
+ * 3. <feDisplacementMap> warps the backdrop using R/G channels
+ * 4. CSS `backdrop-filter: url(#filterId) blur(Xpx) saturate(Y)` applies it
+ *
+ * This naturally composites with whatever is behind the element —
+ * no texture capture, no WebGL context, no scroll sync needed.
+ */
+export function createGlassFilter(
+    el: HTMLElement,
+    opts: {
+        blur?: number;
+        refraction?: number;
+        chromaticAberration?: number;
+    } = {},
+): GlassFilterState {
+    const id = `glass-refract-${filterCounter++}`;
+    const blur = opts.blur ?? 16;
+    const refraction = opts.refraction ?? 0.3;
+    const _chromatic = opts.chromaticAberration ?? 0;
+
+    // Create displacement map canvas
+    const dispCanvas = document.createElement("canvas");
+    dispCanvas.style.display = "none";
+    document.body.appendChild(dispCanvas);
+
+    // Create specular map canvas
+    const specCanvas = document.createElement("canvas");
+    specCanvas.style.display = "none";
+    document.body.appendChild(specCanvas);
+
+    // Generate maps at element size
+    const rect = el.getBoundingClientRect();
+    const mapW = Math.max(Math.ceil(rect.width / 4), 32); // Low-res is fine for displacement
+    const mapH = Math.max(Math.ceil(rect.height / 4), 32);
+    generateDisplacementMap(dispCanvas, mapW, mapH, refraction);
+    generateSpecularMap(specCanvas, mapW, mapH);
+
+    // Create inline SVG filter
+    const svgNS = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(svgNS, "svg");
+    svg.setAttribute("width", "0");
+    svg.setAttribute("height", "0");
+    svg.style.position = "absolute";
+    svg.style.pointerEvents = "none";
+
+    // Displacement scale maps to pixel displacement
+    const dispScale = refraction * 30;
+
+    svg.innerHTML = `
+        <filter id="${id}" x="0%" y="0%" width="100%" height="100%" color-interpolation-filters="sRGB">
+            <feImage href="${dispCanvas.toDataURL()}" result="dispMap"
+                preserveAspectRatio="none" x="0%" y="0%" width="100%" height="100%" />
+            <feDisplacementMap in="SourceGraphic" in2="dispMap" result="refracted"
+                scale="${dispScale}" xChannelSelector="R" yChannelSelector="G" />
+            <feGaussianBlur in="refracted" stdDeviation="${blur * 0.3}" result="blurred" />
+            <feImage href="${specCanvas.toDataURL()}" result="specular"
+                preserveAspectRatio="none" x="0%" y="0%" width="100%" height="100%" />
+            <feBlend in="blurred" in2="specular" mode="screen" result="final" />
+        </filter>
+    `;
+
+    document.body.appendChild(svg);
+
+    // Apply the filter + additional CSS frost
+    el.style.backdropFilter = `url(#${id}) blur(${blur * 0.15}px) saturate(1.6) brightness(1.05)`;
+    el.style.setProperty("-webkit-backdrop-filter", el.style.backdropFilter);
+
+    // Add visible glass border
+    el.style.border = "1px solid rgba(255,255,255,0.25)";
+    el.style.boxShadow = `
+        inset 0 0.5px 0 0 rgba(255,255,255,0.3),
+        inset 0 -0.5px 0 0 rgba(0,0,0,0.05),
+        0 4px 16px rgba(0,0,0,0.08)
+    `;
+
+    // Resize handler
+    const observer = new ResizeObserver(() => {
+        const r = el.getBoundingClientRect();
+        const w = Math.max(Math.ceil(r.width / 4), 32);
+        const h = Math.max(Math.ceil(r.height / 4), 32);
+        generateDisplacementMap(dispCanvas, w, h, refraction);
+        generateSpecularMap(specCanvas, w, h);
+
+        // Update SVG feImage hrefs
+        const feImages = svg.querySelectorAll("feImage");
+        if (feImages[0]) feImages[0].setAttribute("href", dispCanvas.toDataURL());
+        if (feImages[1]) feImages[1].setAttribute("href", specCanvas.toDataURL());
+    });
+    observer.observe(el);
+
+    return { filterId: id, svgEl: svg, dispCanvas, specCanvas, observer };
+}
+
+/**
+ * Remove a glass filter and clean up DOM elements.
+ */
+export function destroyGlassFilter(state: GlassFilterState) {
+    state.observer?.disconnect();
+    state.svgEl.remove();
+    state.dispCanvas.remove();
+    state.specCanvas.remove();
+}
+
+/**
+ * Composable for tiered glass rendering.
+ */
+export function useGlassRenderer(options?: GlassRendererOptions) {
+    const tier = ref<GlassTier>(options?.preferredTier ?? "css");
+
+    onMounted(() => {
+        if (!options?.preferredTier) {
+            tier.value = detectTier();
+        }
+    });
+
+    return { tier };
+}

package/src/composables/glass/webgl/frostShader.ts

@@ -0,0 +1,221 @@
+/**
+ * WebGL frost/refraction fragment shader for glass-ui.
+ *
+ * Features:
+ * - Frosted glass blur (Gaussian kernel with spatial variation)
+ * - Snell's law refraction displacement
+ * - Fresnel-based specular highlights
+ * - Chromatic aberration at glass edges
+ */
+
+/** Vertex shader — full-screen quad */
+export const VERTEX_SHADER = /* glsl */ `#version 300 es
+precision highp float;
+
+in vec2 a_position;
+in vec2 a_texCoord;
+
+out vec2 v_texCoord;
+
+void main() {
+    gl_Position = vec4(a_position, 0.0, 1.0);
+    v_texCoord = a_texCoord;
+}
+`;
+
+/** Fragment shader — frosted glass with refraction and chromatic aberration */
+export const FRAGMENT_SHADER = /* glsl */ `#version 300 es
+precision highp float;
+
+uniform sampler2D u_background;    // Captured page content behind glass
+uniform vec2 u_resolution;         // Canvas resolution (px)
+uniform vec4 u_glassBounds;        // Glass panel rect (x, y, w, h) in UV space
+uniform float u_blurRadius;        // Base blur radius (0-40)
+uniform float u_refractionStrength; // Refraction displacement (0-1)
+uniform float u_chromaticAberration; // Edge chromatic aberration (0-1)
+uniform vec2 u_lightPos;           // Light source position (UV, 0-1)
+uniform float u_time;              // Animation time (seconds)
+
+in vec2 v_texCoord;
+out vec4 fragColor;
+
+// Gaussian weight for blur kernel
+float gaussian(float x, float sigma) {
+    return exp(-(x * x) / (2.0 * sigma * sigma));
+}
+
+// Distance from point to nearest edge of glass panel (in UV space)
+float edgeDistance(vec2 uv) {
+    vec2 glassMin = u_glassBounds.xy;
+    vec2 glassMax = u_glassBounds.xy + u_glassBounds.zw;
+    vec2 d = min(uv - glassMin, glassMax - uv);
+    return min(d.x, d.y);
+}
+
+// Fresnel approximation (Schlick)
+float fresnel(vec3 viewDir, vec3 normal, float ior) {
+    float r0 = pow((1.0 - ior) / (1.0 + ior), 2.0);
+    return r0 + (1.0 - r0) * pow(1.0 - max(dot(viewDir, normal), 0.0), 5.0);
+}
+
+void main() {
+    vec2 uv = v_texCoord;
+    vec2 pixelSize = 1.0 / u_resolution;
+
+    // Check if fragment is inside the glass panel
+    vec2 glassMin = u_glassBounds.xy;
+    vec2 glassMax = u_glassBounds.xy + u_glassBounds.zw;
+
+    if (uv.x < glassMin.x || uv.x > glassMax.x ||
+        uv.y < glassMin.y || uv.y > glassMax.y) {
+        fragColor = texture(u_background, uv);
+        return;
+    }
+
+    // Progressive blur — stronger at center, weaker at edges
+    float edgeDist = edgeDistance(uv);
+    float maxEdgeDist = min(u_glassBounds.z, u_glassBounds.w) * 0.5;
+    float blurFactor = smoothstep(0.0, maxEdgeDist * 0.3, edgeDist);
+    float effectiveBlur = u_blurRadius * (0.4 + 0.6 * blurFactor);
+
+    // Refraction displacement (Snell's law approximation)
+    vec2 center = u_glassBounds.xy + u_glassBounds.zw * 0.5;
+    vec2 fromCenter = uv - center;
+    vec2 refractionOffset = fromCenter * u_refractionStrength * 0.02;
+
+    // Gaussian blur with refraction offset
+    vec3 blurColor = vec3(0.0);
+    float totalWeight = 0.0;
+
+    int samples = int(min(effectiveBlur * 2.0, 20.0));
+    float sigma = max(effectiveBlur * 0.5, 0.1);
+
+    for (int x = -10; x <= 10; x++) {
+        for (int y = -10; y <= 10; y++) {
+            if (abs(x) > samples || abs(y) > samples) continue;
+
+            vec2 offset = vec2(float(x), float(y)) * pixelSize * effectiveBlur * 0.1;
+            float weight = gaussian(float(x), sigma) * gaussian(float(y), sigma);
+
+            vec2 sampleUV = uv + offset + refractionOffset;
+            blurColor += texture(u_background, sampleUV).rgb * weight;
+            totalWeight += weight;
+        }
+    }
+    blurColor /= totalWeight;
+
+    // Chromatic aberration at edges
+    if (u_chromaticAberration > 0.0) {
+        float edgeStrength = 1.0 - smoothstep(0.0, maxEdgeDist * 0.15, edgeDist);
+        vec2 aberrationDir = normalize(fromCenter) * edgeStrength * u_chromaticAberration * 0.003;
+
+        float r = texture(u_background, uv + refractionOffset + aberrationDir).r;
+        float b = texture(u_background, uv + refractionOffset - aberrationDir).b;
+        blurColor.r = mix(blurColor.r, r, edgeStrength * 0.5);
+        blurColor.b = mix(blurColor.b, b, edgeStrength * 0.5);
+    }
+
+    // Specular highlight (Fresnel)
+    vec3 viewDir = vec3(0.0, 0.0, 1.0);
+    vec2 normalXY = fromCenter / (u_glassBounds.zw * 0.5);
+    vec3 normal = normalize(vec3(normalXY * 0.3, 1.0));
+    float spec = fresnel(viewDir, normal, 1.5);
+
+    // Light-source-aware specular
+    vec2 lightDir = normalize(u_lightPos - uv);
+    float lightDot = max(dot(normalXY, lightDir), 0.0);
+    spec *= 0.3 + 0.7 * lightDot;
+
+    // Combine: frosted blur + specular + slight tint
+    vec3 tint = vec3(1.0, 1.0, 1.0); // neutral tint
+    vec3 result = blurColor * tint + vec3(spec * 0.15);
+
+    // Glass opacity with frosted appearance
+    float alpha = 0.85 + spec * 0.1;
+    fragColor = vec4(result, alpha);
+}
+`;
+
+/** Shader program setup — compiles and links vertex + fragment shaders */
+export function createFrostProgram(
+    gl: WebGL2RenderingContext | WebGLRenderingContext,
+): WebGLProgram | null {
+    const vertShader = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
+    const fragShader = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
+    if (!vertShader || !fragShader) return null;
+
+    const program = gl.createProgram();
+    if (!program) return null;
+
+    gl.attachShader(program, vertShader);
+    gl.attachShader(program, fragShader);
+    gl.linkProgram(program);
+
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        console.error(
+            "glass-ui: frost shader link error:",
+            gl.getProgramInfoLog(program),
+        );
+        gl.deleteProgram(program);
+        return null;
+    }
+
+    return program;
+}
+
+function compileShader(
+    gl: WebGL2RenderingContext | WebGLRenderingContext,
+    type: number,
+    source: string,
+): WebGLShader | null {
+    const shader = gl.createShader(type);
+    if (!shader) return null;
+
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        console.error(
+            "glass-ui: shader compile error:",
+            gl.getShaderInfoLog(shader),
+        );
+        gl.deleteShader(shader);
+        return null;
+    }
+
+    return shader;
+}
+
+/** Uniform locations cache for the frost program */
+export interface FrostUniforms {
+    u_background: WebGLUniformLocation | null;
+    u_resolution: WebGLUniformLocation | null;
+    u_glassBounds: WebGLUniformLocation | null;
+    u_blurRadius: WebGLUniformLocation | null;
+    u_refractionStrength: WebGLUniformLocation | null;
+    u_chromaticAberration: WebGLUniformLocation | null;
+    u_lightPos: WebGLUniformLocation | null;
+    u_time: WebGLUniformLocation | null;
+}
+
+export function getFrostUniforms(
+    gl: WebGL2RenderingContext | WebGLRenderingContext,
+    program: WebGLProgram,
+): FrostUniforms {
+    return {
+        u_background: gl.getUniformLocation(program, "u_background"),
+        u_resolution: gl.getUniformLocation(program, "u_resolution"),
+        u_glassBounds: gl.getUniformLocation(program, "u_glassBounds"),
+        u_blurRadius: gl.getUniformLocation(program, "u_blurRadius"),
+        u_refractionStrength: gl.getUniformLocation(
+            program,
+            "u_refractionStrength",
+        ),
+        u_chromaticAberration: gl.getUniformLocation(
+            program,
+            "u_chromaticAberration",
+        ),
+        u_lightPos: gl.getUniformLocation(program, "u_lightPos"),
+        u_time: gl.getUniformLocation(program, "u_time"),
+    };
+}