@mkbabb/glass-ui 0.2.0 → 2.0.0

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

@@ -1,27 +0,0 @@
-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

@@ -1,34 +0,0 @@
-<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

@@ -1,35 +0,0 @@
-<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

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

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

@@ -1,14 +0,0 @@
-<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

@@ -1,31 +0,0 @@
-<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

@@ -1,11 +0,0 @@
-<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

@@ -1,11 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-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

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

package/src/composables/glass/useGlassRenderer.ts

@@ -1,252 +0,0 @@
-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

@@ -1,221 +0,0 @@
-/**
- * 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"),
-    };
-}