Glass Effect Filter

"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, 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-300", { variants: { liquidVariant: { default: "hover:scale-105", none: "", }, }, defaultVariants: { liquidVariant: "default", }, }); export type LiquidButtonProps = ButtonProps & { liquidVariant?: "default" | "none"; }; 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] transition-all duration-300", { 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) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); const newTime = Math.min( currentTime + SEEK_JUMP_SECONDS, totalDuration ); onSeek(newTime); } }; return ( <>

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

); } ); ProgressBar.displayName = "ProgressBar"; export function NotificationCenter() { const [isPlaying, setIsPlaying] = React.useState(true); const [currentTime, setCurrentTime] = React.useState(MIN_TIME); React.useEffect(() => { if (!isPlaying || currentTime >= TOTAL_DURATION) { return; } const intervalId = setInterval(() => { setCurrentTime((prev) => { if (prev >= TOTAL_DURATION) { setIsPlaying(false); return TOTAL_DURATION; } return prev + 1; }); }, TIMER_INTERVAL_MS); return () => clearInterval(intervalId); }, [isPlaying, 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;

Liquid Glass

Instalação

Dependências

Registry dependencies