{
  "name": "lamp",
  "type": "registry:ui",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/lamp.tsx",
      "content": "\"use client\";\nimport React from \"react\";\nimport { motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nexport default function LampDemo() {\n  return (\n    <LampContainer>\n      <motion.h1\n        initial={{ opacity: 0.5, y: 100 }}\n        whileInView={{ opacity: 1, y: 0 }}\n        transition={{\n          delay: 0.3,\n          duration: 0.8,\n          ease: \"easeInOut\",\n        }}\n        className=\"mt-8 bg-gradient-to-br from-slate-300 to-slate-500 py-4 bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl\"\n      >\n        Build lamps <br /> the right way\n      </motion.h1>\n    </LampContainer>\n  );\n}\n\nexport const LampContainer = ({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) => {\n  return (\n    <div\n      className={cn(\n        \"relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-slate-950 w-full rounded-md z-0\",\n        className\n      )}\n    >\n      <div className=\"relative flex w-full flex-1 scale-y-125 items-center justify-center isolate z-0 \">\n        <motion.div\n          initial={{ opacity: 0.5, width: \"15rem\" }}\n          whileInView={{ opacity: 1, width: \"30rem\" }}\n          transition={{\n            delay: 0.3,\n            duration: 0.8,\n            ease: \"easeInOut\",\n          }}\n          style={{\n            backgroundImage: `conic-gradient(var(--conic-position), var(--tw-gradient-stops))`,\n          }}\n          className=\"absolute inset-auto right-1/2 h-56 overflow-visible w-[30rem] bg-gradient-conic from-cyan-500 via-transparent to-transparent text-white [--conic-position:from_70deg_at_center_top]\"\n        >\n          <div className=\"absolute  w-[100%] left-0 bg-slate-950 h-40 bottom-0 z-20 [mask-image:linear-gradient(to_top,white,transparent)]\" />\n          <div className=\"absolute  w-40 h-[100%] left-0 bg-slate-950  bottom-0 z-20 [mask-image:linear-gradient(to_right,white,transparent)]\" />\n        </motion.div>\n        <motion.div\n          initial={{ opacity: 0.5, width: \"15rem\" }}\n          whileInView={{ opacity: 1, width: \"30rem\" }}\n          transition={{\n            delay: 0.3,\n            duration: 0.8,\n            ease: \"easeInOut\",\n          }}\n          style={{\n            backgroundImage: `conic-gradient(var(--conic-position), var(--tw-gradient-stops))`,\n          }}\n          className=\"absolute inset-auto left-1/2 h-56 w-[30rem] bg-gradient-conic from-transparent via-transparent to-cyan-500 text-white [--conic-position:from_290deg_at_center_top]\"\n        >\n          <div className=\"absolute  w-40 h-[100%] right-0 bg-slate-950  bottom-0 z-20 [mask-image:linear-gradient(to_left,white,transparent)]\" />\n          <div className=\"absolute  w-[100%] right-0 bg-slate-950 h-40 bottom-0 z-20 [mask-image:linear-gradient(to_top,white,transparent)]\" />\n        </motion.div>\n        <div className=\"absolute top-1/2 h-48 w-full translate-y-12 scale-x-150 bg-slate-950 blur-2xl\"></div>\n        <div className=\"absolute top-1/2 z-50 h-48 w-full bg-transparent opacity-10 backdrop-blur-md\"></div>\n        <div className=\"absolute inset-auto z-50 h-36 w-[28rem] -translate-y-1/2 rounded-full bg-cyan-500 opacity-50 blur-3xl\"></div>\n        <motion.div\n          initial={{ width: \"8rem\" }}\n          whileInView={{ width: \"16rem\" }}\n          transition={{\n            delay: 0.3,\n            duration: 0.8,\n            ease: \"easeInOut\",\n          }}\n          className=\"absolute inset-auto z-30 h-36 w-64 -translate-y-[6rem] rounded-full bg-cyan-400 blur-2xl\"\n        ></motion.div>\n        <motion.div\n          initial={{ width: \"15rem\" }}\n          whileInView={{ width: \"30rem\" }}\n          transition={{\n            delay: 0.3,\n            duration: 0.8,\n            ease: \"easeInOut\",\n          }}\n          className=\"absolute inset-auto z-50 h-0.5 w-[30rem] -translate-y-[7rem] bg-cyan-400 \"\n        ></motion.div>\n\n        <div className=\"absolute inset-auto z-40 h-44 w-full -translate-y-[12.5rem] bg-slate-950 \"></div>\n      </div>\n\n      <div className=\"relative z-50 flex -translate-y-80 flex-col items-center px-5\">\n        {children}\n      </div>\n    </div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/lamp.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Lamp"
}