Luxury black metal holographic 3D tilt card with EMV smart chip, foil sheen and depth parallax
import { useState } from "react"
import { HolographicCard, HolographicItem, type HolographicTheme } from "@/components/ui/holographic-card"
import { Sparkles, Palette, Wifi, Shield } from "lucide-react"
function hexToRgba(hex: string, alpha: number) {
const clean = hex.replace("#", "")
const r = parseInt(clean.substring(0, 2), 16) || 0
const g = parseInt(clean.substring(2, 4), 16) || 0
const b = parseInt(clean.substring(4, 6), 16) || 0
return `rgba(${r}, ${g}, ${b}, ${alpha})`
}
export default function HolographicCardDemo() {
const [theme, setTheme] = useState<HolographicTheme>("obsidian")
const [maxTilt, setMaxTilt] = useState(14)
const [glareOpacity, setGlareOpacity] = useState(0.45)
const [showFoil, setShowFoil] = useState(true)
// Custom Color Customization Mode
const [useCustomColors, setUseCustomColors] = useState(false)
const [customFoilColor1, setCustomFoilColor1] = useState("#8b5cf6")
const [customFoilColor2, setCustomFoilColor2] = useState("#ec4899")
const [customFoilColor3, setCustomFoilColor3] = useState("#06b6d4")
// Convert hex values to translucent RGBA with identical soft alpha ratios as the luxury presets
const customFoilArray = useCustomColors
? [
"rgba(255, 255, 255, 0.75)",
hexToRgba(customFoilColor1, 0.42),
hexToRgba(customFoilColor2, 0.3),
hexToRgba(customFoilColor3, 0.18),
"transparent",
]
: undefined
const customBorderGlow = useCustomColors
? hexToRgba(customFoilColor1, 0.5)
: undefined
// Theme accents for typography and chips
const themeAccents = {
obsidian: {
name: "Titanium Black",
chipBg: "from-neutral-300 via-neutral-100 to-neutral-400",
chipBorder: "border-neutral-400/40",
holoSeal: "from-white/30 via-cyan-400/20 to-purple-400/20",
pill: "bg-white/10 text-white border-white/20",
},
aurora: {
name: "Cosmic Aurora",
chipBg: "from-amber-200 via-yellow-100 to-amber-300",
chipBorder: "border-amber-400/40",
holoSeal: "from-indigo-400/40 via-violet-400/30 to-pink-400/30",
pill: "bg-indigo-500/20 text-indigo-200 border-indigo-500/30",
},
emerald: {
name: "Cyber Emerald",
chipBg: "from-emerald-200 via-emerald-100 to-teal-300",
chipBorder: "border-emerald-400/40",
holoSeal: "from-emerald-400/40 via-teal-400/30 to-cyan-400/30",
pill: "bg-emerald-500/20 text-emerald-200 border-emerald-500/30",
},
gold: {
name: "Midnight Gold",
chipBg: "from-amber-300 via-yellow-200 to-amber-400",
chipBorder: "border-amber-400/50",
holoSeal: "from-amber-400/40 via-yellow-300/30 to-orange-400/30",
pill: "bg-amber-500/20 text-amber-200 border-amber-500/30",
},
}[theme]
return (
<div className="flex flex-col items-center gap-6 w-full max-w-lg">
{/* Palette Selector */}
<div className="flex flex-wrap items-center justify-center gap-1.5 p-1 rounded-xl bg-neutral-900/60 border border-white/10 backdrop-blur-md text-xs">
{(["obsidian", "aurora", "emerald", "gold"] as HolographicTheme[]).map((t) => (
<button
key={t}
onClick={() => {
setTheme(t)
setUseCustomColors(false)
}}
className={`px-3 py-1.5 rounded-lg font-medium transition-all ${
theme === t && !useCustomColors
? "bg-white/20 text-white font-semibold shadow-sm"
: "text-neutral-400 hover:text-neutral-200"
}`}
>
{t === "obsidian" ? "Titanium Black" : t === "aurora" ? "Aurora" : t === "emerald" ? "Emerald" : "Gold"}
</button>
))}
<button
onClick={() => setUseCustomColors(!useCustomColors)}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg font-medium transition-all ${
useCustomColors
? "bg-indigo-600 text-white font-semibold shadow-sm"
: "text-neutral-400 hover:text-neutral-200"
}`}
>
<Palette className="w-3.5 h-3.5" />
<span>Personalizado</span>
</button>
</div>
{/* ========================================================= */}
{/* THE LUXURY BLACK METAL CREDIT CARD ARCHETYPE */}
{/* ========================================================= */}
<HolographicCard
theme={theme}
foilColors={customFoilArray}
borderGlowColor={customBorderGlow}
maxTiltAngle={maxTilt}
glareOpacity={glareOpacity}
showRainbowFoil={showFoil}
borderRadius="1.35rem"
className="p-8 w-full aspect-[1.586/1] min-h-[300px] flex flex-col justify-between relative overflow-hidden shadow-2xl"
>
{/* Subtle Brushed Metal Surface Texture */}
<div
aria-hidden="true"
className="pointer-events-none absolute inset-0 opacity-15 bg-[radial-gradient(#ffffff_1px,transparent_1px)] [background-size:16px_16px]"
/>
{/* Top Row: Issuer Logo & Contactless Waves */}
<HolographicItem depth={35} className="flex items-center justify-between">
<div className="flex items-center gap-2.5">
<div className="w-7 h-7 rounded-lg bg-gradient-to-tr from-white/20 to-white/5 border border-white/20 flex items-center justify-center shadow-inner">
<Shield className="w-4 h-4 text-white" />
</div>
<div className="flex flex-col">
<span className="text-sm font-bold tracking-wider text-white font-mono leading-none">
NEXUS VAULT
</span>
<span className="text-[9px] text-neutral-400 font-mono tracking-widest uppercase">
World Elite Metal
</span>
</div>
</div>
<div className="flex items-center gap-3">
<Wifi className="w-5 h-5 text-neutral-400 rotate-90" />
<span
className={`text-[10px] font-bold px-2.5 py-0.5 rounded-full border ${
useCustomColors ? "bg-white/10 text-white border-white/20" : themeAccents.pill
}`}
>
{useCustomColors ? "CUSTOM PRISM" : themeAccents.name.toUpperCase()}
</span>
</div>
</HolographicItem>
{/* Middle Row: EMV Microchip with metallic texture + Available Credit */}
<HolographicItem depth={60} className="py-2 flex items-center justify-between">
{/* Realistic EMV Smart Chip */}
<div className={`w-12 h-9 rounded-md bg-gradient-to-br ${themeAccents.chipBg} border ${themeAccents.chipBorder} p-1 relative shadow-md overflow-hidden`}>
<div className="w-full h-full border border-black/20 rounded-[3px] grid grid-cols-2 gap-1 relative">
<div className="border-r border-black/20" />
<div className="border-l border-black/20" />
<div className="absolute inset-x-0 top-1/2 -translate-y-1/2 h-px bg-black/25" />
</div>
</div>
{/* Floating Balance Badge in 3D Parallax */}
<div className="flex flex-col items-end">
<span className="text-[10px] text-neutral-400 font-mono">Available Credit</span>
<span className="text-xl font-bold font-mono tracking-tight text-white drop-shadow-[0_2px_8px_rgba(0,0,0,0.8)]">
$128,450.00
</span>
</div>
</HolographicItem>
{/* Card Number */}
<HolographicItem depth={50}>
<p className="font-mono text-xl sm:text-2xl tracking-[0.22em] text-neutral-100 font-semibold drop-shadow-[0_2px_6px_rgba(0,0,0,0.9)]">
4582 •••• •••• 8931
</p>
</HolographicItem>
{/* Bottom Row: Holder Name, Expiry & Holographic Security Seal */}
<HolographicItem depth={45} className="flex items-end justify-between pt-1">
<div className="space-y-0.5">
<div className="flex items-center gap-3 text-[10px] text-neutral-400 font-mono uppercase tracking-wider">
<span>CARDHOLDER</span>
<span>VALID THRU 09/29</span>
</div>
<p className="font-mono text-sm font-bold tracking-widest text-neutral-200">
PAULO RIVEROS
</p>
</div>
{/* Optical Holographic Security Seal (Refracts light as card tilts) */}
<div className="relative flex items-center justify-center">
<div
className={`w-10 h-10 rounded-full bg-gradient-to-tr ${
useCustomColors
? "from-white/30 via-indigo-400/20 to-pink-400/20"
: themeAccents.holoSeal
} border border-white/25 flex items-center justify-center backdrop-blur-md shadow-lg shadow-black/40`}
>
<Sparkles className="w-5 h-5 text-white/80 animate-pulse" />
</div>
</div>
</HolographicItem>
</HolographicCard>
{/* Controls Drawer */}
<div className="w-full bg-neutral-900/60 backdrop-blur-md rounded-2xl p-4 border border-white/10 space-y-3 text-xs">
{/* Soft Translucent Color Pickers */}
{useCustomColors && (
<div className="space-y-2 border-b border-white/10 pb-3">
<span className="text-white font-semibold flex items-center gap-1.5">
<Palette className="w-3.5 h-3.5 text-indigo-400" />
Tonos del reflejo translúcido (Foil):
</span>
<div className="flex items-center gap-4">
<label className="flex items-center gap-1.5 text-neutral-300 cursor-pointer">
<span>Tono 1:</span>
<input
type="color"
value={customFoilColor1}
onChange={(e) => setCustomFoilColor1(e.target.value)}
className="w-6 h-6 rounded cursor-pointer border-0 bg-transparent"
/>
</label>
<label className="flex items-center gap-1.5 text-neutral-300 cursor-pointer">
<span>Tono 2:</span>
<input
type="color"
value={customFoilColor2}
onChange={(e) => setCustomFoilColor2(e.target.value)}
className="w-6 h-6 rounded cursor-pointer border-0 bg-transparent"
/>
</label>
<label className="flex items-center gap-1.5 text-neutral-300 cursor-pointer">
<span>Tono 3:</span>
<input
type="color"
value={customFoilColor3}
onChange={(e) => setCustomFoilColor3(e.target.value)}
className="w-6 h-6 rounded cursor-pointer border-0 bg-transparent"
/>
</label>
</div>
</div>
)}
<div className="flex items-center justify-between">
<span className="text-neutral-400 font-medium">Inclinación 3D: {maxTilt}°</span>
<input
type="range"
min={6}
max={24}
value={maxTilt}
onChange={(e) => setMaxTilt(Number(e.target.value))}
className="w-28 accent-indigo-500 cursor-pointer"
/>
</div>
<div className="flex items-center justify-between">
<span className="text-neutral-400 font-medium">Intensidad Reflejo: {glareOpacity}</span>
<input
type="range"
min={0.1}
max={0.8}
step={0.05}
value={glareOpacity}
onChange={(e) => setGlareOpacity(Number(e.target.value))}
className="w-28 accent-indigo-500 cursor-pointer"
/>
</div>
<div className="flex items-center justify-between pt-1">
<span className="text-neutral-400 font-medium">Capa Iridiscente (Foil):</span>
<button
onClick={() => setShowFoil(!showFoil)}
className={`px-2.5 py-1 rounded text-[11px] font-semibold transition-colors ${
showFoil ? "bg-white/20 text-white border border-white/20" : "bg-neutral-800 text-neutral-400"
}`}
>
{showFoil ? "Activada" : "Desactivada"}
</button>
</div>
</div>
</div>
)
}
export { HolographicCardDemo }