Hologram Card

1npm install framer-motion clsx tailwind-merge

1"use client";
2
3import { motion } from "framer-motion";
4
5export default function HologramCard({ children }) {
6  return (
7    <div className="relative group w-full max-w-sm mx-auto h-[450px] perspective-1000">
8      <motion.div 
9        className="relative w-full h-full transform-style-3d transition-transform duration-700 group-hover:rotate-y-12 group-hover:rotate-x-12"
10      >
11        {/* Hologram Box */}
12        <div className="absolute inset-0 rounded-2xl bg-cyan-900/20 border border-cyan-500/30 backdrop-blur-sm overflow-hidden flex flex-col items-center justify-center">
13          
14          {/* Scanline Effect */}
15          <motion.div
16            className="absolute inset-x-0 h-[2px] bg-cyan-300 opacity-50 blur-[1px]"
17            animate={{ top: ["-10%", "110%"] }}
18            transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
19          />
20
21          {/* Holographic Glitch lines */}
22          <div className="absolute inset-0 opacity-20 pointer-events-none" style={{
23            backgroundImage: 'repeating-linear-gradient(transparent, transparent 2px, rgba(0, 255, 255, 0.2) 3px, rgba(0, 255, 255, 0.2) 3px)'
24          }} />
25
26          {/* Inner Content */}
27          <div className="relative z-10 text-center p-8 text-cyan-100">
28            {children || (
29              <div className="space-y-4">
30                <div className="w-20 h-20 mx-auto rounded-full border border-cyan-400/50 flex items-center justify-center relative overflow-hidden">
31                  <div className="absolute inset-0 bg-cyan-500/20 animate-pulse" />
32                  <span className="text-2xl">👤</span>
33                </div>
34                <h3 className="text-2xl font-mono font-bold tracking-widest text-cyan-300 drop-shadow-[0_0_10px_rgba(34,211,238,0.8)]">
35                  USER_01
36                </h3>
37                <p className="text-sm font-mono opacity-70">
38                  STATUS: SECURE_LINK
39                  <br />
40                  NODE: NX-892
41                </p>
42              </div>
43            )}
44          </div>
45        </div>
46      </motion.div>
47    </div>
48  );
49}
50