use-glass-support

1"use client";
2 
3import * as React from "react";
4import type { GlassQuality } from "../lib/glass/types";
5 
6function detectQuality(): GlassQuality {
7  if (
8    typeof window === "undefined" ||
9    typeof window.CSS?.supports !== "function"
10  ) {
11    return "none";
12  }
13 
14  const reducedTransparency = window.matchMedia?.(
15    "(prefers-reduced-transparency: reduce)",
16  ).matches;
17  if (reducedTransparency) return "none";
18 
19  const supportsBackdropFilter =
20    CSS.supports("backdrop-filter", "blur(1px)") ||
21    CSS.supports("-webkit-backdrop-filter", "blur(1px)");
22  if (!supportsBackdropFilter) return "none";
23 
24  // Only Chromium currently honors an SVG filter reference layered inside
25  // backdrop-filter, so that's the signal we use to unlock the full
26  // refraction pass. Everyone else still gets blur + saturate + specular.
27  const isChromium =
28    /Chrome|Chromium|Edg\//.test(navigator.userAgent) &&
29    !/OPR\//.test(navigator.userAgent);
30 
31  return isChromium ? "full" : "reduced";
32}
33 
34/**
35 * Feature-detects how much of the glass effect the current browser/user
36 * preference can render, so components can degrade gracefully instead of
37 * shipping a broken filter.
38 */
39export function useGlassSupport(): GlassQuality {
40  const [quality, setQuality] = React.useState<GlassQuality>("reduced");
41 
42  React.useEffect(() => {
43    setQuality(detectQuality());
44 
45    const media = window.matchMedia?.("(prefers-reduced-transparency: reduce)");
46    const handleChange = () => setQuality(detectQuality());
47    media?.addEventListener("change", handleChange);
48    return () => media?.removeEventListener("change", handleChange);
49  }, []);
50 
51  return quality;
52}