Drag and Drop Flow

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { CSSProperties } from "react";
5 
6const FileIcon = ({ color }: { color: string }) => (
7  <svg width="44" height="56" viewBox="0 0 44 56" fill="none">
8    <path
9      d="M6 4a4 4 0 014-4h18l12 12v40a4 4 0 01-4 4H10a4 4 0 01-4-4V4z"
10      fill="white"
11      stroke={color}
12      strokeWidth="2"
13    />
14    <path
15      d="M28 0v8a4 4 0 004 4h8"
16      stroke={color}
17      strokeWidth="2"
18      fill="none"
19    />
20    <rect
21      x="12"
22      y="22"
23      width="20"
24      height="2"
25      rx="1"
26      fill={color}
27      opacity="0.5"
28    />
29    <rect
30      x="12"
31      y="28"
32      width="16"
33      height="2"
34      rx="1"
35      fill={color}
36      opacity="0.5"
37    />
38    <rect
39      x="12"
40      y="34"
41      width="18"
42      height="2"
43      rx="1"
44      fill={color}
45      opacity="0.5"
46    />
47  </svg>
48);
49 
50export interface DragAndDropFlowProps {
51  accent?: string;
52  dropzoneLabel?: string;
53  fileName?: string;
54  background?: string;
55  speed?: number;
56  fps?: number;
57  durationInFrames?: number;
58  width?: number;
59  height?: number;
60  className?: string;
61}
62 
63export const DragAndDropFlow = ({
64  accent = "#0ea5e9",
65  dropzoneLabel = "Drop file to upload",
66  fileName = "design.fig",
67  background = "#fafafa",
68  speed = 1,
69  fps = 30,
70  durationInFrames = 150,
71  width = 1280,
72  height = 720,
73  className,
74}: DragAndDropFlowProps) => {
75  const safeSpeed = Math.max(0.01, speed);
76  const durationMs = (durationInFrames / fps) * 1000;
77  const frameMs = 1000 / fps;
78 
79  const dragEndMs = (durationInFrames * 0.45 * frameMs) / safeSpeed;
80  const highlightEndMs = (durationInFrames * 0.55 * frameMs) / safeSpeed;
81  const progressEndMs = (durationInFrames * frameMs) / safeSpeed;
82 
83  const containerStyle: CSSProperties = {
84    alignItems: "center",
85    background,
86    display: "flex",
87    fontFamily:
88      "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif",
89    height,
90    justifyContent: "center",
91    overflow: "hidden",
92    position: "relative",
93    width,
94  };
95 
96  const dropzoneWidth = 420;
97  const dropzoneHeight = 260;
98 
99  return (
100    <Timegroup
101      className={className}
102      duration={`${durationMs}ms`}
103      mode="fixed"
104      style={containerStyle}
105    >
106      <>
107        <style>{`
108          @keyframes framecn-drag-file {
109            from { transform: translate(-220px, -120px); opacity: 0; }
110            to { transform: translate(0, 0); opacity: 1; }
111          }
112// … truncated