{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-steps",
  "title": "Progress Steps",
  "description": "Multi-step pipeline with sequentially activating nodes and filling lines.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/progress-steps/index.tsx",
      "content": "\"use client\";\n\nimport {\n  interpolate,\n  interpolateColors,\n  spring,\n  useCurrentFrame,\n  useVideoConfig,\n} from \"remotion\";\n\nexport interface ProgressStepsProps {\n  steps?: Array<{ label: string }>;\n  orientation?: \"horizontal\" | \"vertical\";\n  activeColor?: string;\n  inactiveColor?: string;\n  background?: string;\n  textColor?: string;\n  stepDuration?: number;\n  speed?: number;\n  className?: string;\n}\n\nexport function ProgressSteps({\n  steps = [{ label: \"Connect\" }, { label: \"Process\" }, { label: \"Deploy\" }],\n  orientation = \"horizontal\",\n  activeColor = \"#22c55e\",\n  inactiveColor = \"#27272a\",\n  background = \"#0a0a0a\",\n  textColor = \"white\",\n  stepDuration = 30,\n  speed = 1,\n  className,\n}: ProgressStepsProps) {\n  const frame = useCurrentFrame() * speed;\n  const { fps } = useVideoConfig();\n\n  const isHorizontal = orientation === \"horizontal\";\n  const trackLength = isHorizontal ? 920 : 520;\n  const segmentLength = trackLength / Math.max(steps.length - 1, 1);\n  const nodeRadius = 22;\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        background,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        fontFamily:\n          \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\",\n      }}\n    >\n      <div\n        style={{\n          position: \"relative\",\n          display: \"flex\",\n          flexDirection: isHorizontal ? \"row\" : \"column\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          gap: 0,\n        }}\n      >\n        {/* SVG layer for connecting lines */}\n        <svg\n          style={{\n            position: \"absolute\",\n            left: isHorizontal ? nodeRadius : \"50%\",\n            top: isHorizontal ? \"50%\" : nodeRadius,\n            transform: isHorizontal ? \"translateY(-50%)\" : \"translateX(-50%)\",\n            overflow: \"visible\",\n            pointerEvents: \"none\",\n          }}\n          width={isHorizontal ? trackLength : 4}\n          height={isHorizontal ? 4 : trackLength}\n        >\n          {steps.slice(0, -1).map((_, i) => {\n            const lineStart = (i + 1) * stepDuration;\n            const fillProgress = interpolate(\n              frame,\n              [lineStart, lineStart + stepDuration],\n              [segmentLength, 0],\n              { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" },\n            );\n            return (\n              <line\n                key={i}\n                x1={isHorizontal ? i * segmentLength : 2}\n                y1={isHorizontal ? 2 : i * segmentLength}\n                x2={isHorizontal ? (i + 1) * segmentLength : 2}\n                y2={isHorizontal ? 2 : (i + 1) * segmentLength}\n                stroke={activeColor}\n                strokeWidth={4}\n                strokeLinecap=\"round\"\n                strokeDasharray={segmentLength}\n                strokeDashoffset={fillProgress}\n              />\n            );\n          })}\n          {/* Background track */}\n          {steps.slice(0, -1).map((_, i) => (\n            <line\n              key={`bg-${i}`}\n              x1={isHorizontal ? i * segmentLength : 2}\n              y1={isHorizontal ? 2 : i * segmentLength}\n              x2={isHorizontal ? (i + 1) * segmentLength : 2}\n              y2={isHorizontal ? 2 : (i + 1) * segmentLength}\n              stroke={inactiveColor}\n              strokeWidth={4}\n              strokeLinecap=\"round\"\n              style={{ opacity: 0.6 }}\n            />\n          ))}\n        </svg>\n\n        {steps.map((step, i) => {\n          const activateAt = i * stepDuration;\n          const localFrame = frame - activateAt;\n          const popScale = spring({\n            frame: localFrame,\n            fps,\n            config: { damping: 10, stiffness: 180, mass: 0.6 },\n          });\n          const scale = interpolate(popScale, [0, 1], [0.8, 1]);\n          const fill = interpolateColors(\n            frame,\n            [activateAt, activateAt + 8],\n            [inactiveColor, activeColor],\n          );\n          const showCheck = interpolate(\n            frame,\n            [activateAt + 6, activateAt + 14],\n            [0, 1],\n            { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" },\n          );\n\n          return (\n            <div\n              key={i}\n              style={{\n                position: \"relative\",\n                display: \"flex\",\n                flexDirection: isHorizontal ? \"column\" : \"row\",\n                alignItems: \"center\",\n                gap: 14,\n                width: isHorizontal ? segmentLength : \"auto\",\n                height: isHorizontal ? \"auto\" : segmentLength,\n                marginRight:\n                  isHorizontal && i === steps.length - 1 ? 0 : -segmentLength,\n                marginBottom:\n                  !isHorizontal && i === steps.length - 1 ? 0 : -segmentLength,\n                zIndex: 2,\n              }}\n            >\n              <div\n                style={{\n                  width: nodeRadius * 2,\n                  height: nodeRadius * 2,\n                  borderRadius: 999,\n                  background: fill,\n                  border: `2px solid ${activeColor}`,\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"center\",\n                  transform: `scale(${scale})`,\n                  transformOrigin: \"center\",\n                  boxShadow: `0 0 0 6px ${activeColor}1a`,\n                }}\n              >\n                <svg\n                  width=\"20\"\n                  height=\"20\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  style={{ opacity: showCheck }}\n                >\n                  <path\n                    d=\"M5 12.5l4.5 4.5L19 7\"\n                    stroke=\"white\"\n                    strokeWidth=\"3\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                  />\n                </svg>\n              </div>\n              <span\n                style={{\n                  fontSize: 15,\n                  fontWeight: 500,\n                  color: textColor,\n                  letterSpacing: \"-0.01em\",\n                  whiteSpace: \"nowrap\",\n                  position: isHorizontal ? \"absolute\" : \"static\",\n                  top: isHorizontal ? nodeRadius * 2 + 14 : undefined,\n                }}\n              >\n                {step.label}\n              </span>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/progress-steps.tsx"
    }
  ],
  "type": "registry:component"
}