{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "drag-and-drop-flow",
  "title": "Drag and Drop Flow",
  "description": "Simulated file drag into a dropzone followed by upload progress.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/drag-and-drop-flow/index.tsx",
      "content": "\"use client\";\n\nimport {\n  Easing,\n  interpolate,\n  interpolateColors,\n  useCurrentFrame,\n  useVideoConfig,\n} from \"remotion\";\n\nexport interface DragAndDropFlowProps {\n  accent?: string;\n  dropzoneLabel?: string;\n  fileName?: string;\n  background?: string;\n  speed?: number;\n  className?: string;\n}\n\nfunction FileIcon({ color }: { color: string }) {\n  return (\n    <svg width=\"44\" height=\"56\" viewBox=\"0 0 44 56\" fill=\"none\">\n      <path\n        d=\"M6 4a4 4 0 014-4h18l12 12v40a4 4 0 01-4 4H10a4 4 0 01-4-4V4z\"\n        fill=\"white\"\n        stroke={color}\n        strokeWidth=\"2\"\n      />\n      <path\n        d=\"M28 0v8a4 4 0 004 4h8\"\n        stroke={color}\n        strokeWidth=\"2\"\n        fill=\"none\"\n      />\n      <rect\n        x=\"12\"\n        y=\"22\"\n        width=\"20\"\n        height=\"2\"\n        rx=\"1\"\n        fill={color}\n        opacity=\"0.5\"\n      />\n      <rect\n        x=\"12\"\n        y=\"28\"\n        width=\"16\"\n        height=\"2\"\n        rx=\"1\"\n        fill={color}\n        opacity=\"0.5\"\n      />\n      <rect\n        x=\"12\"\n        y=\"34\"\n        width=\"18\"\n        height=\"2\"\n        rx=\"1\"\n        fill={color}\n        opacity=\"0.5\"\n      />\n    </svg>\n  );\n}\n\nexport function DragAndDropFlow({\n  accent = \"#0ea5e9\",\n  dropzoneLabel = \"Drop file to upload\",\n  fileName = \"design.fig\",\n  background = \"#fafafa\",\n  speed = 1,\n  className,\n}: DragAndDropFlowProps) {\n  const frame = useCurrentFrame() * speed;\n  const { durationInFrames } = useVideoConfig();\n\n  // Phase split\n  const dragEnd = Math.round(durationInFrames * 0.45);\n  const highlightEnd = Math.round(durationInFrames * 0.55);\n  const progressEnd = durationInFrames;\n\n  // Phase 1: file moves from start to center of dropzone\n  const dragProgress = interpolate(frame, [0, dragEnd], [0, 1], {\n    extrapolateRight: \"clamp\",\n    easing: Easing.out(Easing.cubic),\n  });\n\n  const startX = -220;\n  const startY = -120;\n  const fileX = interpolate(dragProgress, [0, 1], [startX, 0]);\n  const fileY = interpolate(dragProgress, [0, 1], [startY, 0]);\n\n  // Phase 2: dropzone border highlights as file approaches\n  const borderColor = interpolateColors(\n    frame,\n    [dragEnd - 10, highlightEnd],\n    [\"#d4d4d8\", accent],\n  );\n\n  // Phase 3: file fades, progress bar grows\n  const fileOpacity = interpolate(\n    frame,\n    [highlightEnd - 4, highlightEnd + 8],\n    [1, 0],\n    { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" },\n  );\n\n  const progressOpacity = interpolate(\n    frame,\n    [highlightEnd, highlightEnd + 6],\n    [0, 1],\n    { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" },\n  );\n\n  const progress = interpolate(\n    frame,\n    [highlightEnd, progressEnd - 4],\n    [0, 100],\n    { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" },\n  );\n\n  const dropzoneWidth = 420;\n  const dropzoneHeight = 260;\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          width: dropzoneWidth,\n          height: dropzoneHeight,\n          borderRadius: 18,\n          border: `2.5px dashed ${borderColor}`,\n          background: \"white\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          flexDirection: \"column\",\n          gap: 14,\n          color: \"#71717a\",\n          fontSize: 16,\n          fontWeight: 500,\n          transition: \"none\",\n        }}\n      >\n        <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path\n            d=\"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12\"\n            stroke={borderColor}\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n        <span>{dropzoneLabel}</span>\n\n        {/* Progress bar (after drop) */}\n        <div\n          style={{\n            position: \"absolute\",\n            left: 32,\n            right: 32,\n            bottom: 32,\n            opacity: progressOpacity,\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: 8,\n          }}\n        >\n          <div\n            style={{\n              display: \"flex\",\n              justifyContent: \"space-between\",\n              fontSize: 13,\n              color: \"#52525b\",\n            }}\n          >\n            <span>{fileName}</span>\n            <span>{Math.round(progress)}%</span>\n          </div>\n          <div\n            style={{\n              height: 6,\n              borderRadius: 999,\n              background: \"#e4e4e7\",\n              overflow: \"hidden\",\n            }}\n          >\n            <div\n              style={{\n                width: `${progress}%`,\n                height: \"100%\",\n                background: accent,\n                borderRadius: 999,\n              }}\n            />\n          </div>\n        </div>\n      </div>\n\n      {/* Animated file icon that moves into the dropzone */}\n      <div\n        style={{\n          position: \"absolute\",\n          left: \"50%\",\n          top: \"50%\",\n          marginLeft: -22,\n          marginTop: -28,\n          transform: `translate(${fileX}px, ${fileY}px)`,\n          opacity: fileOpacity,\n          filter: \"drop-shadow(0 8px 16px rgba(0,0,0,0.15))\",\n        }}\n      >\n        <FileIcon color={accent} />\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/drag-and-drop-flow.tsx"
    }
  ],
  "type": "registry:component"
}