glass-core

1"use client";
2 
3import * as React from "react";
4import { GLASS_DISPLACEMENT } from "./config";
5import { buildDisplacementMap, resolveBand } from "./displacement";
6import type { GlassVariant } from "./types";
7 
8interface GlassFilterProps {
9  id: string;
10  variant: GlassVariant;
11  width: number;
12  height: number;
13  radius: number;
14}
15 
16/**
17 * Renders the hidden SVG that holds the actual refraction filter. Referenced
18 * from CSS as `backdrop-filter: blur(...) url(#id)`. Chromium applies the
19 * full displacement + chromatic-aberration chain; browsers that don't
20 * support an SVG filter reference inside backdrop-filter simply ignore it
21 * and fall back to the blur/saturate/specular layers, which is why this
22 * only ever adds a bonus layer, never load-bearing.
23 */
24export function GlassFilter({
25  id,
26  variant,
27  width,
28  height,
29  radius,
30}: GlassFilterProps) {
31  const cfg = GLASS_DISPLACEMENT[variant];
32 
33  /**
34   * How much of the configured bevel this element can carry. Small controls get
35   * a narrower band (see `resolveBand`) and the deflection has to come down
36   * with it: bending the backdrop further than the band is wide drags samples
37   * from past the far side of the rim.
38   */
39  const scale = resolveBand(width, height, cfg.edge) / cfg.edge;
40  const strength = cfg.strength * scale;
41 
42  /** px of slack around the element: enough for the blurred map to settle and
43   *  for the rim to sample backdrop from just outside the border box */
44  const margin = Math.ceil(strength + cfg.blur * 3);
45 
46  const mapUri = React.useMemo(() => {
47    if (width <= 0 || height <= 0) return null;
48    return buildDisplacementMap({
49      width,
50      height,
51      radius,
52      edge: cfg.edge,
53      margin,
54    });
55  }, [width, height, radius, cfg.edge, margin]);
56 
57  if (!mapUri) return null;
58 
59  /* the map's full deflection is 127/255 off centre, i.e. half a unit, so a
60     `scale` of 2n buys n px of pull at the rim — config states the px. */
61  const base = strength * 2;
62  const aberration = cfg.chromaticAberration * scale * 2;
63 
64  return (
65    <svg
66      aria-hidden="true"
67      focusable="false"
68      className="absolute h-0 w-0 overflow-hidden"
69    >
70      <defs>
71        {/* everything sized in px against the element's own box: with
72            percentage regions the map's placement is left to the filter
73            region and the backdrop ends up offset from the surface it
74            belongs to */}
75        <filter
76          id={id}
77          filterUnits="userSpaceOnUse"
78// … truncated