Credit Card

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6import { useInViewport } from "@/registry/lib/use-in-viewport"
7 
8export interface CreditCardProps extends React.ComponentProps<"div"> {
9  /** Which face to draw. Pair the two inside a flip card to turn it over. */
10  side?: "front" | "back"
11  /** Number across the face. Grouped however you write it. */
12  number?: string
13  /** Name along the bottom. */
14  holder?: string
15  /** Expiry along the bottom. */
16  expiry?: string
17  /** Security code on the back. */
18  cvv?: string
19  /** Name in the top left. */
20  issuer?: React.ReactNode
21  /** Mark in the bottom right. Leave it out for the placeholder rings. */
22  brand?: React.ReactNode
23  /** Show only the last four digits. */
24  masked?: boolean
25  /** Colours of the aurora drifting under the face. One blob per colour. */
26  colors?: string[]
27  /** Seconds for one drift of a single blob. */
28  duration?: number
29  /** Render the face still, with no drift. */
30  disabled?: boolean
31}
32 
33const DEFAULT_COLORS = ["#22d3ee", "#6366f1", "#c084fc", "#14b8a6"]
34 
35/**
36 * Fixed rather than random. A card is one frame, and four blobs placed by hand
37 * cover it better than four that happen to land in the same corner.
38 */
39const BLOB_LAYOUT = [
40  { size: 78, x: 12, y: 18, speed: 1, delay: 0 },
41  { size: 66, x: 82, y: 26, speed: 1.35, delay: -6 },
42  { size: 88, x: 68, y: 88, speed: 0.85, delay: -11 },
43  { size: 58, x: 34, y: 76, speed: 1.6, delay: -3 },
44]
45 
46/** Keeps the last four and turns the rest into bullets, groups intact. */
47function maskNumber(number: string) {
48  const digits = number.replace(/\D/g, "")
49  const hidden = Math.max(digits.length - 4, 0)
50  let seen = 0
51 
52  return number.replace(/\d/g, (digit) => {
53    seen += 1
54    return seen <= hidden ? "•" : digit
55  })
56}
57 
58/** The contact plate. Drawn rather than shipped as an image so it stays sharp. */
59function Chip() {
60  return (
61    <svg
62      viewBox="0 0 40 30"
63      aria-hidden="true"
64      className="h-6 w-8 drop-shadow-sm sm:h-8 sm:w-11"
65    >
66      <rect
67        width="40"
68        height="30"
69        rx="5"
70        fill="url(#loom-card-chip)"
71        stroke="rgba(0,0,0,0.18)"
72      />
73      <g stroke="rgba(0,0,0,0.28)" strokeWidth="1" fill="none">
74        <path d="M14 0v30M26 0v30M0 11h14M26 11h14M0 19h14M26 19h14" />
75      </g>
76      <defs>
77        <linearGradient id="loom-card-chip" x1="0" y1="0" x2="1" y2="1">
78          <stop offset="0%" stopColor="#f6e7bd" />
79// … truncated