"use client"; import React, { useRef, useState } from "react"; import { motion, AnimatePresence, useMotionValue, useSpring } from "framer-motion"; export interface SingularityNode { id: string; label: string; icon: React.ReactNode; color: string; } export interface SingularityControlNodeProps extends React.ComponentPropsWithoutRef<"div"> { nodes?: SingularityNode[]; coreColor?: string; onNodeClick?: (node: SingularityNode) => void; } const DEFAULT_NODES: SingularityNode[] = [ { id: "neural-link", label: "Neural Link", color: "#ff5c71", icon: ( ), }, { id: "quantum-state", label: "Quantum State", color: "#7fff5e", icon: ( ), }, { id: "hyper-drive", label: "Hyper Drive", color: "#00f0ff", icon: ( ), }, { id: "void-core", label: "Void Core", color: "#a371f7", icon: ( ), }, ]; export const SingularityControlNode: React.FC = ({ nodes = DEFAULT_NODES, coreColor = "#ff5c71", onNodeClick, className = "", style, ...props }) => { const [isOpen, setIsOpen] = useState(false); const containerRef = useRef(null); // Magnetic Core Physics const mouseX = useMotionValue(0); const mouseY = useMotionValue(0); const springConfig = { damping: 15, stiffness: 150, mass: 0.5 }; const smoothX = useSpring(mouseX, springConfig); const smoothY = useSpring(mouseY, springConfig); const handleMouseMove = (e: React.MouseEvent) => { if (!containerRef.current || isOpen) { mouseX.set(0); mouseY.set(0); return; } const rect = containerRef.current.getBoundingClientRect(); const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; // Magnetic pull extent const pullX = (e.clientX - centerX) * 0.3; const pullY = (e.clientY - centerY) * 0.3; mouseX.set(pullX); mouseY.set(pullY); }; const handleMouseLeave = () => { mouseX.set(0); mouseY.set(0); }; // Radius for the expanded nodes const RADIUS = 120; return (

{/* Background Grid & Noise */}

{/* Connection Lines (Synapses) */} {/* Orbiting Nodes */} {isOpen && nodes.map((node, index) => { const angle = (index / nodes.length) * Math.PI * 2 - Math.PI / 2; const x = Math.cos(angle) * RADIUS; const y = Math.sin(angle) * RADIUS; return ( { e.stopPropagation(); if (onNodeClick) onNodeClick(node); }} className="group relative flex items-center justify-center w-12 h-12 rounded-xl bg-black/40 border border-white/10 backdrop-blur-md overflow-hidden cursor-pointer" >

{node.icon}

{/* Node Glow */}

{/* Tooltip */}

{node.label}

); })} {/* Central Core */} setIsOpen(!isOpen)} whileHover={{ scale: isOpen ? 1 : 1.05 }} whileTap={{ scale: 0.95 }} aria-expanded={isOpen} aria-label="Toggle Singularity Control Node" > {/* Core Inner */}

{/* Core Gradient Spin */} {/* Core Center Dot */}

{/* Core Outer Glow */} {/* Active Rings */} {isOpen && ( )}

); };

Component Showcase

Choose Installation Method

AI Automation Agent Prompt