{"version":1,"id":"credit-card","framework":"next","kind":"block","files":[{"path":"src/blocks/gfa/credit-card.tsx","content":"import type { ReactNode } from \"react\";\nimport \"@/blocks/gfa/credit-card.css\";\nimport { CreditCardBalanceOdometer } from \"@/blocks/gfa/credit-card-balance-odometer\";\nimport { CreditCardPanDisplay } from \"@/blocks/gfa/credit-card-pan-display\";\nimport { CreditCardChip } from \"@/blocks/gfa/credit-card-chip\";\nimport { MastercardLogo, VisaLogo } from \"@/blocks/gfa/credit-card-payment-logos\";\nimport { cn } from \"@/lib/utils\";\n\nexport type CreditCardProps = {\n className?: string;\n holderName?: string;\n lastFour?: string;\n balance?: number;\n};\n\nfunction normalizeLastFour(lastFour: string): string {\n const digits = lastFour.replace(/\\D/g, \"\").slice(-4);\n return digits.padStart(4, \"0\");\n}\n\nfunction CardFluidBackground() {\n return (\n <>\n
\n \n \n \n \n \n \n );\n}\n\nfunction FieldLabel({ children }: { children: ReactNode }) {\n return (\n

\n {children}\n

\n );\n}\n\n/** Premium dark credit card with fluid metal background (front only). */\nexport function CreditCard({\n className,\n holderName = \"Gokhan Akman\",\n lastFour = \"4149\",\n balance = 46_917.37,\n}: CreditCardProps) {\n const last4 = normalizeLastFour(lastFour);\n\n return (\n \n \n
\n
\n
\n Card number\n

\n \n

\n
\n
\n Name\n

\n {holderName}\n

\n
\n
\n\n
\n \n
\n\n
\n
\n

Balance

\n

\n \n

\n
\n
\n \n \n
\n
\n
\n \n );\n}\n"},{"path":"src/blocks/gfa/credit-card-chip.tsx","content":"\"use client\";\n\nimport { useId } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type CreditCardChipProps = {\n className?: string;\n};\n\n/**\n * EMV chip artwork (Kibo UI geometry) with silver/chrome face matching card metallics.\n */\nexport function CreditCardChip({ className }: CreditCardChipProps) {\n const uid = useId().replace(/:/g, \"\");\n const faceId = `gfa-credit-card-chip-face-${uid}`;\n const contactId = `gfa-credit-card-chip-contact-${uid}`;\n\n return (\n \n Chip\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n"},{"path":"src/blocks/gfa/credit-card-payment-logos.tsx","content":"\"use client\";\n\nimport { useId } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ntype LogoProps = { className?: string; metallic?: boolean; shimmer?: boolean };\n\n/** Shared visual height for card corner payment marks. */\nexport const PAYMENT_LOGO_CLASS = \"h-6 w-auto sm:h-7\";\n\nconst VISA_TRANSFORM = \"matrix(4.4299631,0,0,4.4299631,-81.165783,-105.04783)\";\n\nfunction VisaClipGeometry() {\n return (\n <>\n \n \n \n \n \n \n );\n}\n\nfunction SvgLogoShimmer({\n clipId,\n shimmerGradId,\n width,\n height,\n delay = \"0s\",\n}: {\n clipId: string;\n shimmerGradId: string;\n width: number;\n height: number;\n delay?: string;\n}) {\n const band = width * 0.45;\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\n/** Visa 2006 wordmark (Wikimedia / public domain artwork). */\nexport function VisaLogo({ className, metallic = true, shimmer = true }: LogoProps) {\n const uid = useId().replace(/:/g, \"\");\n const silverId = `gfa-visa-silver-${uid}`;\n const goldId = `gfa-visa-gold-${uid}`;\n const clipId = `gfa-visa-clip-${uid}`;\n const shimmerGradId = `gfa-visa-shimmer-${uid}`;\n\n const mainFill = metallic ? `url(#${silverId})` : \"#00579f\";\n const accentFill = metallic ? `url(#${goldId})` : \"#faa61a\";\n\n return (\n \n \n {metallic ? (\n <>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ) : null}\n \n \n \n \n \n \n \n \n \n \n \n \n \n {metallic && shimmer ? (\n \n ) : null}\n \n );\n}\n\n/** Simplified Mastercard mark for UI demos (not an official brand asset). */\nexport function MastercardLogo({ className, metallic = true, shimmer = true }: LogoProps) {\n const uid = useId().replace(/:/g, \"\");\n const leftId = `gfa-mc-left-${uid}`;\n const rightId = `gfa-mc-right-${uid}`;\n const overlapId = `gfa-mc-overlap-${uid}`;\n const clipId = `gfa-mc-clip-${uid}`;\n const shimmerGradId = `gfa-mc-shimmer-${uid}`;\n\n if (!metallic) {\n return (\n \n \n \n \n \n );\n }\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {shimmer ? (\n \n ) : null}\n \n );\n}\n\nexport function PaymentLogosRow({ className, metallic = true }: LogoProps) {\n return (\n
\n \n \n
\n );\n}\n"},{"path":"src/blocks/gfa/credit-card-pan-display.tsx","content":"\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { useReducedMotion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nconst MASKED_PAN = \"**** **** ****\";\nconst SCRAMBLE_POOL = \"*#•0123456789ABCDEF\";\nconst DIGIT_POOL = \"0123456789\";\n\nfunction scrambleTemplate(template: string, pool: string): string {\n return template\n .split(\"\")\n .map((char) => (char === \" \" ? \" \" : pool[Math.floor(Math.random() * pool.length)]))\n .join(\"\");\n}\n\nexport type CreditCardPanDisplayProps = {\n lastFour: string;\n className?: string;\n};\n\n/** Masked PAN scrambles like encrypted data, then locks to asterisks + last four. */\nexport function CreditCardPanDisplay({ lastFour, className }: CreditCardPanDisplayProps) {\n const reducedMotion = useReducedMotion();\n /** Deterministic SSR/first paint — scramble only after mount (avoids hydration mismatch). */\n const [masked, setMasked] = useState(MASKED_PAN);\n const [visibleLast4, setVisibleLast4] = useState(lastFour);\n\n useEffect(() => {\n if (reducedMotion) {\n return;\n }\n\n setMasked(scrambleTemplate(MASKED_PAN, SCRAMBLE_POOL));\n setVisibleLast4(scrambleTemplate(lastFour, DIGIT_POOL));\n\n const maskedTemplate = MASKED_PAN.split(\"\");\n const last4Template = lastFour.split(\"\");\n const intervals: ReturnType[] = [];\n const timeouts: ReturnType[] = [];\n let cancelled = false;\n\n const scrambleTick = setInterval(() => {\n if (cancelled) return;\n setMasked(scrambleTemplate(MASKED_PAN, SCRAMBLE_POOL));\n setVisibleLast4(scrambleTemplate(lastFour, DIGIT_POOL));\n }, 48);\n intervals.push(scrambleTick);\n\n const beginResolve = setTimeout(() => {\n if (cancelled) return;\n clearInterval(scrambleTick);\n\n let maskedIndex = -1;\n const resolveMasked = setInterval(() => {\n if (cancelled) return;\n maskedIndex += 1;\n setMasked(\n maskedTemplate\n .map((target, index) => {\n if (target === \" \") return \" \";\n if (index <= maskedIndex) return \"*\";\n return SCRAMBLE_POOL[Math.floor(Math.random() * SCRAMBLE_POOL.length)]!;\n })\n .join(\"\"),\n );\n if (maskedIndex >= maskedTemplate.length - 1) {\n clearInterval(resolveMasked);\n }\n }, 32);\n intervals.push(resolveMasked);\n\n const beginLast4 = setTimeout(() => {\n if (cancelled) return;\n let last4Index = -1;\n const resolveLast4 = setInterval(() => {\n if (cancelled) return;\n last4Index += 1;\n setVisibleLast4(\n last4Template\n .map((digit, index) => {\n if (index <= last4Index) return digit;\n return DIGIT_POOL[Math.floor(Math.random() * DIGIT_POOL.length)]!;\n })\n .join(\"\"),\n );\n if (last4Index >= last4Template.length - 1) {\n clearInterval(resolveLast4);\n }\n }, 55);\n intervals.push(resolveLast4);\n }, 180);\n timeouts.push(beginLast4);\n }, 720);\n timeouts.push(beginResolve);\n\n return () => {\n cancelled = true;\n for (const id of intervals) clearInterval(id);\n for (const id of timeouts) clearTimeout(id);\n };\n }, [lastFour, reducedMotion]);\n\n return (\n \n {masked}\n {visibleLast4}\n \n );\n}\n"},{"path":"src/blocks/gfa/credit-card-balance-odometer.tsx","content":"\"use client\";\n\nimport { LazyMotion, domAnimation, m, useReducedMotion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nexport function formatCreditCardBalance(value: number): string {\n return new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency: \"USD\",\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n }).format(value);\n}\n\nconst ODOMETER_EASE = [0.16, 1, 0.3, 1] as const;\nconst ROLL_DURATION = 1.35;\nconst DIGIT_STAGGER = 0.055;\n\nfunction OdometerDigit({\n digit,\n delay,\n}: {\n digit: number;\n delay: number;\n}) {\n return (\n \n \n {Array.from({ length: 10 }, (_, i) => (\n \n {i}\n \n ))}\n \n \n );\n}\n\nexport type CreditCardBalanceOdometerProps = {\n value: number;\n className?: string;\n};\n\n/** Balance rolls up digit-by-digit on first paint (odometer). */\nexport function CreditCardBalanceOdometer({ value, className }: CreditCardBalanceOdometerProps) {\n const reducedMotion = useReducedMotion();\n const formatted = formatCreditCardBalance(value);\n\n if (reducedMotion) {\n return {formatted};\n }\n\n let digitIndex = 0;\n\n return (\n \n \n {formatted.split(\"\").map((char, index) => {\n if (/\\d/.test(char)) {\n const digit = Number(char);\n const delay = digitIndex * DIGIT_STAGGER;\n digitIndex += 1;\n return ;\n }\n\n const symbolDelay = digitIndex * DIGIT_STAGGER + 0.08;\n\n return (\n \n {char}\n \n );\n })}\n \n \n );\n}\n"},{"path":"src/blocks/gfa/credit-card-fonts.ts","content":"import { DM_Mono, Outfit } from \"next/font/google\";\n\n/** Labels, name, balance — geometric sans suited to payment UI. */\nexport const creditCardDisplay = Outfit({\n variable: \"--font-gfa-cc-display\",\n subsets: [\"latin\"],\n weight: [\"400\", \"500\", \"600\"],\n display: \"swap\",\n});\n\n/** PAN / last four — refined monospace (not Geist Mono). */\nexport const creditCardMono = DM_Mono({\n variable: \"--font-gfa-cc-mono\",\n subsets: [\"latin\"],\n weight: [\"400\", \"500\"],\n display: \"swap\",\n});\n"},{"path":"src/blocks/gfa/credit-card.css","content":"/* Credit card block — scoped to [data-gfa-credit-card] */\n\n/* Floating fluid metal blobs */\n@keyframes gfa-cc-fluid-silver {\n 0%,\n 100% {\n transform: rotate(-18deg) translate3d(0, 0, 0) scale(1);\n }\n 35% {\n transform: rotate(-14deg) translate3d(4%, -3%, 0) scale(1.05);\n }\n 70% {\n transform: rotate(-21deg) translate3d(-3%, 2%, 0) scale(1.02);\n }\n}\n\n@keyframes gfa-cc-fluid-chrome {\n 0%,\n 100% {\n transform: rotate(12deg) translate3d(0, 0, 0) scale(1);\n }\n 50% {\n transform: rotate(17deg) translate3d(-5%, 5%, 0) scale(1.07);\n }\n}\n\n@keyframes gfa-cc-fluid-blue {\n 0%,\n 100% {\n transform: rotate(6deg) translate3d(0, 0, 0) scale(1);\n }\n 28% {\n transform: rotate(11deg) translate3d(7%, -9%, 0) scale(1.08);\n }\n 55% {\n transform: rotate(3deg) translate3d(-6%, -4%, 0) scale(1.04);\n }\n 78% {\n transform: rotate(9deg) translate3d(4%, 5%, 0) scale(1.07);\n }\n}\n\n@keyframes gfa-cc-fluid-sheen {\n 0%,\n 100% {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n 50% {\n opacity: 0.88;\n transform: translate3d(-1%, 1%, 0);\n }\n}\n\n[data-gfa-credit-card] .gfa-cc-fluid-silver {\n animation: gfa-cc-fluid-silver 14s ease-in-out infinite;\n will-change: transform;\n}\n\n[data-gfa-credit-card] .gfa-cc-fluid-chrome {\n animation: gfa-cc-fluid-chrome 18s ease-in-out infinite;\n animation-delay: -5s;\n will-change: transform;\n}\n\n[data-gfa-credit-card] .gfa-cc-fluid-blue {\n animation: gfa-cc-fluid-blue 15s ease-in-out infinite;\n animation-delay: -7s;\n transform-origin: center center;\n will-change: transform;\n}\n\n[data-gfa-credit-card] .gfa-cc-fluid-sheen {\n animation: gfa-cc-fluid-sheen 11s ease-in-out infinite;\n will-change: transform, opacity;\n}\n\n@media (prefers-reduced-motion: reduce) {\n [data-gfa-credit-card] .gfa-cc-fluid-silver,\n [data-gfa-credit-card] .gfa-cc-fluid-chrome,\n [data-gfa-credit-card] .gfa-cc-fluid-blue,\n [data-gfa-credit-card] .gfa-cc-fluid-sheen {\n animation: none;\n will-change: auto;\n }\n}\n\n/* Typography (Outfit + DM Mono — wire variables in root layout) */\n[data-gfa-credit-card] {\n font-family: var(--font-gfa-cc-display), var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;\n font-feature-settings: \"kern\" 1, \"liga\" 1;\n}\n\n[data-gfa-credit-card] .gfa-cc-label {\n font-weight: 500;\n letter-spacing: 0.16em;\n}\n\n[data-gfa-credit-card] .gfa-cc-pan {\n font-family: var(--font-gfa-cc-mono), ui-monospace, monospace;\n font-weight: 500;\n font-variant-numeric: tabular-nums;\n letter-spacing: 0.14em;\n}\n\n[data-gfa-credit-card] .gfa-cc-pan-mask {\n font-variant-numeric: tabular-nums;\n letter-spacing: 0.12em;\n}\n\n[data-gfa-credit-card] .gfa-cc-name {\n font-weight: 600;\n font-size: 0.6875rem;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n}\n\n@media (min-width: 640px) {\n [data-gfa-credit-card] .gfa-cc-name {\n font-size: 0.75rem;\n letter-spacing: 0.12em;\n }\n}\n\n[data-gfa-credit-card] .gfa-cc-balance-label {\n font-weight: 500;\n letter-spacing: 0.03em;\n}\n\n[data-gfa-credit-card] .gfa-cc-balance-value {\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n letter-spacing: -0.03em;\n}\n\n[data-gfa-credit-card] .gfa-cc-odometer {\n align-items: flex-end;\n line-height: 1;\n}\n\n[data-gfa-credit-card] .gfa-cc-odometer-digit,\n[data-gfa-credit-card] .gfa-cc-odometer-symbol {\n background-image: linear-gradient(\n 100deg,\n #7a8a9a 0%,\n #d8e0e8 16%,\n #ffffff 30%,\n #e8edf2 44%,\n #f8fafc 52%,\n #b8c4d0 68%,\n #f1f5f9 82%,\n #8a9aaa 100%\n );\n background-size: 240% 100%;\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}\n\n/* Payment logo shimmer (SVG clipPath-masked) */\n[data-gfa-credit-card] .gfa-cc-payment-logo-shimmer-svg {\n mix-blend-mode: screen;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n [data-gfa-credit-card] .gfa-cc-payment-logo-shimmer-svg {\n display: none;\n }\n}\n\n/* Metallic typography */\n@keyframes gfa-cc-metal-shine {\n 0% {\n background-position: 0% 50%;\n }\n 100% {\n background-position: 100% 50%;\n }\n}\n\n[data-gfa-credit-card] .gfa-cc-metal {\n background-image: linear-gradient(\n 102deg,\n #64748b 0%,\n #cbd5e1 18%,\n #f8fafc 32%,\n #e2e8f0 48%,\n #f1f5f9 58%,\n #94a3b8 72%,\n #e8edf2 88%,\n #6b7a8a 100%\n );\n background-size: 220% 100%;\n background-position: 12% 50%;\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n animation: gfa-cc-metal-shine 7s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;\n}\n\n[data-gfa-credit-card] .gfa-cc-metal-muted {\n background-image: linear-gradient(\n 102deg,\n #475569 0%,\n #94a3b8 28%,\n #cbd5e1 46%,\n #94a3b8 64%,\n #64748b 100%\n );\n background-size: 200% 100%;\n background-position: 8% 50%;\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n animation: gfa-cc-metal-shine 9s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;\n}\n\n[data-gfa-credit-card] .gfa-cc-metal-balance {\n background-image: linear-gradient(\n 100deg,\n #7a8a9a 0%,\n #d8e0e8 16%,\n #ffffff 30%,\n #e8edf2 44%,\n #f8fafc 52%,\n #b8c4d0 68%,\n #f1f5f9 82%,\n #8a9aaa 100%\n );\n background-size: 240% 100%;\n}\n\n@media (prefers-reduced-motion: reduce) {\n [data-gfa-credit-card] .gfa-cc-metal,\n [data-gfa-credit-card] .gfa-cc-metal-muted {\n animation: none;\n background-position: 50% 50%;\n }\n}\n"}],"meta":{"studioName":"GFA Development & Design Studio","siteUrl":"https://ui.gkhn.dev"}}