'use client'; import { useState, useEffect, useRef } from 'react'; import { SHADERS_MAP } from './cards-shader-effect'; // Nine beautiful premium solid colors to clearly track the cards const CARD_COLORS = [ '#FF3B30', // Apple Red '#FF9500', // Apple Orange '#FFCC00', // Apple Yellow '#34C759', // Apple Green '#007AFF', // Apple Blue '#5856D6', // Apple Purple '#FF2D55', // Apple Pink '#AF52DE', // Apple Violet '#00C7BE', // Apple Teal ]; // Different card details for each of the cards const CARD_DETAILS = [ { number: '4232 8908 1121 4892', name: 'ZACHARY MERCER', cvv: '382' }, { number: '4154 7831 9904 5124', name: 'SOPHIA MARTINEZ', cvv: '109' }, { number: '5457 4120 7733 9035', name: 'BENJAMIN CARTER', cvv: '764' }, { number: '4441 5567 1223 2468', name: 'EMILY MORRISON', cvv: '491' }, { number: '5375 8891 2234 7713', name: 'JACKSON REID', cvv: '255' }, ]; export function CardsShader() { const cardCount = 1; const cardsRefs = useRef<(HTMLDivElement | null)[]>([]); const frameId = useRef(0); // Track hover state natively to avoid React enclosure delays/stales in 60fps tick const isHoveredRef = useRef(false); const [designIndex, setDesignIndex] = useState(0); // Smoothly interpolated flip rotation angle around Y axis const flipAngle = useRef(0); // Track mouse coordinates for interactive 3D parallax tilt with inertia damping const mouse = useRef({ x: 0, y: 0, targetX: 0, targetY: 0 }); // Responsive state containing card dimensions const [metrics, setMetrics] = useState({ cardW: 336, cardH: 211, // 1.59 standard credit card ratio }); useEffect(() => { const handleMouseMove = (e: MouseEvent) => { // Screen-space cursor offset relative to window center, clamped to [-1.0, 1.0] range const rx = (e.clientX - window.innerWidth / 2) / (window.innerWidth / 2); const ry = (e.clientY - window.innerHeight / 2) / (window.innerHeight / 2); mouse.current.targetX = Math.max(-1, Math.min(1, rx)); mouse.current.targetY = Math.max(-1, Math.min(1, ry)); }; const handleMouseLeave = () => { // Return gently to center orientation when mouse focus is lost or moves away mouse.current.targetX = 0; mouse.current.targetY = 0; }; window.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseleave', handleMouseLeave); return () => { window.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseleave', handleMouseLeave); }; }, []); useEffect(() => { const handleResize = () => { const w = window.innerWidth; const h = window.innerHeight; // Calculate Card Metrics (shrink cards if height is small to save vertical space) let cardW = Math.round(w * 0.16 + 130); const heightFactor = Math.min(1.0, Math.max(0.65, h / 850)); cardW = Math.round(cardW * heightFactor); cardW = Math.min(336, Math.max(150, cardW)); const cardH = Math.round(cardW / 1.5925); // Standard credit card ratio setMetrics({ cardW, cardH }); }; handleResize(); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); // Compute positions, rotations, and visual rules at 60fps const renderLoop = () => { // Smoothly interpolate current mouse variables towards their target positions (damping/inertia logic) mouse.current.x += (mouse.current.targetX - mouse.current.x) * 0.08; mouse.current.y += (mouse.current.targetY - mouse.current.y) * 0.08; const cards = cardsRefs.current; const card = cards[0]; if (!card) return; // Smoothly interpolate the Y rotation flip progress const targetFlip = isHoveredRef.current ? 180 : 0; flipAngle.current += (targetFlip - flipAngle.current) * 0.1; // Vertical tilt (around X-axis) and horizontal tilt (around Y-axis) driven by mouse coordinates const maxTiltY = 15; // Max angle tilt left-to-right (degrees) const maxTiltX = 12; // Max angle tilt up-and-down (degrees) // Flip factor inverts Y-tilt when card is face-down to feel completely natural under user's cursor const flipFactor = Math.cos((flipAngle.current * Math.PI) / 180); const activeTiltX = -mouse.current.y * maxTiltX; const activeTiltY = mouse.current.x * maxTiltY * flipFactor; const totalRotX = activeTiltX; const totalRotY = flipAngle.current + activeTiltY; card.style.zIndex = '100'; card.style.opacity = '1'; card.style.visibility = 'visible'; // Inject translation matrix with the premium -2deg tilt combined with dynamic mouse-interactive 3D tilt card.style.transform = `translateZ(130px) rotateX(${totalRotX.toFixed(2)}deg) rotateY(${totalRotY.toFixed(2)}deg) rotateZ(-2deg)`; }; useEffect(() => { const tick = () => { renderLoop(); frameId.current = requestAnimationFrame(tick); }; frameId.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(frameId.current); }, [metrics]); // Slices for 3D volumetric depth with 30% reduced thickness // Span from -1.47px to 1.47px creates an extremely premium real 3D volume feel const thicknessLayers = [-1.47, -0.73, 0, 0.73, 1.47]; return (

{/* Wavebank Header brand overlay */}

{/* Left side: Custom wavebank SVG Logo */}

{/* Right side: Completely separated action buttons with 0px gap */}

{/* 3D perspective camera space */}

{/* Dynamic 3D coordinate viewport */}

{ setDesignIndex(prev => { let next = Math.floor(Math.random() * 9); while (next === prev) { next = Math.floor(Math.random() * 9); } return next; }); }} onMouseEnter={() => { isHoveredRef.current = true; }} onMouseLeave={() => { isHoveredRef.current = false; }} className="absolute cursor-pointer active:scale-[0.97] transition-all duration-300 ease-out pointer-events-auto focus:outline-none" style={{ width: `${metrics.cardW}px`, height: `${metrics.cardH}px`, transformStyle: 'preserve-3d', }} > {Array.from({ length: cardCount }).map((_, i) => (

{ cardsRefs.current[i] = el; }} className="absolute inset-0" style={{ width: `${metrics.cardW}px`, height: `${metrics.cardH}px`, transformStyle: 'preserve-3d', backfaceVisibility: 'visible', }} > {/* Build physical 3D volumetric thickness by dense parallel layering */} {thicknessLayers.map((zOffset, layerIdx) => { const isFrontFace = layerIdx === thicknessLayers.length - 1; const isBackFace = layerIdx === 0; const ShaderComponent = SHADERS_MAP[designIndex % SHADERS_MAP.length]; const baseBgColor = ShaderComponent ? '#0f0f0f' : CARD_COLORS[designIndex % CARD_COLORS.length]; // Middle structural slice if (!isFrontFace && !isBackFace) { return (

); } // Front face slice if (isFrontFace) { const frontBorderStyle = 'border border-white/15'; return (

{ShaderComponent && }

{/* Golden/Silver Metallic Contact Chip - positioned mid-left (vertically centered on the card) with custom user vectors */}

{/* JWT Brand Logo - positioned at top-right */}

{/* Double intersecting circle Brand Logo - bottom right corner */}

); } // Back face slice if (isBackFace) { const backBorderStyle = 'border border-white/15'; const details = CARD_DETAILS[designIndex % CARD_DETAILS.length]; return (

{/* Render WebGL Shader with premium 16px blur on the back face of the card */} {ShaderComponent && (

)} {/* Premium Real Magnetic stripe */}

{/* Card holder info and details on the bottom-left */}

{/* Card Number */}

{details.number}

{/* Owner & CVV */}

{details.name} • CVV: {details.cvv}

); } return null; })}

))}

); }