"use client"; import React, { useRef, useState, useEffect } from "react"; import { motion, useMotionValue, useSpring, useTransform, AnimatePresence } from "framer-motion"; export interface GyroscopeNode { id: string; label: string; icon: React.ReactNode; angle: number; // Angle in degrees (0-360) where it sits on the orbit color?: string; } export interface GyroscopeCoreProps extends React.ComponentPropsWithoutRef<"div"> { nodes?: GyroscopeNode[]; primaryColor?: string; secondaryColor?: string; glowColor?: string; coreLabel?: string; onNodeClick?: (node: GyroscopeNode) => void; } const DEFAULT_GYROSCOPE_NODES: GyroscopeNode[] = [ { id: "nav-system", label: "Nav System", angle: 0, color: "#ff5c71", icon: ( ), }, { id: "shield-grid", label: "Shield Grid", angle: 72, color: "#7fff5e", icon: ( ), }, { id: "hyper-drive", label: "Hyper Drive", angle: 144, color: "#00f0ff", icon: ( ), }, { id: "comms-array", label: "Comms Array", angle: 216, color: "#ff8c00", icon: ( ), }, { id: "life-support", label: "Life Support", angle: 288, color: "#e8d5b7", icon: ( ), }, ]; export const GyroscopeCore = React.forwardRef( ( { nodes = DEFAULT_GYROSCOPE_NODES, primaryColor = "#ff5c71", secondaryColor = "#7fff5e", glowColor = "#00f0ff", coreLabel = "INITIALIZE", onNodeClick, className = "", style, ...props }, forwardedRef ) => { const internalRef = useRef(null); const containerRef = (forwardedRef as React.RefObject) || internalRef; const [isHovered, setIsHovered] = useState(false); const [isDeployed, setIsDeployed] = useState(false); const [isClient, setIsClient] = useState(false); useEffect(() => { setIsClient(true); }, []); // Mouse tracking for parallax const mouseX = useMotionValue(0); const mouseY = useMotionValue(0); const springConfig = { damping: 20, stiffness: 100, mass: 0.5 }; const smoothX = useSpring(mouseX, springConfig); const smoothY = useSpring(mouseY, springConfig); const handleMouseMove = (e: React.MouseEvent) => { if (!containerRef.current || isDeployed) return; const rect = containerRef.current.getBoundingClientRect(); const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; const distanceX = e.clientX - centerX; const distanceY = e.clientY - centerY; // Normalize between -1 and 1 mouseX.set(distanceX / (rect.width / 2)); mouseY.set(distanceY / (rect.height / 2)); }; const handleMouseLeave = () => { setIsHovered(false); if (!isDeployed) { mouseX.set(0); mouseY.set(0); } }; const handleMouseEnter = () => { setIsHovered(true); }; const toggleDeploy = () => { if (isDeployed) { setIsDeployed(false); } else { setIsDeployed(true); mouseX.set(0); mouseY.set(0); } }; // Calculate ring rotations based on state and mouse position // Ring 1 (Outer) const ring1RotateX = useTransform(smoothY, [-1, 1], [60, -60]); const ring1RotateY = useTransform(smoothX, [-1, 1], [-60, 60]); // Ring 2 (Middle) const ring2RotateX = useTransform(smoothY, [-1, 1], [-45, 45]); const ring2RotateY = useTransform(smoothX, [-1, 1], [45, -45]); // Ring 3 (Inner) const ring3RotateX = useTransform(smoothY, [-1, 1], [30, -30]); const ring3RotateY = useTransform(smoothX, [-1, 1], [-30, 30]); if (!isClient) return

; return (

{/* Core Component */} {/* Ring 1 (Outer) */} {/* Deploying nodes along the outer ring */} {isDeployed && nodes.map((node, i) => { const radius = 144; // Half of 288px (w-72) const angleRad = (node.angle * Math.PI) / 180; // Position on the circle const x = Math.cos(angleRad) * radius; const y = Math.sin(angleRad) * radius; return ( { e.stopPropagation(); onNodeClick?.(node); }} whileHover={{ scale: 1.15 }} whileTap={{ scale: 0.95 }} style={{ x: "-50%", y: "-50%", }} >

{node.icon}

{node.label} ); })} {/* Ring 2 (Middle) */} {/* Ring 3 (Inner) */} {/* Core Button */} {/* Core glowing orb inner */} {isDeployed ? ( ) : ( CORE

)} {/* Holographic floor plane */}

); } ); GyroscopeCore.displayName = "GyroscopeCore";

Component Showcase

Choose Installation Method

AI Automation Agent Prompt