3D Glassmorphism Parallax Card & Cursor Spotlight

<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Glassmorphism Tilt Card</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = { darkMode: 'class' };
    </script>
    <style>
        body { margin: 0; font-family: sans-serif; }
        .card-container { perspective: 1000px; }
        .tilt-card { transform-style: preserve-3d; transition: transform 0.1s ease-out; }
        .spotlight { background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(236, 72, 153, 0.25), transparent 40%); }
    </style>
</head>
<body class="h-full flex items-center justify-center p-6 card-container bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 transition-colors duration-300">

    <div id="tiltCard" class="tilt-card group relative w-96 rounded-3xl bg-white/80 dark:bg-slate-900/80 border border-slate-200 dark:border-slate-800 p-8 shadow-2xl overflow-hidden backdrop-blur-xl">
        <!-- Spotlight Layer -->
        <div id="spotlight" class="spotlight absolute inset-0 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>

        <div class="relative z-10 space-y-6">
            <div class="w-14 h-14 rounded-2xl bg-gradient-to-tr from-pink-500 to-rose-600 flex items-center justify-center text-2xl font-bold shadow-lg shadow-pink-500/30">
                💎
            </div>

            <div class="space-y-2">
                <span class="text-xs font-bold uppercase tracking-wider text-pink-600 dark:text-pink-400">Interactive Component</span>
                <h2 class="text-2xl font-extrabold text-slate-900 dark:text-white">3D Parallax Card</h2>
                <p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
                    Hover over this card and move your cursor to experience interactive 3D perspective tilt and spotlight tracking.
                </p>
            </div>

            <div class="pt-4 border-t border-slate-200 dark:border-slate-800 flex items-center justify-between">
                <span class="text-xs font-mono text-slate-500 dark:text-slate-400">60 FPS Smooth</span>
                <button class="px-4 py-2 rounded-xl bg-pink-500 hover:bg-pink-400 text-white font-bold text-xs shadow-md shadow-pink-500/20 transition">
                    Explore Demo
                </button>
            </div>
        </div>
    </div>

    <script>
        const card = document.getElementById("tiltCard");
        const spotlight = document.getElementById("spotlight");

        card.addEventListener("mousemove", (e) => {
            const rect = card.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            const centerX = rect.width / 2;
            const centerY = rect.height / 2;

            const rotateX = ((y - centerY) / centerY) * -15;
            const rotateY = ((x - centerX) / centerX) * 15;

            card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
            card.style.setProperty("--mouse-x", `${x}px`);
            card.style.setProperty("--mouse-y", `${y}px`);
        });

        card.addEventListener("mouseleave", () => {
            card.style.transform = "rotateX(0deg) rotateY(0deg)";
        });
    </script>
</body>
</html>

/* Supports both Dark and Light mode via Tailwind class variant */

// Interactive scripts included inside demo view file