1
npm i framer-motion

1
import { motion } from 'framer-motion';
2
import { ReactNode } from 'react';
3

4
type GlassCardProps = {
5
  children?: ReactNode;
6
  className?: string;
7
};
8

9
const GlassCard = ({ children, className }: GlassCardProps) => {
10
  return (
11
    <motion.div
12
      initial={{ y: 10, opacity: 0 }}
13
      animate={{ y: 0, opacity: 1 }}
14
      transition={{ duration: 0.2 }}
15
      className={`
16
        relative p-6 rounded-2xl bg-gradient-to-tr from-[#46C0F770] to-[#E3E8EA70] 
17
        backdrop-blur-lg shadow-lg shadow-white/20 transition-all overflow-hidden 
18
        hover:border-white/30 ${className}
19
      `}
20
    >
21
      {/* Light Reflection Animation */}
22
      <motion.span
23
        className="absolute inset-0"
24
        style={{
25
          background: 'linear-gradient(-70deg, transparent 40%, #ffffffaa 50%, transparent 60%)',
26
          filter: 'blur(3px)'
27
        }}
28
        initial={{ x: '-120%' }}
29
        animate={{ x: '120%' }}
30
        transition={{
31
          duration: 2.5,
32
          repeatDelay: 1.2,
33
          repeat: Infinity,
34
          ease: 'linear'
35
        }}
36
      />
37

38
      {/* Card Content */}
39
      <div className="relative">{children}</div>
40
    </motion.div>
41
  );
42
};
43

44
export default GlassCard;