{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-feeding-in",
  "title": "Data Feeding In",
  "description": "An animated data ingestion visualization with flowing SVG paths, pulsing gradient beams, and a staggered table reveal using Framer Motion.",
  "dependencies": [
    "react",
    "motion"
  ],
  "files": [
    {
      "path": "registry/gammaui/data-feeding-in.tsx",
      "content": "\"use client\"\n\nimport React, { useEffect, useRef } from \"react\"\nimport { motion, useAnimation } from \"motion/react\"\n\nconst paths = [\n  \"M0 100H55.022C61.8914 100 68.6451 101.769 74.6324 105.137L120.368 130.863C126.355 134.231 133.109 136 139.978 136H201.5\",\n  \"M0 60H48.2171C59.2463 60 69.7861 64.5539 77.3451 72.5854L117.655 115.415C125.214 123.446 135.754 128 146.783 128H201.5\",\n  \"M0 188H55.022C61.8914 188 68.6451 186.231 74.6324 182.863L120.368 157.137C126.355 153.769 133.109 152 139.978 152H201.5\",\n  \"M0 228H48.2171C59.2463 228 69.7861 223.446 77.3451 215.415L117.655 172.585C125.214 164.554 135.754 160 146.783 160H201.5\",\n  \"M0 287H41.7852C56.4929 287 70.0142 278.929 76.994 265.983L118.49 189.017C125.47 176.071 138.991 168 153.699 168H202\",\n  \"M0 144L201 145\",\n  \"M0 1H41.5946C56.3171 1 69.8495 9.08744 76.823 22.0537L118.177 98.9463C125.15 111.913 138.683 120 153.405 120H201.5\",\n]\n\nexport default function DataFeedingIn() {\n  const svgRef = useRef<SVGSVGElement>(null)\n  const controls = useAnimation()\n\n  useEffect(() => {\n    if (!svgRef.current) return\n\n    controls.start({\n      x1: [\"-50%\", \"100%\"],\n      x2: [\"50%\", \"150%\"],\n      transition: {\n        duration: 1.5,\n        ease: \"linear\",\n        repeat: Infinity,\n        delay: 0.25,\n      },\n    })\n  }, [controls])\n\n  return (\n    <div className=\"mt-[120px] flex flex-col items-center justify-center\">\n      <div\n        className=\"h-20 origin-right text-black dark:text-white\"\n        style={{ transform: \"rotate(90deg) translateX(40px) translateY(0)\" }}\n      >\n        <svg\n          width=\"202\"\n          className=\"ml-auto\"\n          viewBox=\"0 0 202 288\"\n          fill=\"none\"\n          ref={svgRef}\n        >\n          {paths.map((d, index) => (\n            <React.Fragment key={index}>\n              <path\n                d={d}\n                stroke=\"currentColor\"\n                mask=\"url(#mask)\"\n                strokeLinecap=\"round\"\n                strokeOpacity=\"0.2\"\n                strokeWidth=\"2\"\n                strokeDasharray=\"0.1 3\"\n              />\n              <path\n                d={d}\n                stroke={`url(#pulse-${index})`}\n                strokeLinecap=\"round\"\n                strokeOpacity=\"1\"\n                strokeWidth=\"2\"\n                strokeDasharray=\"0.1 3\"\n                mask=\"url(#mask)\"\n              />\n            </React.Fragment>\n          ))}\n          <defs>\n            <linearGradient\n              id=\"maskGrad\"\n              x1=\"202\"\n              y1=\"227\"\n              x2=\"32\"\n              y2=\"227\"\n              gradientUnits=\"userSpaceOnUse\"\n            >\n              <stop stopColor=\"white\" />\n              <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n            </linearGradient>\n            <mask id=\"mask\" maskUnits=\"userSpaceOnUse\">\n              <rect width=\"202\" height=\"288\" fill=\"url(#maskGrad)\" />\n            </mask>\n            {Array.from({ length: 7 }).map((_, index) => (\n              <motion.linearGradient\n                key={index}\n                id={`pulse-${index}`}\n                x1=\"-100%\"\n                y1=\"0\"\n                x2=\"0\"\n                y2=\"0\"\n                gradientUnits=\"userSpaceOnUse\"\n                animate={controls}\n              >\n                <stop offset=\"0.35\" stopColor=\"#00bcff\" stopOpacity=\"0\" />\n                <stop offset=\"0.45\" stopColor=\"#00bcff\" />\n                <stop offset=\"0.55\" stopColor=\"#00bcff\" />\n                <stop offset=\"0.65\" stopColor=\"#00bcff\" stopOpacity=\"0\" />\n              </motion.linearGradient>\n            ))}\n          </defs>\n        </svg>\n      </div>\n\n      <div className=\"h-[260px] w-[400px] overflow-hidden rounded-[14px] bg-[linear-gradient(rgba(0,0,0,0.05)_0%,rgba(0,0,0,0)_100%)] dark:bg-[linear-gradient(rgba(255,255,255,0.05)_0%,rgba(255,255,255,0)_100%)]\">\n        <div className=\"flex gap-2 border-b border-black/7.5 p-2.5 dark:border-white/7.5\">\n          {Array.from({ length: 3 }).map((_, i) => (\n            <div\n              key={i}\n              className=\"h-2 w-2 rounded-full bg-black/10 dark:bg-white/10\"\n            />\n          ))}\n        </div>\n        <div>\n          <div className=\"flex w-full overflow-hidden\">\n            {Array.from({ length: 3 }, (_, index) => (\n              <div\n                key={index}\n                className=\"flex h-10 w-[180px] shrink-0 items-center gap-2 border-r border-b border-black/7.5 px-2 dark:border-white/7.5\"\n              >\n                <div className=\"h-4 w-4 rounded border-2 border-black/7.5 bg-black/15 dark:border-white/7.5 dark:bg-white/15\" />\n                <div className=\"h-2 w-[88px] rounded bg-black/7.5 dark:bg-white/7.5\" />\n              </div>\n            ))}\n          </div>\n          {Array.from({ length: 6 }, (_, i) => (\n            <motion.div\n              key={i}\n              className=\"flex w-full overflow-hidden\"\n              initial={{ y: 20, opacity: 0 }}\n              animate={{ y: 0, opacity: 1 }}\n              transition={{\n                ease: \"easeIn\",\n                delay: 1.25 + i * 1.5,\n                duration: 0.3,\n              }}\n            >\n              {Array.from({ length: 3 }, (_, j) => (\n                <div\n                  key={j}\n                  className=\"flex h-9 w-[180px] shrink-0 items-center gap-2 border-r border-b border-black/7.5 px-2 dark:border-white/7.5\"\n                >\n                  <div className=\"h-2 w-[88px] rounded bg-black/7.5 dark:bg-white/7.5\" />\n                </div>\n              ))}\n            </motion.div>\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}