{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "lamp",
  "title": "Lamp",
  "description": "A conic-gradient lamp that ignites and reveals a headline as it scrolls into view.",
  "dependencies": ["framer-motion"],
  "registryDependencies": ["@godui/godui-theme"],
  "files": [
    {
      "path": "packages/components/src/lamp/lamp.tsx",
      "content": "\"use client\";\n\nimport { motion, useReducedMotion } from \"framer-motion\";\nimport * as React from \"react\";\n\nexport type LampProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Accent color of the light. Accepts any CSS color. */\n  color?: string;\n};\n\nconst VIEWPORT = { once: true, margin: \"-20%\" } as const;\n\nconst Lamp = React.forwardRef<HTMLDivElement, LampProps>(\n  ({ color = \"var(--primary)\", className, children, style, ...props }, ref) => {\n    const reduceMotion = useReducedMotion();\n    const lit = { scaleX: 1, opacity: 1 };\n    const unlit = { scaleX: 0.5, opacity: 0 };\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"lamp\"\n        className={`relative isolate flex min-h-[24rem] w-full flex-col items-center justify-start overflow-hidden rounded-2xl bg-card ${className ?? \"\"}`}\n        style={{ [\"--lamp\" as string]: color, ...style }}\n        {...props}\n      >\n        <div className=\"relative flex h-56 w-full scale-y-125 items-center justify-center\">\n          {/* Right cone of the lamp, mirrored from the left. */}\n          <motion.div\n            initial={reduceMotion ? lit : unlit}\n            whileInView={lit}\n            viewport={VIEWPORT}\n            transition={{ duration: 0.8, ease: \"easeInOut\" }}\n            className=\"absolute right-1/2 h-56 w-3/5 origin-right [background-image:conic-gradient(from_70deg_at_center_top,color-mix(in_oklch,var(--lamp)_60%,transparent),transparent,transparent)] [mask-image:linear-gradient(to_top,transparent,white)]\"\n          />\n          <motion.div\n            initial={reduceMotion ? lit : unlit}\n            whileInView={lit}\n            viewport={VIEWPORT}\n            transition={{ duration: 0.8, ease: \"easeInOut\" }}\n            className=\"absolute left-1/2 h-56 w-3/5 origin-left [background-image:conic-gradient(from_290deg_at_center_top,transparent,transparent,color-mix(in_oklch,var(--lamp)_60%,transparent))] [mask-image:linear-gradient(to_top,transparent,white)]\"\n          />\n          {/* Glowing bar where the two cones meet. */}\n          <motion.div\n            initial={\n              reduceMotion\n                ? { scaleX: 1, opacity: 1 }\n                : { scaleX: 0.5, opacity: 0 }\n            }\n            whileInView={{ scaleX: 1, opacity: 1 }}\n            viewport={VIEWPORT}\n            transition={{ duration: 0.8, ease: \"easeInOut\" }}\n            className=\"absolute top-1/2 z-raised h-0.5 w-1/2 -translate-y-[3.5rem] rounded-full blur-sm [background:var(--lamp)]\"\n          />\n          <motion.div\n            initial={reduceMotion ? { opacity: 1 } : { opacity: 0 }}\n            whileInView={{ opacity: 1 }}\n            viewport={VIEWPORT}\n            transition={{ duration: 0.8, ease: \"easeInOut\" }}\n            className=\"absolute top-1/2 z-raised h-36 w-full -translate-y-[6rem] [background:radial-gradient(ellipse_at_center_top,color-mix(in_oklch,var(--lamp)_25%,transparent),transparent_60%)]\"\n          />\n        </div>\n\n        {/* Headline rises into the light. */}\n        <motion.div\n          initial={reduceMotion ? { opacity: 1, y: 0 } : { opacity: 0, y: 40 }}\n          whileInView={{ opacity: 1, y: 0 }}\n          viewport={VIEWPORT}\n          transition={{ duration: 0.8, delay: 0.2, ease: \"easeInOut\" }}\n          className=\"relative z-raised -mt-28 flex flex-col items-center px-6 text-center\"\n        >\n          {children}\n        </motion.div>\n      </div>\n    );\n  },\n);\nLamp.displayName = \"Lamp\";\n\nexport { Lamp };\n",
      "type": "registry:ui",
      "target": "components/godui/lamp.tsx"
    }
  ],
  "type": "registry:ui"
}