50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T2f6b,"use client"; import Image from "next/image"; import type React from "react"; import { useRef, useState, useCallback } from "react"; import Tilt from "react-parallax-tilt"; import { cn } from "@/lib/utils"; import "./holo-card.css"; // ============================================================================ // Types // ============================================================================ export interface HoloCardDisplayData { /** Primary name displayed on the card */ name: string; /** Secondary text (e.g., personality phrase, tagline) */ subtitle?: string; /** Extended description shown on the back of the card */ description?: string; /** Primary identifier (e.g., user number, ID) */ primaryId?: string | number; /** Secondary info (e.g., member since date) */ secondaryInfo?: string; /** Background image URL */ backgroundImage?: string; /** Badge/tag text (e.g., house name, role) */ badge?: string; /** Overlay color for the card */ overlayColor?: string; /** Overlay opacity (0-100) */ overlayOpacity?: number; } export interface HoloCardBranding { /** Primary logo image URL */ logo?: string; /** Logo alt text */ logoAlt?: string; /** Icon shown in various places */ icon?: string; /** Icon alt text */ iconAlt?: string; } export interface HoloCardProps { /** Card display data */ data: HoloCardDisplayData; /** Card dimensions */ height?: number; width?: number; /** Show sparkle animation effect */ showSparkles?: boolean; /** Force card to show front or back (disables flip) */ forceSide?: "front" | "back"; /** Custom branding (logos, icons) */ branding?: HoloCardBranding; /** Additional CSS classes */ className?: string; /** Children rendered inside the card */ children?: React.ReactNode; /** Callback when card is flipped */ onFlip?: (isFlipped: boolean) => void; } // ============================================================================ // Default Values // ============================================================================ const DEFAULT_BACKGROUND = "https://i.pinimg.com/1200x/27/0a/74/270a74bdc412f9eeae4d2403ebc9bd63.jpg"; const DEFAULT_BRANDING: HoloCardBranding = { logo: "/images/logos/text_w_logo_white.webp", logoAlt: "Logo", icon: "/images/logos/experience_logo.svg", iconAlt: "Icon", }; // ============================================================================ // Component // ============================================================================ export const HoloCard = ({ data, height = 446, width = 320, showSparkles = true, forceSide, branding = DEFAULT_BRANDING, className, children, onFlip, }: HoloCardProps) => { const [hover, setHover] = useState(false); const [animated, setAnimated] = useState(true); const [isFlipped, setIsFlipped] = useState(false); const [activeBackgroundPosition, setActiveBackgroundPosition] = useState({ tp: 0, lp: 0, }); const ref = useRef(null); const { name, subtitle, description, primaryId, secondaryInfo, backgroundImage = DEFAULT_BACKGROUND, badge, overlayColor, overlayOpacity = 40, } = data; const handleCardClick = useCallback(() => { if (!forceSide) { const newFlippedState = !isFlipped; setIsFlipped(newFlippedState); onFlip?.(newFlippedState); } }, [forceSide, isFlipped, onFlip]); const handleOnMouseMove = useCallback( (event: React.MouseEvent) => { setAnimated(false); setHover(true); const card = ref.current; const l = event.nativeEvent.offsetX; const t = event.nativeEvent.offsetY; const h = card ? card.clientHeight : 0; const w = card ? card.clientWidth : 0; const px = Math.abs(Math.floor((100 / w) * l) - 100); const py = Math.abs(Math.floor((100 / h) * t) - 100); const lp = 50 + (px - 50) / 1.5; const tp = 50 + (py - 50) / 1.5; setActiveBackgroundPosition({ lp, tp }); }, [], ); const handleOnTouchMove = useCallback( (event: React.TouchEvent) => { setAnimated(false); setHover(true); const card = ref.current; if (!card) return; const touch = event.touches[0]; const rect = card.getBoundingClientRect(); const l = touch.clientX - rect.left; const t = touch.clientY - rect.top; const h = card.clientHeight; const w = card.clientWidth; const px = Math.abs(Math.floor((100 / w) * l) - 100); const py = Math.abs(Math.floor((100 / h) * t) - 100); const lp = 50 + (px - 50) / 1.5; const tp = 50 + (py - 50) / 1.5; setActiveBackgroundPosition({ lp, tp }); }, [], ); const handleOnMouseOut = useCallback(() => { setHover(false); setAnimated(true); }, []); const effectiveFlipped = forceSide ? forceSide === "back" : isFlipped; // Static mode styles for download/static rendering const containerStyle = forceSide ? { perspective: "none", transform: "none", } : { perspective: "1000px", cursor: "pointer", }; const innerStyle = forceSide ? { transform: "none", position: "relative" as const, height: `${height}px`, width: `${width}px`, } : { transformStyle: "preserve-3d" as const, transform: effectiveFlipped ? "rotateY(180deg)" : "rotateY(0deg)", height: `${height}px`, width: `${width}px`, }; const frontStyle = forceSide ? { display: forceSide === "front" ? "block" : "none", position: "absolute" as const, inset: 0, } : { position: "absolute" as const, inset: 0, backfaceVisibility: "hidden" as const, WebkitBackfaceVisibility: "hidden" as const, }; const backStyle = forceSide ? { display: forceSide === "back" ? "block" : "none", position: "absolute" as const, inset: 0, transform: "none", } : { position: "absolute" as const, inset: 0, backfaceVisibility: "hidden" as const, WebkitBackfaceVisibility: "hidden" as const, transform: "rotateY(180deg)", }; const holoCardClasses = cn( "holo-card", hover && "holo-card--active", animated && "holo-card--animated", showSparkles && "holo-card--sparkles", ); const holoCardStyle = { "--holo-width": `${width}px`, "--holo-height": `${height}px`, backgroundImage: `url(${backgroundImage})`, backgroundPosition: hover ? `${activeBackgroundPosition.lp}% ${activeBackgroundPosition.tp}%` : "center", } as React.CSSProperties; // Overlay component const OverlayLayer = overlayColor ? (

) : null; // Front card content const FrontContent = (

{/* Top bar with logo and badge */}

{branding.logo && (

)} {badge && (

{badge}

)}

{/* Background icon */} {branding.icon && (

)} {/* Bottom info card */}

{name}

{subtitle && (

{subtitle}

)}

{primaryId && ( User {primaryId} )} {secondaryInfo && ( {secondaryInfo} )}

{branding.icon && (

)}

); // Back card content const BackContent = (

{/* Top bar */}

{branding.logo && (

)} {badge && (

{badge}

)}

{/* Bio section */}

{name}

{subtitle && (

{subtitle}

)} {description && (

{description}

)}

{/* Bottom info */}

Member Since {secondaryInfo || "—"}

User ID {primaryId || "—"}

); // Render card face (either static or with tilt) const renderCardFace = ( content: React.ReactNode, isStatic: boolean = false, ) => { if (isStatic || forceSide) { return (

{OverlayLayer} {content}

{children}

); } return ( {OverlayLayer} {content}

{children}

); }; const handleKeyDown = useCallback( (event: React.KeyboardEvent) => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); handleCardClick(); } }, [handleCardClick], ); return (

{/* Front Side */}

{renderCardFace(FrontContent, !!forceSide)}

{/* Back Side */}

{renderCardFace(BackContent, !!forceSide)}

); }; export default HoloCard; 53:Te79,/* HoloCard Animations and Styles */ @keyframes holoSparkle { 0%, 100% { opacity: 0.75; filter: brightness(1.2) contrast(1.25); } 5%, 8% { opacity: 1; filter: brightness(0.8) contrast(1.2); } 13%, 16% { opacity: 0.5; filter: brightness(1.2) contrast(0.8); } 35%, 38% { opacity: 1; filter: brightness(1) contrast(1); } 55% { opacity: 0.33; filter: brightness(1.2) contrast(1.25); } } @keyframes holoGradient { 0%, 100% { opacity: 0.5; background-position: 50% 50%; filter: brightness(0.5) contrast(1); } 5%, 9% { background-position: 100% 100%; opacity: 1; filter: brightness(0.75) contrast(1.25); } 13%, 17% { background-position: 0% 0%; opacity: 0.88; } 35%, 39% { background-position: 100% 100%; opacity: 1; filter: brightness(0.5) contrast(1); } 55% { background-position: 0% 0%; opacity: 1; filter: brightness(0.75) contrast(1.25); } } .holo-card { --holo-width: 320px; --holo-height: 446px; width: var(--holo-width); height: var(--holo-height); background-color: #211799; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 5% / 3.5%; box-shadow: -3px -3px 3px 0 rgba(38, 230, 247, 0.3), 3px 3px 3px 0 rgba(247, 89, 228, 0.3), 0 0 6px 2px rgba(255, 231, 89, 0.3), 0 35px 25px -15px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; display: inline-block; vertical-align: middle; transition: transform 0.3s ease; } /* Pseudo-elements for holographic effects */ .holo-card::before, .holo-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-position: 0% 0%; background-repeat: no-repeat; background-size: 300% 300%; mix-blend-mode: color-dodge; opacity: 0.2; z-index: 1; background-image: linear-gradient( 115deg, transparent 0%, #54a29e 25%, transparent 47%, transparent 53%, #a79d66 75%, transparent 100% ); } /* Sparkles effect */ .holo-card--sparkles::after { background-image: url("https://assets.codepen.io/13471/sparkles.gif"), linear-gradient( 125deg, rgba(255, 0, 132, 0.31) 15%, rgba(252, 164, 0, 0.25) 30%, rgba(255, 255, 0, 0.19) 40%, rgba(0, 255, 138, 0.13) 60%, rgba(0, 207, 255, 0.25) 70%, rgba(204, 76, 250, 0.31) 85% ); background-position: center; background-size: 180%; mix-blend-mode: color-dodge; opacity: 1; z-index: 1; } /* Active/hover state */ .holo-card--active::before { opacity: 1; animation: none; transition: none; background-image: linear-gradient( 110deg, transparent 25%, #54a29e 48%, #a79d66 52%, transparent 75% ); } /* Animated state (default) */ .holo-card--animated { transition: transform 1s ease; } .holo-card--animated::before { transition: all 1s ease; animation: holoGradient 12s ease infinite; } .holo-card--animated::after { transition: all 1s ease; animation: holoSparkle 12s ease infinite; } /* Card flip container */ .holo-card-container { perspective: 1000px; cursor: pointer; } .holo-card-container--static { perspective: none; cursor: default; } .holo-card-inner { position: relative; transition: transform 0.7s ease; transform-style: preserve-3d; } .holo-card-inner--flipped { transform: rotateY(180deg); } .holo-card-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .holo-card-face--back { transform: rotateY(180deg); } /* Light mode adjustments */ :root[data-theme="light"] .holo-card, .light .holo-card { box-shadow: -3px -3px 3px 0 rgba(38, 230, 247, 0.2), 3px 3px 3px 0 rgba(247, 89, 228, 0.2), 0 0 6px 2px rgba(255, 231, 89, 0.2), 0 35px 25px -15px rgba(0, 0, 0, 0.15); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","react-parallax-tilt",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-parallax-tilt","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-parallax-tilt"}]]}]}]]}],["$","$L50",null,{"namespace":"@gaia","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/new-york/ui/holo-card.tsx","content":"$52","type":"registry:ui"},{"path":"registry/new-york/ui/holo-card.css","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]