Holographic 3D Card

Cards

About

A stunning interactive card with a 3D tilt effect and dynamic holographic glare that follows the mouse movement. Creates a premium, tangible feel for digital assets.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Holographic 3D Card to your project and fits it to your theme.

Code

How Holographic 3D Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { HolographicCard } from "@/components/ui/holographic-3d-card";
import { CreditCard, Gem, QrCode } from "lucide-react";

export default function DemoHolographicCard() {
  return (
    <div className="min-h-[600px] w-full flex items-center justify-center bg-black p-10 perspective-[2000px]">
      
      <HolographicCard className="w-[380px] h-[240px] p-6 text-white">
        <div className="flex flex-col justify-between h-full">
          
          {/* Card Top Header */}
          <div className="flex justify-between items-start">
            <div className="flex items-center gap-2">
                <div className="p-2 rounded-full bg-white/10 backdrop-blur-md border border-white/20">
                    <Gem className="h-5 w-5 text-cyan-300" />
                </div>
                <span className="font-bold text-lg tracking-wider bg-gradient-to-r from-cyan-300 to-purple-400 bg-clip-text text-transparent">
                    NEXUS ELITE
                </span>
            </div>
            <QrCode className="h-8 w-8 text-white/50" />
          </div>

          {/* Card Middle Number */}
          <div className="space-y-1">
            <span className="text-xs text-white/60 font-mono tracking-widest uppercase">Membership ID</span>
             <div className="flex gap-4 items-center">
                <CreditCard className="h-6 w-6 text-purple-400" />
                <p className="text-2xl font-mono tracking-widest font-semibold text-white shadow-sm">
                    8824 1900 5521
                </p>
             </div>
          </div>

          {/* Card Bottom Details */}
          <div className="flex justify-between items-end">
            <div>
                <p className="text-xs text-white/60 uppercase tracking-wider mb-1">Holder</p>
                <p className="font-medium tracking-wide">ALEXANDER M.</p>
            </div>
            <div className="text-right">
                <p className="text-xs text-white/60 uppercase tracking-wider mb-1">Valid Thru</p>
                <p className="font-medium tracking-wide">12/28</p>
            </div>
          </div>

        </div>
        
        {/* Decorative blurred orb inside the card */}
        <div className="absolute -bottom-20 -right-20 w-40 h-40 bg-purple-500/40 rounded-full blur-3xl z-0 pointer-events-none"></div>
        <div className="absolute -top-20 -left-20 w-40 h-40 bg-cyan-500/40 rounded-full blur-3xl z-0 pointer-events-none"></div>
      </HolographicCard>

    </div>
  );
}