Glass Refraction Panel

"use client";

import { useEffect, useId, useRef } from "react";
import type { CSSProperties, ReactNode } from "react";

/**
 * GlassRefractionPanel — a card of liquid glass: it bends what is behind it
 * at the rim instead of only blurring it.
 *
 * Four things make it glass rather than frost:
 * 1. REFRACTION. In Chromium the panel measures itself and generates a
 *    displacement map for its exact size, run inside backdrop-filter, so the
 *    backdrop visibly curves at the edge like light through a thick pane. The
 *    bezel scales with the panel (a big panel is a thicker pane), and the
 *    offset is capped at 0.4 of the bezel so text behind never melts into
 *    mirrored blobs. Safari and Firefox cannot run SVG filters in
 *    backdrop-filter yet; they get the rest, which still reads as glass.
 * 2. SATURATION. Blur alone is fog. The backdrop is blurred, saturated and

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}