{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ai-chat-input",
  "type": "registry:ui",
  "title": "AI Chat Input",
  "description": "Vanishing chat input with rotating placeholders, pixel-scatter submit, and spring-timed interactions.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/ai-chat-input.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface AiChatInputProps {\n  /** Rotating placeholder strings */\n  placeholders?: string[];\n  /** Callback with the submitted value */\n  onSubmit?: (value: string) => void;\n  /** Callback fired on every keystroke */\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  /** Additional CSS classes */\n  className?: string;\n}\n\nexport default function AiChatInput({\n  placeholders = [\n    \"Ask me anything...\",\n    \"Describe what you need built\",\n    \"Summarize this document for me\",\n    \"Write a function that...\",\n    \"Explain how this works\",\n  ],\n  onSubmit,\n  onChange,\n  className,\n}: AiChatInputProps) {\n  const canvasRef = React.useRef<HTMLCanvasElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const newDataRef = React.useRef<\n    Array<{\n      x: number;\n      y: number;\n      r: number;\n      color: string;\n      vx: number;\n      vy: number;\n    }>\n  >([]);\n  const [value, setValue] = React.useState(\"\");\n  const [animating, setAnimating] = React.useState(false);\n  const [placeholderIndex, setPlaceholderIndex] = React.useState(0);\n\n  /* ---- rotating placeholders ---- */\n  React.useEffect(() => {\n    const id = setInterval(() => {\n      setPlaceholderIndex((i) => (i + 1) % placeholders.length);\n    }, 3000);\n    return () => clearInterval(id);\n  }, [placeholders.length]);\n\n  /* ---- canvas setup ---- */\n  const startAnimation = React.useCallback(() => {\n    const cvs = canvasRef.current;\n    const input = inputRef.current;\n    if (!cvs || !input) return;\n\n    cvs.width = 800;\n    cvs.height = 800;\n\n    const ctx = cvs.getContext(\"2d\", { willReadFrequently: true });\n    if (!ctx) return;\n\n    ctx.clearRect(0, 0, 800, 800);\n\n    const style = getComputedStyle(input);\n    const fontSize = parseFloat(style.getPropertyValue(\"font-size\"));\n\n    ctx.font = `${fontSize * 2}px ${style.fontFamily}`;\n    ctx.fillStyle = style.color;\n    ctx.fillText(value, 0, fontSize * 2);\n\n    const imageData = ctx.getImageData(0, 0, 800, 800);\n    const pixelData = imageData.data;\n    const pixels: Array<{\n      x: number;\n      y: number;\n      r: number;\n      color: string;\n      vx: number;\n      vy: number;\n    }> = [];\n\n    for (let y = 0; y < 800; y += 2) {\n      for (let x = 0; x < 800; x++) {\n        const idx = (y * 800 + x) * 4;\n        if (pixelData[idx + 3] > 128) {\n          const r = pixelData[idx];\n          const g = pixelData[idx + 1];\n          const b = pixelData[idx + 2];\n          pixels.push({\n            x: x / 2,\n            y: y / 2,\n            r: 1,\n            color: `rgba(${r}, ${g}, ${b}, ${pixelData[idx + 3] / 255})`,\n            vx: (Math.random() - 0.5) * 1.5,\n            vy: -(1.5 + Math.random() * 1.5),\n          });\n        }\n      }\n    }\n\n    newDataRef.current = pixels;\n    setAnimating(true);\n  }, [value]);\n\n  /* ---- vanish animation loop ---- */\n  React.useEffect(() => {\n    if (!animating) return;\n    const cvs = canvasRef.current;\n    if (!cvs) return;\n    const ctx = cvs.getContext(\"2d\");\n    if (!ctx) return;\n\n    let frame: number;\n\n    const draw = () => {\n      ctx.clearRect(0, 0, cvs.width, cvs.height);\n      const remaining = newDataRef.current;\n      let alive = 0;\n\n      for (let i = remaining.length - 1; i >= 0; i--) {\n        const p = remaining[i];\n        if (p.x < 0 || p.r <= 0.1) continue;\n        alive++;\n        ctx.beginPath();\n        ctx.rect(p.x, p.y, p.r, p.r);\n        ctx.fillStyle = p.color;\n        ctx.strokeStyle = p.color;\n        ctx.stroke();\n\n        p.x += p.vx;\n        p.y += p.vy;\n        p.vy *= 0.985;\n        p.r *= 0.97;\n      }\n\n      if (alive > 0) {\n        frame = requestAnimationFrame(draw);\n      } else {\n        setAnimating(false);\n        setValue(\"\");\n      }\n    };\n\n    frame = requestAnimationFrame(draw);\n    return () => cancelAnimationFrame(frame);\n  }, [animating]);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\" && !animating) {\n      vanishAndSubmit();\n    }\n  };\n\n  const vanishAndSubmit = () => {\n    if (!value.trim()) return;\n    startAnimation();\n    onSubmit?.(value);\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!animating) {\n      setValue(e.target.value);\n      onChange?.(e);\n    }\n  };\n\n  return (\n    <div\n      className={cn(\n        \"relative mx-auto h-12 w-full max-w-xl overflow-hidden rounded-full border border-foreground/[0.08] bg-background transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]\",\n        value && \"border-foreground/15\",\n        className,\n      )}\n    >\n      <canvas\n        ref={canvasRef}\n        className={cn(\n          \"pointer-events-none absolute inset-0 h-full w-full -translate-y-[20%] scale-50 transform object-contain opacity-0 blur-[1px] invert filter transition duration-200 dark:invert-0\",\n          animating && \"opacity-100 duration-500\",\n        )}\n      />\n\n      <input\n        ref={inputRef}\n        type=\"text\"\n        value={value}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"relative z-10 h-full w-full rounded-full border-none bg-transparent pl-4 pr-20 text-sm tracking-[-0.01em] text-foreground focus:outline-none sm:pl-10 sm:text-[15px]\",\n          animating && \"text-transparent\",\n        )}\n      />\n\n      {/* animated placeholder */}\n      <div className=\"pointer-events-none absolute inset-0 flex items-center rounded-full pl-4 sm:pl-10\">\n        <AnimatePresence mode=\"wait\">\n          {!value && (\n            <motion.p\n              key={`ph-${placeholderIndex}`}\n              initial={{ y: 5, opacity: 0 }}\n              animate={{ y: 0, opacity: 0.4 }}\n              exit={{ y: -5, opacity: 0 }}\n              transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}\n              className=\"text-sm text-foreground sm:text-[15px]\"\n            >\n              {placeholders[placeholderIndex]}\n            </motion.p>\n          )}\n        </AnimatePresence>\n      </div>\n\n      {/* submit button */}\n      <button\n        disabled={!value.trim()}\n        onClick={vanishAndSubmit}\n        className={cn(\n          \"absolute right-2 top-1/2 z-20 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full bg-foreground transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]\",\n          value.trim()\n            ? \"scale-100 opacity-100\"\n            : \"scale-[0.85] opacity-[0.06]\",\n        )}\n      >\n        <motion.svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className=\"h-4 w-4 text-background\"\n        >\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n          <motion.path\n            d=\"M5 12l14 0\"\n            initial={{ strokeDasharray: \"50%\", strokeDashoffset: \"50%\" }}\n            animate={{ strokeDashoffset: value ? 0 : \"50%\" }}\n            transition={{ duration: 0.3 }}\n          />\n          <path d=\"M13 18l6 -6\" />\n          <path d=\"M13 6l6 6\" />\n        </motion.svg>\n      </button>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/ai-chat-input.tsx"
    }
  ]
}