Glass Effect Filter

50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T3861,"use client"; /** * @author: @dorianbaffier * @description: Liquid Glass Card - Optimized with Shadcn UI * @version: 2.0.0 * @date: 2025-10-11 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { cva, type VariantProps } from "class-variance-authority"; import { ArrowLeft, ArrowRight, MoreHorizontal, Pause, Play, } from "lucide-react"; import Image from "next/image"; import React from "react"; import { Button, type ButtonProps } from "@/components/ui/button"; import { Card } from "@/components/ui/card"; import { cn } from "@/lib/utils"; // Constants for better maintainability const GLASS_SHADOW_LIGHT = "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)]"; const GLASS_SHADOW_DARK = "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)]"; const GLASS_SHADOW = `${GLASS_SHADOW_LIGHT} ${GLASS_SHADOW_DARK}`; const DEFAULT_GLASS_FILTER_SCALE = 30; const BUTTON_GLASS_FILTER_SCALE = 70; // Shared glass filter component interface GlassFilterProps { id: string; scale?: number; } const GlassFilter = React.memo( ({ id, scale = DEFAULT_GLASS_FILTER_SCALE }: GlassFilterProps) => ( ) ); GlassFilter.displayName = "GlassFilter"; // Liquid Button - extends shadcn Button with glass effect const liquidButtonVariants = cva( "relative transition-transform duration-200 motion-reduce:transition-none", { variants: { liquidVariant: { default: "active:scale-[0.97] motion-reduce:active:scale-100 motion-reduce:hover:scale-100 [@media(hover:hover)]:hover:scale-105", none: "", }, }, defaultVariants: { liquidVariant: "default", }, } ); export type LiquidButtonProps = ButtonProps & VariantProps; function LiquidButton({ className, liquidVariant = "default", children, ...props }: LiquidButtonProps) { const filterId = React.useId(); return ( <> ); } // Liquid Glass Card - extends shadcn Card with glass effect const liquidGlassCardVariants = cva( "group relative overflow-hidden bg-background/20 backdrop-blur-[2px]", { variants: { glassSize: { sm: "p-4", default: "p-6", lg: "p-8", }, }, defaultVariants: { glassSize: "default", }, } ); export type LiquidGlassCardProps = React.HTMLAttributes & VariantProps & { glassEffect?: boolean; }; function LiquidGlassCard({ className, glassSize, glassEffect = true, children, ...props }: LiquidGlassCardProps) { const filterId = React.useId(); return (

{glassEffect && ( <>

)}

{children}

); } // Demo: Music Player Card const TOTAL_DURATION = 45; const VOLUME_BAR_COUNT = 8; const SEEK_JUMP_SECONDS = 5; const TIMER_INTERVAL_MS = 1000; const STATIC_BAR_HEIGHT = "6px"; const MIN_TIME = 0; const BAR_DELAY_INCREMENT = 0.1; const PROGRESS_PERCENTAGE_MULTIPLIER = 100; const formatTime = (timeInSeconds: number): string => { const minutes = Math.floor(timeInSeconds / 60); const seconds = Math.floor(timeInSeconds % 60); return `${minutes}:${seconds.toString().padStart(2, "0")}`; }; interface VolumeBarsProps { isPlaying: boolean; } const VolumeBars = React.memo(({ isPlaying }: VolumeBarsProps) => { const bars = Array.from({ length: VOLUME_BAR_COUNT }, (_, i) => ({ id: `bar-${i}`, delay: i * BAR_DELAY_INCREMENT, })); return (

{bars.map((bar) => (

))}

); }); VolumeBars.displayName = "VolumeBars"; interface ProgressBarProps { currentTime: number; totalDuration: number; onSeek: (newTime: number) => void; } const ProgressBar = React.memo( ({ currentTime, totalDuration, onSeek }: ProgressBarProps) => { const progress = (currentTime / totalDuration) * PROGRESS_PERCENTAGE_MULTIPLIER; const handleClick = (e: React.MouseEvent) => { const bar = e.currentTarget; const rect = bar.getBoundingClientRect(); const x = e.clientX - rect.left; const percent = x / rect.width; const newTime = Math.min( Math.max(MIN_TIME, percent * totalDuration), totalDuration ); onSeek(newTime); }; const handleKeyDown = (e: React.KeyboardEvent) => { switch (e.key) { case "ArrowRight": e.preventDefault(); onSeek(Math.min(currentTime + SEEK_JUMP_SECONDS, totalDuration)); break; case "ArrowLeft": e.preventDefault(); onSeek(Math.max(currentTime - SEEK_JUMP_SECONDS, MIN_TIME)); break; case "Home": e.preventDefault(); onSeek(MIN_TIME); break; case "End": e.preventDefault(); onSeek(totalDuration); break; default: break; } }; return ( <>

{formatTime(currentTime)} {formatTime(totalDuration)}

); } ); ProgressBar.displayName = "ProgressBar"; export function NotificationCenter() { const [isPlaying, setIsPlaying] = React.useState(true); const [currentTime, setCurrentTime] = React.useState(MIN_TIME); const rootRef = React.useRef(null); const [isVisible, setIsVisible] = React.useState(true); // Only tick while on screen — an off-screen interval keeps waking the main // thread and re-rendering for a component nobody can see. React.useEffect(() => { const element = rootRef.current; if (!element) { return; } const observer = new IntersectionObserver( ([entry]) => setIsVisible(entry.isIntersecting), { rootMargin: "100px" } ); observer.observe(element); return () => observer.disconnect(); }, []); React.useEffect(() => { if (!(isPlaying && isVisible)) { return; } const intervalId = setInterval(() => { setCurrentTime((prev) => prev + 1 >= TOTAL_DURATION ? TOTAL_DURATION : prev + 1 ); }, TIMER_INTERVAL_MS); return () => clearInterval(intervalId); }, [isPlaying, isVisible]); React.useEffect(() => { if (currentTime >= TOTAL_DURATION) { setIsPlaying(false); } }, [currentTime]); const handlePlayPause = () => { setIsPlaying((prev) => !prev); }; const handleSeek = (newTime: number) => { setCurrentTime(newTime); if (newTime < TOTAL_DURATION && !isPlaying) { setIsPlaying(true); } }; return (

Glow

Echo

{isPlaying ? ( ) : ( )}

); } export { LiquidButton, LiquidGlassCard }; export default NotificationCenter; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@catalogs","registryDependencies":["card","button"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"/components/kokonutui/liquid-glass-card.tsx","content":"$52","type":"registry:component","target":"components/kokonutui/liquid-glass-card.tsx"}],"className":"h-[70svh] min-h-80"}]]}]