Apple Glass Effect

1import React, { useId, memo } from "react";
2import { cn } from "@/lib/utils";
3 
4interface GlassContainerProps {
5  children: React.ReactNode;
6  className?: string;
7  variant?: "default" | "prominent" | "regular" | "thin";
8  blur?: number;
9  opacity?: number;
10  distortion?: "none" | "subtle" | "medium" | "strong";
11  tint?: "neutral" | "warm" | "cool" | "vibrant";
12  border?: boolean;
13  hover?: boolean;
14  glassOverlay?: boolean;
15  highlightColor?: string;
16  highlightOpacity?: number;
17  innerGlowColor?: string;
18  innerGlowOpacity?: number;
19  specularIntensity?: number;
20}
21 
22export const GlassContainer: React.FC<
23  GlassContainerProps & React.HTMLAttributes<HTMLDivElement>
24> = memo(
25  ({
26    children,
27    className = "",
28    variant = "default",
29    blur,
30    opacity,
31    distortion = "medium",
32    tint = "warm",
33    border = true,
34    hover = true,
35    glassOverlay = true,
36    highlightColor = "rgba(255, 255, 255, 0.4)",
37    highlightOpacity = 1,
38    innerGlowColor = "rgba(255, 255, 255, 0.1)",
39    innerGlowOpacity = 1,
40    specularIntensity = 0.4,
41    ...props
42  }) => {
43    // Variant-specific configurations
44    const variantConfig = {
45      default: { blur: 20, opacity: 0.25 },
46      prominent: { blur: 30, opacity: 0.35 },
47      regular: { blur: 15, opacity: 0.2 },
48      thin: { blur: 10, opacity: 0.15 },
49    };
50 
51    const config = variantConfig[variant];
52    const finalBlur = blur !== undefined ? blur : config.blur;
53    const finalOpacity = opacity !== undefined ? opacity : config.opacity;
54 
55    // Distortion configurations
56    const distortionConfig = {
57      none: { scale: 0, frequency: 0 },
58      subtle: { scale: 50, frequency: 0.008 },
59      medium: { scale: 70, frequency: 0.008 },
60      strong: { scale: 120, frequency: 0.012 },
61    };
62 
63    // Tint configurations
64    const tintStyles = {
65      neutral: "rgba(255, 255, 255, 0.25)",
66      warm: "rgba(255, 248, 240, 0.3)",
67      cool: "rgba(240, 248, 255, 0.3)",
68      vibrant: "rgba(255, 255, 255, 0.35)",
69    };
70 
71    const distortConfig = distortionConfig[distortion];
72 
73    // Generate a consistent filter ID
74    const baseId = useId();
75    const filterId = `glass-filter-${baseId}`;
76 
77    return (
78      <div
79        className={cn(
80          "relative font-semibold text-white cursor-pointer bg-transparent overflow-hidden transition-all duration-400 rounded-4xl p-4 shadow-lg",
81          hover && "hover:scale-[1.02] hover:shadow-2xl",
82          border && "border border-white/25",
83          className,
84        )}
85// … truncated