holographic-card

1"use client"
2 
3import React, { useRef, useState } from "react"
4import {
5  motion,
6  useMotionTemplate,
7  useMotionValue,
8  useSpring,
9  useTransform,
10} from "motion/react"
11 
12// ==========================================
13// ==== Component Interface ================
14// ==========================================
15export interface HolographicCardProps {
16  id?: string
17  width?: number
18  height?: number
19  imageSrc: string
20  // -- Hover Image --
21  hoverImageSrc?: string
22  hoverImageEase?: string
23  // -- Content Strings --
24  topText?: React.ReactNode
25  bottomText?: React.ReactNode
26  // -- Text Layout / Global --
27  mirrorBottomText?: boolean
28  isRTL?: boolean
29  textOverlayPadding?: string
30  // -- Top Text Config --
31  topTextVertical?: boolean
32  topTextWeight?: number | string
33  topTextFontSize?: string | number
34  topTextLetterSpacing?: string | number
35  topTextColor?: string
36  topTextHoverColor?: string
37  topTextClassName?: string
38  // -- Bottom Text Config --
39  bottomTextVertical?: boolean
40  bottomTextWeight?: number | string
41  bottomTextFontSize?: string | number
42  bottomTextLetterSpacing?: string | number
43  bottomTextColor?: string
44  bottomTextHoverColor?: string
45  bottomTextClassName?: string
46  // -- Base Visuals --
47  borderRadius?: number
48  borderWidth?: number
49  borderColor?: string
50  backgroundColor?: string
51  imageOpacity?: number
52  maxImageWidthPct?: number
53  // -- Pattern Props --
54  patternColor?: string
55  patternOpacity?: number
56  patternSize?: number
57  patternDotSize?: number
58  // -- Hologram --
59  enableHologram?: boolean
60  hologramOpacity?: number
61  holographicGradient?: string
62  // -- Interaction --
63  enableTilt?: boolean
64  enableDrag?: boolean
65  dragConstraints?: React.RefObject<Element>
66  className?: string
67  style?: React.CSSProperties
68}
69 
70// ==========================================
71// ==== Component Implementation ===========
72// ==========================================
73const HolographicCard: React.FC<HolographicCardProps> = ({
74  id = "namer-ui-holographic-card",
75  width = 320,
76  height = 480,
77  imageSrc,
78  hoverImageSrc,
79  hoverImageEase = "0.3s",
80  // Content
81  topText,
82  bottomText,
83  // Layout
84  mirrorBottomText = true,
85  isRTL = false,
86  textOverlayPadding = "1.375rem 1.325rem",
87  // Top Text Defaults
88  topTextVertical = true,
89  topTextWeight = 700,
90  topTextFontSize = "1.5rem",
91  topTextLetterSpacing = "0.1em",
92  topTextColor = "#fff",
93  topTextHoverColor = "#FBE75F",
94  topTextClassName = "",
95  // Bottom Text Defaults
96// … truncated