"use client"; import React, { useState, useEffect, useRef } from "react"; import { motion, AnimatePresence, useMotionValue, useSpring, useTransform } from "framer-motion"; interface GlowTerminalProps extends React.HTMLAttributes { primaryColor?: string; secondaryColor?: string; bgColor?: string; logs?: { id: string; time: string; message: string; type: "info" | "success" | "warning" | "error" }[]; } const DEFAULT_GLOW_LOGS: GlowTerminalProps["logs"] = [ { id: "1", time: "00:00:01", message: "SYSTEM_BOOT: AURA_CORE_INITIALIZED", type: "info" }, { id: "2", time: "00:00:03", message: "NEURAL LINK ESTABLISHED", type: "success" }, { id: "3", time: "00:00:05", message: "AURA SYNC IN PROGRESS...", type: "warning" }, { id: "4", time: "00:00:07", message: "MORPH SEQUENCE READY", type: "success" }, ]; export function GlowTerminal({ primaryColor = "#ff5c71", secondaryColor = "#7fff5e", bgColor = "#0a0a0a", logs = DEFAULT_GLOW_LOGS, className = "", style, ...props }: GlowTerminalProps) { const [isExpanded, setIsExpanded] = useState(false); const [mounted, setMounted] = useState(false); const containerRef = useRef(null); useEffect(() => { const t = setTimeout(() => setMounted(true), 0); return () => clearTimeout(t); }, []); // Mouse tracking for magnetic effect (when closed) and 3D parallax (when open) const mouseX = useMotionValue(0); const mouseY = useMotionValue(0); // Smooth springs const springConfig = { damping: 25, stiffness: 150 }; const springX = useSpring(mouseX, springConfig); const springY = useSpring(mouseY, springConfig); // 3D Parallax rotations (only active when expanded) const rotateX = useTransform(springY, [-0.5, 0.5], ["10deg", "-10deg"]); const rotateY = useTransform(springX, [-0.5, 0.5], ["-10deg", "10deg"]); // Magnetic translation (only active when closed) const translateX = useTransform(springX, [-0.5, 0.5], [-30, 30]); const translateY = useTransform(springY, [-0.5, 0.5], [-30, 30]); const handleMouseMove = (e: React.MouseEvent) => { if (!containerRef.current) return; const rect = containerRef.current.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; // Normalize to -0.5 to 0.5 const xPct = x / rect.width - 0.5; const yPct = y / rect.height - 0.5; mouseX.set(xPct); mouseY.set(yPct); }; const handleMouseLeave = () => { mouseX.set(0); mouseY.set(0); }; const toggleExpand = () => { setIsExpanded((prev) => !prev); mouseX.set(0); mouseY.set(0); }; if (!mounted) return null; return (

{/* Subtle noise overlay */}

{!isExpanded ? ( {/* Glowing Core */} {/* Orbiting Ring */}

) : ( {/* Terminal Header */}

Aura_Morph_Term v1.0

ONLINE

{/* Terminal Body */}

{logs?.map((log, index) => ( [{log.time}] {log.message} ))} {/* Blinking Cursor line */} root@melonui:~#

{/* Decorative Grid Background for Terminal */}

)}

); }

Component Showcase

Choose Installation Method

AI Automation Agent Prompt