Holo Card

1"use client";
2 
3import Image from "next/image";
4import type React from "react";
5import { useRef, useState, useCallback } from "react";
6import Tilt from "react-parallax-tilt";
7import { cn } from "@/lib/utils";
8import "./holo-card.css";
9 
10// ============================================================================
11// Types
12// ============================================================================
13 
14export interface HoloCardDisplayData {
15	/** Primary name displayed on the card */
16	name: string;
17	/** Secondary text (e.g., personality phrase, tagline) */
18	subtitle?: string;
19	/** Extended description shown on the back of the card */
20	description?: string;
21	/** Primary identifier (e.g., user number, ID) */
22	primaryId?: string | number;
23	/** Secondary info (e.g., member since date) */
24	secondaryInfo?: string;
25	/** Background image URL */
26	backgroundImage?: string;
27	/** Badge/tag text (e.g., house name, role) */
28	badge?: string;
29	/** Overlay color for the card */
30	overlayColor?: string;
31	/** Overlay opacity (0-100) */
32	overlayOpacity?: number;
33}
34 
35export interface HoloCardBranding {
36	/** Primary logo image URL */
37	logo?: string;
38	/** Logo alt text */
39	logoAlt?: string;
40	/** Icon shown in various places */
41	icon?: string;
42	/** Icon alt text */
43	iconAlt?: string;
44}
45 
46export interface HoloCardProps {
47	/** Card display data */
48	data: HoloCardDisplayData;
49	/** Card dimensions */
50	height?: number;
51	width?: number;
52	/** Show sparkle animation effect */
53	showSparkles?: boolean;
54	/** Force card to show front or back (disables flip) */
55	forceSide?: "front" | "back";
56	/** Custom branding (logos, icons) */
57	branding?: HoloCardBranding;
58	/** Additional CSS classes */
59	className?: string;
60	/** Children rendered inside the card */
61	children?: React.ReactNode;
62	/** Callback when card is flipped */
63	onFlip?: (isFlipped: boolean) => void;
64}
65 
66// ============================================================================
67// Default Values
68// ============================================================================
69 
70const DEFAULT_BACKGROUND =
71	"https://i.pinimg.com/1200x/27/0a/74/270a74bdc412f9eeae4d2403ebc9bd63.jpg";
72 
73const DEFAULT_BRANDING: HoloCardBranding = {
74	logo: "/images/logos/text_w_logo_white.webp",
75	logoAlt: "Logo",
76	icon: "/images/logos/experience_logo.svg",
77	iconAlt: "Icon",
78};
79 
80// ============================================================================
81// Component
82// ============================================================================
83 
84// … truncated