import React, { useState, useEffect, useRef, useMemo } from 'react'; import { motion, AnimatePresence, useSpring, useMotionValue } from 'motion/react'; import { Command, Search, Settings, Zap, Cpu, Globe, Layers, Menu, X, Sparkles, ChevronRight } from 'lucide-react'; import { Button } from "@/components/ui/button"; import { Container } from "@/components/ui/container"; import { Badge } from "@/components/ui/badge"; import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"; // --- Types & Constants --- interface OrbCommand { id: string; icon: React.ElementType; label: string; description: string; color: string; } const COMMANDS: OrbCommand[] = [ { id: 'search', icon: Search, label: 'Neural Search', description: 'Query the global knowledge graph.', color: 'oklch(0.7 0.25 280)' }, { id: 'deploy', icon: Zap, label: 'Instant Deploy', description: 'Push to edge in 2026 ms.', color: 'oklch(0.7 0.2 180)' }, { id: 'compute', icon: Cpu, label: 'Auto-Scaling', description: 'Optimize workload distribution.', color: 'oklch(0.65 0.22 300)' }, { id: 'global', icon: Globe, label: 'Network Map', description: 'Visualize real-time traffic.', color: 'oklch(0.75 0.15 150)' }, { id: 'layers', icon: Layers, label: 'Architecture', description: 'Manage stack components.', color: 'oklch(0.6 0.2 40)' }, { id: 'settings', icon: Settings, label: 'System Prefs', description: 'Fine-tune your environment.', color: 'oklch(0.5 0.02 260)' }, ]; // --- Sub-components --- const ParticleSystem = ({ active }: { active: boolean }) => { const [particles, setParticles] = useState<{ id: number; x: number; y: number }[]>([]); useEffect(() => { if (!active) return; const interval = setInterval(() => { setParticles(prev => [...prev.slice(-15), { id: Date.now(), x: Math.random() * 100, y: Math.random() * 100 }]); }, 100); return () => clearInterval(interval); }, [active]); return (

{particles.map(p => ( ))}

); }; const MagneticOrb = ({ command, mousePos }: { command: OrbCommand; mousePos: { x: number; y: number } }) => { const ref = useRef(null); const [isHovered, setIsHovered] = useState(false); const springConfig = { damping: 20, stiffness: 150 }; const x = useSpring(0, springConfig); const y = useSpring(0, springConfig); useEffect(() => { if (!ref.current) return; const rect = ref.current.getBoundingClientRect(); const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; const dist = Math.hypot(mousePos.x - centerX, mousePos.y - centerY); const threshold = 180; if (dist < threshold) { const power = (threshold - dist) / threshold; x.set((mousePos.x - centerX) * power * 0.4); y.set((mousePos.y - centerY) * power * 0.4); } else { x.set(0); y.set(0); } }, [mousePos, x, y]); return ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} className="relative group cursor-pointer z-10" > {/* Detailed Preview */} {isHovered && (

{command.label}

{command.description}

Lvl 2026

)} {/* The Orb */} {/* Particle Trail logic could be added here for individual orbs */} {isHovered && } ); }; const Header = () => { const [isOpen, setIsOpen] = useState(false); return (

AETHER

); }; export default function App() { const [mousePos, setMousePos] = useState({ x: 0, y: 0 }); const containerRef = useRef(null); useEffect(() => { const handleMouseMove = (e: MouseEvent) => { setMousePos({ x: e.clientX, y: e.clientY }); }; window.addEventListener('mousemove', handleMouseMove); return () => window.removeEventListener('mousemove', handleMouseMove); }, []); return (

{/* Hero Section */}

Next-Gen Command Interface

ORCHESTRATE THE VOID.

Experience the magnetic proximity interface designed for 2026. Zero latency control orbs with elastic feedback and neural-sync visualizations.

{/* The Magnetic Command Palette Area */}

Magnetic Command Matrix

Hover near the orbs to experience the elastic proximity snapping.

{/* Background Grid */}

{COMMANDS.map((cmd) => ( ))}

Active Proximity

Neural Sync 2026

{/* Feature Grid */}

{[ { title: "Elastic Physics", desc: "Built with spring dynamics that mirror physical mass and momentum.", icon: Sparkles }, { title: "OKLCH Color Space", desc: "Ultra-vibrant luminosities that maintain contrast across themes.", icon: Zap }, { title: "Particle Feedback", desc: "Real-time selection trails that provide instant cognitive confirmation.", icon: Cpu } ].map((f, i) => (

{f.title}

{f.desc}

))}

); }

Magnetic Floating Command Palette