Neon 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 NeonCard({ 
7  children,
8  className,
9  color = "#ff00ff" // Magenta
10}) {
11  return (
12    <div className={cn("relative group p-[2px] rounded-2xl overflow-hidden", className)}>
13      
14      {/* Animated Neon Border */}
15      <motion.div
16        className="absolute inset-0 z-0"
17        style={{
18          background: `conic-gradient(from 0deg, transparent 0%, transparent 40%, ${color} 50%, transparent 60%, transparent 100%)`,
19        }}
20        animate={{ rotate: 360 }}
21        transition={{ duration: 4, repeat: Infinity, ease: "linear" }}
22      />
23      
24      {/* Glow Effect */}
25      <motion.div
26        className="absolute inset-0 z-0 blur-[20px] opacity-0 group-hover:opacity-100 transition-opacity duration-500"
27        style={{
28          background: `conic-gradient(from 0deg, transparent 0%, transparent 40%, ${color} 50%, transparent 60%, transparent 100%)`,
29        }}
30        animate={{ rotate: 360 }}
31        transition={{ duration: 4, repeat: Infinity, ease: "linear" }}
32      />
33
34      <div className="relative z-10 w-full h-full bg-[#0a0a0a] rounded-2xl p-8 shadow-2xl">
35        <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none rounded-2xl" />
36        
37        {children || (
38          <div className="space-y-4">
39            <h3 className="text-2xl font-bold text-white tracking-tight">Neon Edge</h3>
40            <p className="text-gray-400 leading-relaxed">
41              Hover over this card to activate the intense neon bloom effect. Perfect for highlighting premium tier features.
42            </p>
43          </div>
44        )}
45      </div>
46    </div>
47  );
48}
49