{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"pipeline-beam","type":"registry:component","title":"Pipeline Beam","description":"Origem → filtro → destino com barras que preenchem e taxa de transferência.","author":"UI Catalog <https://ui.codehall.io>","dependencies":["motion"],"registryDependencies":[],"files":[{"path":"components/illustrations/pipeline-beam.tsx","type":"registry:component","content":"'use client'\n\nimport { motion } from 'motion/react'\nimport { ArrowRight, Database, Filter, HardDriveDownload } from 'lucide-react'\n\n// \"Pipeline Beam\": origem → filtro → destino com barras que preenchem e taxa de transferência.\nconst STAGES = [\n  { label: 'Origem', sub: 'postgres · 2,4 GB', Icon: Database },\n  { label: 'Filtro', sub: 'dedupe + validação', Icon: Filter },\n  { label: 'Destino', sub: 'warehouse', Icon: HardDriveDownload },\n]\n\nexport default function PipelineBeam() {\n  return (\n    <div className=\"w-full max-w-2xl text-foreground\">\n      <div className=\"grid grid-cols-[1fr_auto_1fr_auto_1fr] items-center gap-2\">\n        {STAGES.map((s, i) => (\n          <div key={s.label} className=\"contents\">\n            <motion.div\n              initial={{ opacity: 0, y: 8 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ delay: i * 0.15 }}\n              className=\"rounded-xl border bg-card p-3\"\n            >\n              <div className=\"flex items-center gap-2\">\n                <span className=\"flex size-7 items-center justify-center rounded-md bg-muted\">\n                  <s.Icon className=\"size-4\" />\n                </span>\n                <div>\n                  <div className=\"text-sm font-medium leading-tight\">{s.label}</div>\n                  <div className=\"text-[11px] text-muted-foreground\">{s.sub}</div>\n                </div>\n              </div>\n              <div className=\"mt-3 h-1.5 overflow-hidden rounded-full bg-muted\">\n                <motion.div\n                  className=\"h-full rounded-full bg-primary\"\n                  initial={{ width: '0%' }}\n                  animate={{ width: ['0%', '100%', '100%', '0%'] }}\n                  transition={{ duration: 4, times: [0, 0.6, 0.85, 1], repeat: Infinity, delay: i * 0.5, ease: 'easeInOut' }}\n                />\n              </div>\n            </motion.div>\n            {i < STAGES.length - 1 && (\n              <div className=\"relative flex w-10 flex-col items-center\">\n                <svg viewBox=\"0 0 40 24\" className=\"h-6 w-10 overflow-visible\">\n                  <path d=\"M 0 12 H 40\" stroke=\"var(--border)\" strokeWidth=\"1.5\" />\n                  <motion.path\n                    d=\"M 0 12 H 40\"\n                    stroke=\"var(--primary)\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    initial={{ pathLength: 0.4, pathSpacing: 1, pathOffset: 0 }}\n                    animate={{ pathLength: 0.4, pathSpacing: 1, pathOffset: 1 }}\n                    transition={{ duration: 1.2, repeat: Infinity, ease: 'linear', delay: i * 0.3 }}\n                  />\n                </svg>\n                <ArrowRight className=\"absolute -right-1 top-1 size-3.5 text-muted-foreground\" />\n                <motion.span\n                  className=\"mt-1 font-mono text-[10px] text-muted-foreground\"\n                  animate={{ opacity: [0.4, 1, 0.4] }}\n                  transition={{ duration: 1.6, repeat: Infinity }}\n                >\n                  {i === 0 ? '48 MB/s' : '31 MB/s'}\n                </motion.span>\n              </div>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n"}]}