"use client"; import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Fingerprint, Menu, X, Compass, Layers, Zap, ArrowRight, Sparkles } from "lucide-react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } // ============================================================================ // 1. DATA STRUCTURE // ============================================================================ const NAV_LINKS = [ { id: "discover", label: "Discover", icon: Compass }, { id: "features", label: "Features", icon: Layers }, { id: "performance", label: "Performance", icon: Zap }, ]; // ============================================================================ // 2. MAIN COMPONENT // ============================================================================ export function DynamicCapsuleNavbar() { const [isExpanded, setIsExpanded] = useState(false); const [activeLink, setActiveLink] = useState(NAV_LINKS[0].id); // Close menu on resize to desktop to prevent state bugs useEffect(() => { const handleResize = () => { if (window.innerWidth > 768) setIsExpanded(false); }; window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); return (

{/* The core layout container. Uses Framer Motion 'layout' to automatically animate width and height changes. */} {/* --- HEADER ROW (Always Visible) --- */} {/* Brand */} Aura {/* Desktop Links */}

{NAV_LINKS.map((link) => { const isActive = activeLink === link.id; return ( ); })}

{/* Right Actions */}

{/* Mobile Toggle */}

{/* --- MOBILE EXPANDED CONTENT --- */} {isExpanded && (

{NAV_LINKS.map((link) => ( ))}

)}

); } // ============================================================================ // 3. DEMO / VISUALIZER WRAPPER // ============================================================================ export default function DynamicCapsuleNavbarDemo() { return (

{/* Decorative gradient blur */}

{/* Mock Content */}

Morphing Architecture

The Dynamic
Capsule.

On desktop, it's a sleek floating pill with layout animations. Resize the viewer to mobile and click the menu: the entire pill physically morphs into a full interactive drawer.

); }

The Dynamic Capsule.

The Dynamic
Capsule.