Cyberpunk Card

1"use client";
2 
3import type React from "react";
4import { useState, useEffect } from "react";
5import { cn } from "@/lib/utils";
6 
7export interface CyberpunkCardProps
8  extends React.HTMLAttributes<HTMLDivElement> {
9  theme?:
10    | "neon-blue"
11    | "neon-pink"
12    | "neon-green"
13    | "neon-orange"
14    | "neon-purple"
15    | "neon-cyan"
16    | "neon-red"
17    | "matrix-green"
18    | "cyber-red"
19    | "hologram"
20    | "custom";
21  customColors?: {
22    primary: string;
23    secondary: string;
24    accent: string;
25  };
26  borderStyle?:
27    | "solid"
28    | "dashed"
29    | "glitch"
30    | "corners"
31    | "animated"
32    | "circuit";
33  colorShift?: boolean;
34  lightTrail?: boolean;
35  rounded?: "none" | "sm" | "md" | "lg";
36  glow?: boolean;
37  glowIntensity?: 1 | 2 | 3 | 4 | 5;
38  backgroundEffect?:
39    | "none"
40    | "circuit"
41    | "matrix"
42    | "scanlines"
43    | "particles"
44    | "waves";
45  pulseAnimation?: boolean;
46  glitchEffect?: boolean;
47  hologramFlicker?: boolean;
48  dataStream?: boolean;
49  loading?: boolean;
50  animationSpeed?: "slow" | "normal" | "fast";
51  children: React.ReactNode;
52}
53 
54const MatrixRain = () => {
55  const [columns, setColumns] = useState<
56    Array<{
57      id: number;
58      characters: Array<{
59        char: string;
60        opacity: number;
61        isLeading: boolean;
62      }>;
63      x: number;
64      speed: number;
65      height: number;
66    }>
67  >([]);
68 
69  useEffect(() => {
70    const matrixChars =
71      "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン";
72 
73    const createColumn = (x: number) => ({
74      id: Math.random(),
75      x,
76      speed: Math.random() * 3 + 1,
77      height: Math.floor(Math.random() * 15) + 5,
78      characters: Array.from(
79        { length: Math.floor(Math.random() * 15) + 5 },
80        (_, i) => ({
81          char: matrixChars[Math.floor(Math.random() * matrixChars.length)],
82          opacity: Math.max(0, 1 - i * 0.15),
83          isLeading: i === 0,
84        }),
85      ),
86    });
87 
88    const initialColumns = Array.from({ length: 12 }, (_, i) =>
89      createColumn(i * 8.33 + Math.random() * 2),
90    );
91    setColumns(initialColumns);
92 
93    const interval = setInterval(() => {
94      setColumns((prevColumns) =>
95        prevColumns.map((column) => {
96          const newY = (column.speed * 2) % 120;
97          const updatedCharacters = column.characters.map((char, i) => ({
98            ...char,
99            char:
100// … truncated