Liquid Glass

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Liquid Glass Card - Optimized with Shadcn UI
6 * @version: 2.0.0
7 * @date: 2025-10-11
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import { cva, type VariantProps } from "class-variance-authority";
14import {
15  ArrowLeft,
16  ArrowRight,
17  MoreHorizontal,
18  Pause,
19  Play,
20} from "lucide-react";
21import Image from "next/image";
22import React from "react";
23import { Button, type ButtonProps } from "@/components/ui/button";
24import { Card } from "@/components/ui/card";
25import { cn } from "@/lib/utils";
26 
27// Constants for better maintainability
28const GLASS_SHADOW_LIGHT =
29  "shadow-[0_0_6px_rgba(0,0,0,0.03),0_2px_6px_rgba(0,0,0,0.08),inset_3px_3px_0.5px_-3px_rgba(0,0,0,0.9),inset_-3px_-3px_0.5px_-3px_rgba(0,0,0,0.85),inset_1px_1px_1px_-0.5px_rgba(0,0,0,0.6),inset_-1px_-1px_1px_-0.5px_rgba(0,0,0,0.6),inset_0_0_6px_6px_rgba(0,0,0,0.12),inset_0_0_2px_2px_rgba(0,0,0,0.06),0_0_12px_rgba(255,255,255,0.15)]";
30 
31const GLASS_SHADOW_DARK =
32  "dark:shadow-[0_0_8px_rgba(0,0,0,0.03),0_2px_6px_rgba(0,0,0,0.08),inset_3px_3px_0.5px_-3.5px_rgba(255,255,255,0.09),inset_-3px_-3px_0.5px_-3.5px_rgba(255,255,255,0.85),inset_1px_1px_1px_-0.5px_rgba(255,255,255,0.6),inset_-1px_-1px_1px_-0.5px_rgba(255,255,255,0.6),inset_0_0_6px_6px_rgba(255,255,255,0.12),inset_0_0_2px_2px_rgba(255,255,255,0.06),0_0_12px_rgba(0,0,0,0.15)]";
33 
34const GLASS_SHADOW = `${GLASS_SHADOW_LIGHT} ${GLASS_SHADOW_DARK}`;
35 
36const DEFAULT_GLASS_FILTER_SCALE = 30;
37const BUTTON_GLASS_FILTER_SCALE = 70;
38 
39// Shared glass filter component
40interface GlassFilterProps {
41  id: string;
42  scale?: number;
43}
44 
45const GlassFilter = React.memo(
46  ({ id, scale = DEFAULT_GLASS_FILTER_SCALE }: GlassFilterProps) => (
47    <svg aria-hidden="true" className="hidden" focusable={false}>
48      <title>Glass Effect Filter</title>
49      <defs>
50        <filter
51          colorInterpolationFilters="sRGB"
52          height="200%"
53          id={id}
54          width="200%"
55          x="-50%"
56          y="-50%"
57        >
58          <feTurbulence
59            baseFrequency="0.05 0.05"
60            numOctaves="1"
61            result="turbulence"
62            seed="1"
63            type="fractalNoise"
64          />
65          <feGaussianBlur
66            in="turbulence"
67            result="blurredNoise"
68            stdDeviation="2"
69          />
70          <feDisplacementMap
71            in="SourceGraphic"
72            in2="blurredNoise"
73// … truncated