"use client"; import { motion, useReducedMotion } from "framer-motion" import type React from "react" import { useId, useState } from "react" import { useTheme } from "next-themes" interface HudButtonProps { children: React.ReactNode variant?: "primary" | "secondary" style?: "style1" | "style2" size?: "small" | "default" | "large" onClick?: () => void delay?: number enableAnimations?: boolean } function HudButton({ children, variant = "primary", style = "style1", size = "default", onClick, delay = 0, enableAnimations = true }: HudButtonProps) { const shouldReduceMotion = useReducedMotion() const shouldAnimate = enableAnimations && !shouldReduceMotion const [isHovered, setIsHovered] = useState(false) const { resolvedTheme } = useTheme() const isDark = resolvedTheme !== "light" // Theme-aware color system const getColors = () => { if (variant === "primary") { return { main: isDark ? "#4ade80" : "#16a34a", // Keep dark green, slightly darker for light gradient: isDark ? "#4ade80" : "#16a34a", text: isDark ? "text-green-300" : "text-green-700", glow: isDark ? "rgba(74, 222, 128, 0.3)" : "rgba(22, 163, 74, 0.2)", border: isDark ? "#4ade80" : "#16a34a" } } else { return { main: isDark ? "#64748b" : "#374151", // Keep dark slate, darker for light gradient: isDark ? "#64748b" : "#374151", text: isDark ? "text-slate-600 dark:text-slate-300" : "text-gray-600", glow: isDark ? "rgba(100, 116, 139, 0.2)" : "rgba(55, 65, 81, 0.1)", border: isDark ? "#64748b" : "#374151" } } } const colors = getColors() const buttonVariants = { hidden: { opacity: 0, y: 20, scale: 0.95, filter: shouldAnimate ? "blur(4px)" : "blur(0px)", }, show: { opacity: 1, y: 0, scale: 1, filter: "blur(0px)", transition: { type: "spring", stiffness: 300, damping: 25, mass: 0.8, delay, duration: shouldAnimate ? undefined : 0, }, }, } const containerVariants = { hover: { scale: 1.02, y: -2, rotateX: 2, transition: { type: "spring", stiffness: 400, damping: 25, mass: 0.6, }, }, tap: { scale: 0.98, y: 0, rotateX: 0, transition: { type: "spring", stiffness: 500, damping: 30, mass: 0.5, }, }, } const glowVariants = { initial: { opacity: 0, scale: 0.8, }, hover: { opacity: variant === "primary" ? (isDark ? 0.6 : 0.4) : (isDark ? 0.3 : 0.2), scale: 1.1, transition: { type: "spring", stiffness: 300, damping: 20, }, }, } const dotVariants = { hidden: { scale: 0, opacity: 0, filter: "blur(2px)" }, show: (i: number) => ({ scale: 1, opacity: 1, filter: "blur(0px)", transition: { type: "spring", stiffness: 400, damping: 25, delay: delay + 0.3 + (i * 0.05), duration: shouldAnimate ? undefined : 0, }, }), hover: { scale: 1.2, opacity: 1, transition: { type: "spring", stiffness: 500, damping: 25, mass: 0.4, }, }, } const shimmerVariants = { initial: { x: "-100%", opacity: 0, }, animate: { x: "100%", opacity: [0, 0.5, 0], transition: { duration: 2, repeat: Infinity, repeatDelay: 3, ease: "easeInOut", }, }, } const uniqueId = useId() const gradientId1 = `gradient1-${uniqueId}` const gradientId2 = `gradient2-${uniqueId}` const gradientId = `gradient-${uniqueId}` const getSizeStyles = () => { if (style === "style1") { return { width: "182px", height: "44px", textClass: "text-sm tracking-wider" } } switch (size) { case "small": return { width: "140px", height: "39px", textClass: "text-xs tracking-wide" } case "large": return { width: "234px", height: "65px", textClass: "text-base tracking-wider" } default: return { width: "187px", height: "52px", textClass: "text-sm tracking-wider" } } } const sizeStyles = getSizeStyles() const renderStyle1SVG = () => ( ) const renderStyle2SVG = () => ( ) return ( setIsHovered(true)} onHoverEnd={() => setIsHovered(false)} style={{ width: sizeStyles.width, height: sizeStyles.height, perspective: "1000px" }} > {/* Background glow effect */} {/* Shimmer effect */} {shouldAnimate && variant === "primary" && (

)} {style === "style1" ? renderStyle1SVG() : renderStyle2SVG()} {/* Text overlay */}

) } import { AnimatePresence, motion, Variants } from "framer-motion"; import { useEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; interface HyperTextProps { text: string; duration?: number; framerProps?: Variants; className?: string; animateOnLoad?: boolean; trigger?: boolean; } const alphabets = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split(""); const getRandomInt = (max: number) => Math.floor(Math.random() * max); function HyperText({ text, duration = 800, framerProps = { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 3 }, }, className, animateOnLoad = true, trigger = true, }: HyperTextProps) { const [displayText, setDisplayText] = useState(text.split("")); const [isAnimating, setIsAnimating] = useState(false); const interations = useRef(0); const isFirstRender = useRef(true); const triggerAnimation = () => { interations.current = 0; setIsAnimating(true); }; // Update displayText when text prop changes useEffect(() => { setDisplayText(text.split("")); }, [text]); useEffect(() => { if (trigger) { triggerAnimation(); } }, [trigger]); useEffect(() => { if (!isAnimating) return; const interval = setInterval( () => { if (!animateOnLoad && isFirstRender.current) { clearInterval(interval); isFirstRender.current = false; return; } if (interations.current < text.length) { setDisplayText((t) => t.map((l, i) => l === " " ? l : i <= interations.current ? text[i] : alphabets[getRandomInt(26)], ), ); interations.current = interations.current + 0.1; } else { setIsAnimating(false); clearInterval(interval); } }, duration / (text.length * 10), ); // Clean up interval on unmount return () => clearInterval(interval); }, [text, duration, isAnimating, animateOnLoad]); return (

{displayText.map((letter, i) => ( {letter.toUpperCase()} ))}

); } import { motion, useReducedMotion } from "framer-motion"; import { cn } from "@/lib/utils"; interface Overlay2Props { className?: string; compact?: boolean; } const containerVariants = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.3, }, }, }; const itemVariants = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0, transition: { type: "spring" as const, stiffness: 100, damping: 15, }, }, }; const svgVariants = { hidden: { opacity: 0, scale: 0.95 }, show: { opacity: 1, scale: 1, transition: { duration: 0.8, ease: [0.22, 1, 0.36, 1] as const, }, }, }; export function Overlay2({ className, compact = false }: Overlay2Props) { const shouldReduceMotion = useReducedMotion(); const animationProps = shouldReduceMotion ? { initial: false as const, animate: "show" as const, } : { initial: "hidden" as const, animate: "show" as const, }; return (

SYSTEM ONLINE INTERFACE 01 INITIALIZE

); }