Glass Card

1npm install framer-motion clsx tailwind-merge

1"use client";
2
3import { motion } from "framer-motion";
4import { cn } from "@/lib/utils";
5
6export default function GlassCard({ 
7  children, 
8  className,
9  title = "Glass Card",
10  subtitle = "Premium frosted glass effect"
11}) {
12  return (
13    <motion.div
14      initial={{ opacity: 0, y: 20 }}
15      animate={{ opacity: 1, y: 0 }}
16      transition={{ duration: 0.5, ease: "easeOut" }}
17      className={cn(
18        "relative overflow-hidden rounded-2xl p-8 max-w-sm w-full mx-auto",
19        "bg-white/5 backdrop-blur-xl border border-white/10 shadow-[0_8px_32px_0_rgba(0,0,0,0.4)]",
20        className
21      )}
22    >
23      {/* Glossy reflection on top */}
24      <div className="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-white/30 to-transparent" />
25      
26      {/* Inner ambient glow */}
27      <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none" />
28
29      <div className="relative z-10 flex flex-col gap-4">
30        <div className="space-y-1 text-left">
31          <h3 className="text-xl font-semibold text-white tracking-tight">{title}</h3>
32          <p className="text-sm text-white/50">{subtitle}</p>
33        </div>
34        
35        <div className="w-full h-[1px] bg-white/10 my-2" />
36        
37        <div className="text-white/80 font-light leading-relaxed">
38          {children || (
39            <p>
40              This card utilizes advanced backdrop filters and multi-layered gradients to achieve 
41              a premium, state-of-the-art glassmorphism aesthetic. It instantly elevates the interface.
42            </p>
43          )}
44        </div>
45        
46        <button className="mt-4 px-4 py-2 rounded-lg bg-white/10 hover:bg-white/20 border border-white/5 text-white text-sm font-medium transition-all active:scale-95">
47          Action Button
48        </button>
49      </div>
50    </motion.div>
51  );
52}
53