{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shader-hurricane-demo",
  "title": "Shader Hurricane Demo",
  "description": "Demo showing hurricane shader component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/shader"
  ],
  "files": [
    {
      "path": "registry/demo/blocks/shader-hurricane/index.tsx",
      "content": "'use client';\n\nimport React, { useState, useDeferredValue } from 'react';\nimport { ShaderHurricane } from '@/components/systaliko-ui/blocks/shader';\nimport { Input } from '@/components/systaliko-ui/shadcn/input';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { ChevronDown } from 'lucide-react';\n\nexport function ShaderHurricaneDemo() {\n  const [color1, setColor1] = useState('#00f2fe');\n  const [color2, setColor2] = useState('#4facfe');\n  const [color3, setColor3] = useState('#ffd700');\n  const [background, setBackground] = useState('#0a0a0a');\n  const [intensity, setIntensity] = useState(1);\n  const [density, setDensity] = useState(1);\n  const [speed, setSpeed] = useState(0.2);\n  const [isOpen, setIsOpen] = useState(true);\n\n  const deferredColor1 = useDeferredValue(color1);\n  const deferredColor2 = useDeferredValue(color2);\n  const deferredColor3 = useDeferredValue(color3);\n  const deferredBackground = useDeferredValue(background);\n  const deferredIntensity = useDeferredValue(intensity);\n  const deferredDensity = useDeferredValue(density);\n  const deferredSpeed = useDeferredValue(speed);\n\n  return (\n    <div className=\"relative h-screen w-full overflow-hidden\">\n      <ShaderHurricane\n        className=\"absolute inset-0\"\n        colors={[deferredColor1, deferredColor2, deferredColor3]}\n        background={deferredBackground}\n        intensity={deferredIntensity}\n        density={deferredDensity}\n        speed={deferredSpeed}\n      />\n\n      <div className=\"absolute right-4 top-4 z-10 w-72 rounded-xl border border-border/50 bg-background/50 backdrop-blur-md\">\n        <button\n          onClick={() => setIsOpen(!isOpen)}\n          className=\"flex w-full items-center justify-between p-6 pb-4\"\n        >\n          <h3 className=\"text-lg font-semibold tracking-tight\">\n            Configuration\n          </h3>\n          <motion.div\n            animate={{ rotate: isOpen ? 0 : -90 }}\n            transition={{ duration: 0.2, ease: 'easeInOut' }}\n          >\n            <ChevronDown className=\"h-5 w-5 text-muted-foreground\" />\n          </motion.div>\n        </button>\n\n        <AnimatePresence initial={false}>\n          {isOpen && (\n            <motion.div\n              initial={{ height: 0, opacity: 0 }}\n              animate={{ height: 'auto', opacity: 1 }}\n              exit={{ height: 0, opacity: 0 }}\n              transition={{ duration: 0.3, ease: 'easeInOut' }}\n              className=\"overflow-hidden\"\n            >\n              <div className=\"flex flex-col gap-4 p-6 pt-0\">\n                <div className=\"flex flex-col gap-2\">\n                  <label htmlFor=\"color1\" className=\"text-sm font-medium\">\n                    Color 1\n                  </label>\n                  <div className=\"flex items-center gap-2\">\n                    <input\n                      type=\"color\"\n                      id=\"color1\"\n                      value={color1}\n                      onChange={(e) => setColor1(e.target.value)}\n                      className=\"h-8 w-8 cursor-pointer rounded border-none bg-transparent p-0\"\n                    />\n                    <Input\n                      value={color1}\n                      onChange={(e) => setColor1(e.target.value)}\n                      className=\"h-8 font-mono text-xs\"\n                    />\n                  </div>\n                </div>\n\n                <div className=\"flex flex-col gap-2\">\n                  <label htmlFor=\"color2\" className=\"text-sm font-medium\">\n                    Color 2\n                  </label>\n                  <div className=\"flex items-center gap-2\">\n                    <input\n                      type=\"color\"\n                      id=\"color2\"\n                      value={color2}\n                      onChange={(e) => setColor2(e.target.value)}\n                      className=\"h-8 w-8 cursor-pointer rounded border-none bg-transparent p-0\"\n                    />\n                    <Input\n                      value={color2}\n                      onChange={(e) => setColor2(e.target.value)}\n                      className=\"h-8 font-mono text-xs\"\n                    />\n                  </div>\n                </div>\n\n                <div className=\"flex flex-col gap-2\">\n                  <label htmlFor=\"color3\" className=\"text-sm font-medium\">\n                    Color 3\n                  </label>\n                  <div className=\"flex items-center gap-2\">\n                    <input\n                      type=\"color\"\n                      id=\"color3\"\n                      value={color3}\n                      onChange={(e) => setColor3(e.target.value)}\n                      className=\"h-8 w-8 cursor-pointer rounded border-none bg-transparent p-0\"\n                    />\n                    <Input\n                      value={color3}\n                      onChange={(e) => setColor3(e.target.value)}\n                      className=\"h-8 font-mono text-xs\"\n                    />\n                  </div>\n                </div>\n\n                <div className=\"flex flex-col gap-2\">\n                  <label htmlFor=\"background\" className=\"text-sm font-medium\">\n                    Background\n                  </label>\n                  <div className=\"flex items-center gap-2\">\n                    <input\n                      type=\"color\"\n                      id=\"background\"\n                      value={background}\n                      onChange={(e) => setBackground(e.target.value)}\n                      className=\"h-8 w-8 cursor-pointer rounded border-none bg-transparent p-0\"\n                    />\n                    <Input\n                      value={background}\n                      onChange={(e) => setBackground(e.target.value)}\n                      className=\"h-8 font-mono text-xs\"\n                    />\n                  </div>\n                </div>\n\n                <div className=\"flex flex-col gap-2\">\n                  <label htmlFor=\"intensity\" className=\"text-sm font-medium\">\n                    Intensity\n                  </label>\n                  <Input\n                    id=\"intensity\"\n                    type=\"number\"\n                    step=\"0.1\"\n                    min=\"0\"\n                    max=\"5\"\n                    value={intensity}\n                    onChange={(e) => setIntensity(Number(e.target.value))}\n                    className=\"h-8\"\n                  />\n                </div>\n\n                <div className=\"flex flex-col gap-2\">\n                  <label htmlFor=\"density\" className=\"text-sm font-medium\">\n                    Density\n                  </label>\n                  <Input\n                    id=\"density\"\n                    type=\"number\"\n                    step=\"0.1\"\n                    min=\"0\"\n                    max=\"5\"\n                    value={density}\n                    onChange={(e) => setDensity(Number(e.target.value))}\n                    className=\"h-8\"\n                  />\n                </div>\n\n                <div className=\"flex flex-col gap-2\">\n                  <label htmlFor=\"speed\" className=\"text-sm font-medium\">\n                    Speed\n                  </label>\n                  <Input\n                    id=\"speed\"\n                    type=\"number\"\n                    step=\"0.1\"\n                    min=\"0\"\n                    max=\"5\"\n                    value={speed}\n                    onChange={(e) => setSpeed(Number(e.target.value))}\n                    className=\"h-8\"\n                  />\n                </div>\n              </div>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/demo/shader-hurricane.tsx"
    }
  ],
  "type": "registry:block"
}