Card Number Emboss

1"use client";
2 
3import { useCallback, useEffect, useId, useMemo, useRef, useState, type ChangeEvent } from "react";
4 
5// ---------------------------------------------------------------------------
6// EmbossPlate — a card-number input rendered as an embossing machine, not a
7// flat text field. Typed digits RAISE as embossed metal (a dual text-shadow
8// bevel, light top-left / dark bottom-right), grouped 4-4-4-4, with a small
9// stamping-head caret that dips on every keystroke. A brand watermark
10// (detected from the IIN prefix, or a generic wordmark) fades in once 4+
11// digits exist. Expiry and CVC share the same emboss treatment.
12//
13// Real input semantics: one native <input> per field, transparent and
14// overlaid exactly on top of its decorative display (never sr-only-tiny —
15// the visible plate area IS the click/tap target), so typing, autofill,
16// paste, and screen-reader behavior all come from genuine form controls.
17// The formatted display underneath is aria-hidden and purely presentational.
18// Because the real inputs are transparent, focus is shown on the DISPLAY
19// sibling via a CSS focus-visible + adjacent-sibling rule, not on the
20// (invisible) input itself.
21// ---------------------------------------------------------------------------
22 
23export interface EmbossPlateProps {
24  className?: string;
25}
26 
27const GROUP_SIZES = [4, 4, 4, 4] as const;
28 
29function luhnValid(digits: string): boolean {
30  if (digits.length === 0) return false;
31  let sum = 0;
32  let alt = false;
33  for (let i = digits.length - 1; i >= 0; i--) {
34    let n = Number(digits[i]);
35    if (alt) {
36      n *= 2;
37      if (n > 9) n -= 9;
38    }
39    sum += n;
40    alt = !alt;
41  }
42  return sum % 10 === 0;
43}
44 
45function detectBrand(digits: string): string {
46  if (digits.startsWith("4")) return "VISA";
47  if (/^5[1-5]/.test(digits)) return "MASTERCARD";
48  if (/^3[47]/.test(digits)) return "AMEX";
49  return "BANK";
50}
51 
52function formatGroups(digits: string): string[] {
53  const groups: string[] = [];
54  let i = 0;
55  for (const size of GROUP_SIZES) {
56    groups.push(digits.slice(i, i + size));
57    i += size;
58  }
59  return groups;
60}
61 
62// Monochrome film-grain overlay via feTurbulence — never a CSS gradient
63// function, so it can't read as a decorative color wash.
64const NOISE_BG = `url("data:image/svg+xml,${encodeURIComponent(
65// … truncated