"use client"; import React, { useState } from "react"; import { motion } from "framer-motion"; export interface UnfoldingPanelCardProps extends React.ComponentPropsWithoutRef<"div"> { title?: string; subtitle?: string; primaryColor?: string; secondaryColor?: string; topContent?: React.ReactNode; bottomContent?: React.ReactNode; leftContent?: React.ReactNode; rightContent?: React.ReactNode; } export function UnfoldingPanelCard({ title = "CORE SYSTEM", subtitle = "HOVER TO DEPLOY", primaryColor = "#ff5c71", secondaryColor = "#7fff5e", topContent, bottomContent, leftContent, rightContent, className = "", style, ...props }: UnfoldingPanelCardProps) { const [isHovered, setIsHovered] = useState(false); // Physics for the flaps const springConfig = { type: "spring" as const, stiffness: 180, damping: 15, mass: 1 }; return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} onTouchStart={() => setIsHovered((prev) => !prev)} > {/* CENTER CARD */} {/* Noise layer */}

{title}

{subtitle}

{/* Animated glow orb inside center */} {/* TOP FLAP */} {/* Glass noise */}

{topContent || (

UPLINK_DATA

PACKETS 9,214

LATENCY 12ms

NODE_ID 0x8F21

)}

{/* Hinge Line */}

{/* BOTTOM FLAP */}

{bottomContent || (

TERMINAL_OUTPUT

> Establishing secure connection...
> Bypassing firewall protocols...
> Access granted.
_

)}

{/* Hinge Line */}

{/* LEFT FLAP */}

{leftContent || ( <>

)}

{/* Hinge Line */}

{/* RIGHT FLAP */}

{rightContent || ( <>

SYSTEMS

PWR

NET

SEC

AUX

)}

{/* Hinge Line */}

); }

Component Showcase

Choose Installation Method

AI Automation Agent Prompt