Glass Refraction Panel

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6import { useReducedMotion, useVisibilityPause } from "@/lib/motiq";
7 
8/* -------------------------------------------------------------------------- */
9/* Types                                                                      */
10/* -------------------------------------------------------------------------- */
11 
12export interface GlassRefractionLayer {
13  /** Stable key. */
14  id: string;
15  /** Layer content — a chip, a stat, a badge. */
16  node: React.ReactNode;
17  /** Parallax depth in px. Bigger travels further and reads nearer. */
18  depth?: number;
19  /** Placement inside the panel (percentages keep it fluid). */
20  position?: Pick<React.CSSProperties, "top" | "right" | "bottom" | "left">;
21}
22 
23export interface GlassRefractionPanelProps extends React.HTMLAttributes<HTMLDivElement> {
24  /** Content of the main (front) glass pane. */
25  children?: React.ReactNode;
26  /** Extra floating glass panes at their own depths. */
27  layers?: GlassRefractionLayer[];
28  /** Live scene painted behind the glass. */
29  scene?: "orbs" | "none";
30  /** Backdrop blur radius in px. */
31  blur?: number;
32  /** Depth multiplier for the parallax; 0 disables it. */
33  parallax?: number;
34  /** Sweep a specular band across the main pane on every viewport entry. */
35  streakOnEnter?: boolean;
36  /** Glass fill override (any CSS color). */
37  tint?: string;
38  /** Parallax spring — critically damped (ζ≈1.0) so panes settle without wobble. */
39  spring?: { stiffness?: number; damping?: number };
40  /** Depth of the main pane in px. */
41  mainDepth?: number;
42  /** Width of the main pane — any CSS length. The panel itself is always fluid. */
43  paneWidth?: string;
44  /** Minimum panel height in px. */
45  minHeight?: number;
46  /** Deterministic seed for the orb phases (SSR-stable). */
47  seed?: number;
48  /** Park the loop while scrolled offscreen or the tab is hidden. */
49  pauseWhenHidden?: boolean;
50  /** Force the static, motion-free frame regardless of system preference. */
51  reducedMotion?: boolean;
52}
53 
54/* -------------------------------------------------------------------------- */
55/* Physics + palette                                                          */
56/* -------------------------------------------------------------------------- */
57 
58/** Hand-rolled delta-time spring — keeps the component dependency-free. */
59class Spring {
60  x: number;
61  v = 0;
62  target: number;
63  k: number;
64  d: number;
65// … truncated