{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "lamp",
  "title": "Lamp",
  "description": "A glowing lamp-line header that expands into view.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/velora/lamp.tsx",
      "content": "\"use client\";\n\nimport { motion, useReducedMotion } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface LampProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\n/**\n * A glowing lamp-line header. The light cone expands as it scrolls\n * into view; children render beneath the glow.\n */\nexport function Lamp({ children, className }: LampProps) {\n  const reducedMotion = useReducedMotion();\n\n  return (\n    <div\n      data-slot=\"lamp\"\n      className={cn(\n        \"relative z-0 flex w-full flex-col items-center justify-center overflow-hidden py-24\",\n        className\n      )}\n    >\n      <div className=\"relative isolate z-0 flex w-full flex-1 items-center justify-center\">\n        {/* Light cones */}\n        <motion.div\n          aria-hidden\n          initial={{ opacity: 0.4, width: \"12rem\" }}\n          whileInView={{ opacity: 0.9, width: \"28rem\" }}\n          viewport={{ once: true }}\n          transition={{ duration: reducedMotion ? 0 : 0.8, ease: \"easeInOut\" }}\n          className=\"absolute right-1/2 h-44 [background-image:conic-gradient(from_70deg_at_center_top,var(--brand),transparent,transparent)]\"\n          style={{ opacity: 0.5 }}\n        />\n        <motion.div\n          aria-hidden\n          initial={{ opacity: 0.4, width: \"12rem\" }}\n          whileInView={{ opacity: 0.9, width: \"28rem\" }}\n          viewport={{ once: true }}\n          transition={{ duration: reducedMotion ? 0 : 0.8, ease: \"easeInOut\" }}\n          className=\"absolute left-1/2 h-44 [background-image:conic-gradient(from_290deg_at_center_top,transparent,transparent,var(--brand))]\"\n          style={{ opacity: 0.5 }}\n        />\n        {/* Glow blob */}\n        <div\n          aria-hidden\n          className=\"absolute top-10 z-0 h-36 w-[28rem] -translate-y-1/2 rounded-full opacity-40 blur-3xl\"\n          style={{ background: \"var(--brand)\" }}\n        />\n        {/* Lamp line */}\n        <motion.div\n          aria-hidden\n          initial={{ width: \"8rem\" }}\n          whileInView={{ width: \"20rem\" }}\n          viewport={{ once: true }}\n          transition={{ duration: reducedMotion ? 0 : 0.8, ease: \"easeInOut\" }}\n          className=\"absolute z-30 h-0.5 -translate-y-[4.5rem] rounded-full\"\n          style={{\n            background: \"var(--brand)\",\n            boxShadow: \"0 0 24px 4px color-mix(in oklab, var(--brand) 60%, transparent)\",\n          }}\n        />\n        {/* Mask above the line */}\n        <div\n          aria-hidden\n          className=\"absolute inset-x-0 top-0 z-20 h-[calc(50%-4.5rem)] bg-background\"\n        />\n      </div>\n      <div className=\"relative z-40 -mt-16 flex flex-col items-center px-5 text-center\">\n        {children}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/velora/lamp.tsx"
    }
  ],
  "cssVars": {
    "theme": {
      "color-brand": "var(--brand)",
      "color-brand-from": "var(--brand-from)",
      "color-brand-via": "var(--brand-via)",
      "color-brand-to": "var(--brand-to)"
    },
    "light": {
      "brand": "oklch(0.546 0.245 263)",
      "brand-from": "oklch(0.546 0.245 263)",
      "brand-via": "oklch(0.623 0.214 260)",
      "brand-to": "oklch(0.685 0.169 237)"
    },
    "dark": {
      "brand": "oklch(0.623 0.214 260)",
      "brand-from": "oklch(0.623 0.214 260)",
      "brand-via": "oklch(0.707 0.165 255)",
      "brand-to": "oklch(0.746 0.16 233)"
    }
  },
  "type": "registry:ui"
}