Glass Dock

1"use client";
2 
3import { Glass, isSafariBrowser, useHydrated } from "@/components/ui/glass";
4import {
5  cubicBezier,
6  glassEase,
7  MotionValue,
8  prefersReducedMotion,
9  SpringDriver,
10  tween,
11} from "@/components/ui/glass-motion";
12import { cn } from "@/lib/utils";
13import {
14  type PointerEvent,
15  type ReactNode,
16  useCallback,
17  useEffect,
18  useRef,
19  useState,
20} from "react";
21 
22type GlassMode = "individual" | "combined";
23type GlassSpecular = "inside" | "outside" | "none";
24type ShadowTone = "neutral" | "warm" | "cool";
25 
26interface LiquidGlassConfig {
27  blur: { enabled: boolean; value: number };
28  mode: GlassMode;
29  refraction: { amount: number; enabled: boolean; thickness: number };
30  shadow: { tone: ShadowTone; value: number };
31  specular: GlassSpecular;
32  translucency: { enabled: boolean; value: number };
33}
34 
35const DEFAULT_LIQUID_GLASS: LiquidGlassConfig = {
36  mode: "individual",
37  specular: "inside",
38  blur: { enabled: false, value: 0 },
39  refraction: { enabled: true, amount: 20.2, thickness: 15.9 },
40  translucency: { enabled: true, value: 0 },
41  shadow: { tone: "neutral", value: 22 },
42};
43 
44interface ResolvedGlass {
45  chroma: number;
46  edgeHighlight: number;
47  glow: number;
48  scale: number;
49  tint: number;
50}
51 
52function resolveGlass(config: LiquidGlassConfig): ResolvedGlass {
53  const refr = config.refraction.enabled ? config.refraction.amount / 100 : 0;
54  const specOn = config.specular !== "none";
55  return {
56    scale: refr * 0.5,
57    chroma: config.refraction.enabled ? Math.min(0.5, refr * 1.5) : 0,
58    tint: config.translucency.enabled ? config.translucency.value / 100 : 0,
59    edgeHighlight: specOn ? 0.3 : 0,
60    glow: specOn ? 0.12 : 0,
61  };
62}
63 
64const DOCK_W = 392;
65const DOCK_H = 84;
66const CAP_SCALE = 2;
67const BOTTOM_INSET = 18;
68const PAD_X = 10;
69const PAD_Y = 9;
70const ITEM_GAP = 4;
71const COL = (DOCK_W - 2 * PAD_X - 3 * ITEM_GAP) / 4;
72const LENS_W = COL - 4;
73const LENS_H = 64;
74const PILL_H = 64;
75const PILL_RADIUS = 32;
76const BAR_RADIUS = 42;
77const BAR_GLASS_TRIM = 42;
78const BAR_GLASS_MUL = 0.7;
79const POS_SPRING = { stiffness: 90, damping: 18, restDelta: 0.5, restSpeed: 6 };
80const MAX_MUL = 0.66;
81const LIFT_UP = 0.16;
82const LIFT_DOWN = 0.3;
83const LENS_GROW = 0.2;
84const LENS_TINT = 0.35;
85const ARRIVE = 16;
86const FADE_EASE = cubicBezier(0, 0, 0.58, 1);
87 
88const ACCENT = "#58a6ff";
89const IDLE = "rgba(255,255,255,0.82)";
90const HOVER = "#ffffff";
91const BADGE_BG = "#ff514c";
92const PILL_GREY = "rgba(255,255,255,0.16)";
93const PILL_SHADOW =
94// … truncated