{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "header-5",
  "description": "High-fidelity Neural Glass header with centered floating design, backdrop blur, and spring-animated navigation.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/blocks/header/5/header.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion } from \"motion/react\";\nimport React, { useState } from \"react\";\nimport { Logo } from \"@/components/logo\";\nimport { Button } from \"@/components/ui/button\";\nimport { useScroll } from \"@/hooks/use-scroll\";\nimport { cn } from \"@/lib/utils\";\nimport { Menu, Search, Sparkles, X } from \"lucide-react\";\nimport Link from \"next/link\";\n\n/**\n * HEADER 5: NEURAL GLASS (REFINED)\n * Minimalist, centered floating header with official branding and mobile precision.\n */\nexport function Header5() {\n  const scrolled = useScroll(80);\n  const [isOpen, setIsOpen] = useState(false);\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\n\n  const navLinks = [\n    { name: \"Features\", href: \"#\" },\n    { name: \"Solutions\", href: \"#\" },\n    { name: \"Enterprise\", href: \"#\" },\n    { name: \"Pricing\", href: \"#\" },\n  ];\n\n  return (\n    <header className=\"fixed top-0 z-50 w-full px-6 pt-6\">\n      <motion.div\n        animate={{ \n          y: 0, \n          opacity: 1,\n          width: scrolled ? \"auto\" : \"100%\",\n          padding: scrolled ? \"0.4rem 0.4rem 0.4rem 1rem\" : \"0.5rem 1.25rem\"\n        }}\n        initial={{ y: -20, opacity: 0 }}\n        className={cn(\n          \"mx-auto flex h-12 items-center justify-between transition-all duration-500\",\n          \"rounded-full border border-border/40 font-medium shadow-2xl\",\n          scrolled \n            ? \"max-w-md bg-background/80 backdrop-blur-3xl ring-1 ring-white/10 dark:bg-zinc-900/80\" \n            : \"max-w-7xl bg-background/30 backdrop-blur-lg\"\n        )}\n      >\n        {/* Logo */}\n        <Link \n          href=\"/\" \n          aria-label=\"Freddy UI Homepage\"\n          className=\"flex items-center gap-2.5\"\n        >\n          <motion.div\n            whileHover={{ scale: 1.05 }}\n            whileTap={{ scale: 0.95 }}\n            transition={{ type: \"spring\", stiffness: 400, damping: 17 }}\n            className=\"flex items-center\"\n          >\n            <Logo className=\"h-4.5 w-auto\" />\n          </motion.div>\n        </Link>\n\n        {/* Center: Navigation (Desktop) */}\n        {!scrolled && (\n          <nav \n            aria-label=\"Main Navigation\"\n            className=\"absolute left-1/2 hidden -translate-x-1/2 items-center gap-0.5 md:flex\"\n          >\n            {navLinks.map((link, i) => (\n              <Link\n                key={link.name}\n                href={link.href}\n                aria-label={`Navigate to ${link.name}`}\n                onMouseEnter={() => setHoveredIndex(i)}\n                onMouseLeave={() => setHoveredIndex(null)}\n                className=\"relative rounded-full px-4 py-1 text-sm font-bold text-muted-foreground transition-colors hover:text-foreground\"\n              >\n                {hoveredIndex === i && (\n                  <motion.div\n                    layoutId=\"nav-pill\"\n                    className=\"absolute inset-0 z-[-1] rounded-full bg-foreground/5 shadow-inner\"\n                    transition={{ type: \"spring\", bounce: 0.2, duration: 0.5 }}\n                  />\n                )}\n                {link.name}\n              </Link>\n            ))}\n          </nav>\n        )}\n\n        {/* Right: Actions */}\n        <div className=\"flex items-center gap-2\">\n          {/* Mobile Menu Toggle */}\n          <button \n            onClick={() => setIsOpen(!isOpen)}\n            aria-label={isOpen ? \"Close Menu\" : \"Open Menu\"}\n            aria-expanded={isOpen}\n            className=\"flex size-8 items-center justify-center rounded-full hover:bg-foreground/5 md:hidden\"\n          >\n            {isOpen ? <X className=\"size-4\" /> : <Menu className=\"size-4\" />}\n          </button>\n\n          <Button\n            size=\"sm\"\n            aria-label=\"Get Early Access to Freddy AI\"\n            className={cn(\n              \"group relative h-8 overflow-hidden rounded-full font-black text-[11px] uppercase tracking-wider transition-all duration-500\",\n              scrolled ? \"px-5\" : \"px-6\"\n            )}\n          >\n            <div className=\"relative z-10 flex items-center gap-2\">\n              <Sparkles className=\"size-3 fill-current transition-transform group-hover:rotate-12\" />\n              <span>{scrolled ? \"Join\" : \"Get Early Access\"}</span>\n            </div>\n            {/* Neural Pulse Overlay */}\n            <div className=\"absolute inset-x-0 bottom-0 h-1/2 bg-linear-to-t from-white/20 to-transparent transition-opacity group-hover:opacity-100\" />\n            <div className=\"absolute -inset-1 opacity-0 transition-opacity group-hover:animate-pulse group-hover:opacity-100\" />\n          </Button>\n        </div>\n      </motion.div>\n\n      {/* 4. Mobile Dropdown Menu (Pill Style) */}\n      <AnimatePresence>\n        {isOpen && (\n          <motion.div\n            initial={{ opacity: 0, y: -10, scale: 0.95 }}\n            animate={{ opacity: 1, y: 0, scale: 1 }}\n            exit={{ opacity: 0, y: -10, scale: 0.95 }}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label=\"Mobile Navigation Menu\"\n            className=\"absolute top-20 left-6 right-6 z-40 flex flex-col gap-1 rounded-3xl border border-border/40 bg-background/80 p-2 backdrop-blur-3xl shadow-3xl md:hidden\"\n          >\n            {navLinks.map((link) => (\n              <Link \n                key={link.name}\n                href={link.href}\n                aria-label={`Navigate to ${link.name}`}\n                className=\"flex h-11 items-center justify-between rounded-full px-6 text-sm font-bold text-muted-foreground transition-all hover:bg-foreground/5 hover:text-foreground\"\n              >\n                {link.name}\n              </Link>\n            ))}\n          </motion.div>\n        )}\n      </AnimatePresence>\n\n      {/* Scrolled-mode integrated badge */}\n      <AnimatePresence mode=\"wait\">\n        {scrolled && !isOpen && (\n          <motion.div\n            initial={{ opacity: 0, y: -10 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -10 }}\n            className=\"pointer-events-none absolute top-full left-1/2 mt-2 -translate-x-1/2\"\n          >\n            <div className=\"rounded-full border border-border/40 bg-background/60 px-4 py-1 text-[10px] font-black uppercase tracking-[0.2em] text-muted-foreground backdrop-blur-md shadow-sm\">\n              Neural Protocol v2.5\n            </div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </header>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "hooks/use-scroll.ts",
      "content": "\"use client\";\nimport React from \"react\";\n\nexport function useScroll(threshold: number) {\n  const [scrolled, setScrolled] = React.useState(false);\n\n  const onScroll = React.useCallback(() => {\n    setScrolled(window.scrollY > threshold);\n  }, [threshold]);\n\n  React.useEffect(() => {\n    window.addEventListener(\"scroll\", onScroll);\n    return () => window.removeEventListener(\"scroll\", onScroll);\n  }, [onScroll]);\n\n  // also check on first load\n  React.useEffect(() => {\n    onScroll();\n  }, [onScroll]);\n\n  return scrolled;\n}\n",
      "type": "registry:hook"
    }
  ],
  "meta": {
    "height": "400px",
    "isPinned": true,
    "createdAt": "2026-04-02"
  },
  "categories": [
    "header"
  ],
  "type": "registry:block"
}