"use client"; import React, { useState, useRef, useEffect } from "react"; import { motion, useMotionValue, useSpring, useTransform, AnimatePresence } from "framer-motion"; export interface HologramSlide { id: string; title: string; content: React.ReactNode; } export interface HologramProjectorProps extends React.ComponentPropsWithoutRef<"div"> { primaryColor?: string; secondaryColor?: string; glowColor?: string; baseColor?: string; slides?: HologramSlide[]; } const DEFAULT_HOLOGRAM_SLIDES: HologramSlide[] = [ { id: "sys-status", title: "SYS.STATUS", content: (

CORE_TEMP 34.2°C

NETWORK_LOAD 89.4%

) }, { id: "bio-scan", title: "BIO.SCAN", content: (

{/* Animated fingerprint/scan visual */}

IDENTITY_VERIFIED

) }, { id: "neural-link", title: "NEURAL.LINK", content: (

{[...Array(12)].map((_, i) => ( ))}

Syncing Cortex...

) } ]; export function HologramProjector({ primaryColor = "#00f0ff", secondaryColor = "#ff5c71", glowColor = "#7fff5e", baseColor = "#111111", slides = DEFAULT_HOLOGRAM_SLIDES, className = "", style, ...props }: HologramProjectorProps) { const [activeSlide, setActiveSlide] = useState(0); const [isGlitching, setIsGlitching] = useState(false); const containerRef = useRef(null); const [mounted, setMounted] = useState(false); useEffect(() => { const timer = setTimeout(() => setMounted(true), 0); return () => clearTimeout(timer); }, []); // Mouse tracking for parallax const x = useMotionValue(0); const y = useMotionValue(0); const handleMouseMove = (e: React.MouseEvent) => { if (!containerRef.current) return; const rect = containerRef.current.getBoundingClientRect(); const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; // Calculate normalized offset (-1 to 1) const offsetX = (e.clientX - centerX) / (rect.width / 2); const offsetY = (e.clientY - centerY) / (rect.height / 2); x.set(offsetX); y.set(offsetY); }; const handleMouseLeave = () => { x.set(0); y.set(0); }; // Parallax transforms const rotateX = useTransform(useSpring(y, { stiffness: 150, damping: 20 }), [-1, 1], [15, -15]); const rotateY = useTransform(useSpring(x, { stiffness: 150, damping: 20 }), [-1, 1], [-15, 15]); // Beam interaction const beamOpacity = useTransform(useSpring(y, { stiffness: 150, damping: 20 }), [-1, 1], [0.8, 0.4]); const beamSkew = useTransform(useSpring(x, { stiffness: 150, damping: 20 }), [-1, 1], [-5, 5]); const handleBaseClick = () => { if (isGlitching) return; setIsGlitching(true); // Glitch sound/haptic simulation if (typeof navigator !== 'undefined' && navigator.vibrate) { navigator.vibrate([20, 30, 20]); } setTimeout(() => { setActiveSlide((prev) => (prev + 1) % slides.length); setTimeout(() => { setIsGlitching(false); }, 300); }, 200); }; const currentSlide = slides[activeSlide]; // Custom CSS variables for easy styling const customStyle = { "--primary-color": primaryColor, "--secondary-color": secondaryColor, "--glow-color": glowColor, "--base-color": baseColor, ...style } as React.CSSProperties; if (!mounted) return null; // Prevent hydration mismatch with random values in animations (if any) return (

{/* Hologram Display Area */}

{/* Hologram Card */} {/* Scanlines Overlay */}

{/* Noise Overlay */}

{/* Glitch Overlay */} {isGlitching && (

)} {/* Content Wrapper */} {/* Header */}

{currentSlide.id.toUpperCase()}

{/* Body */}

{currentSlide.content}

{/* Footer */}

OS_v2.4 {String(activeSlide + 1).padStart(2, '0')}/{String(slides.length).padStart(2, '0')}

{/* Hologram Corner Accents */}

{/* Volumetric Light Beam */}

{/* Core beam */}

{/* Projector Base */} {/* Instructions / Label */}

TAP BASE TO CYCLE DATA

); }

Component Showcase

Choose Installation Method

AI Automation Agent Prompt