drag-drop-flow

1import { loadFont } from "@remotion/google-fonts/Inter";
2import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
3import { CODE_THEMES } from "@/remotion/lib/code-syntax";
4import { getSafeAreaPadding } from "@/remotion/lib/layout";
5import { EASING } from "@/remotion/lib/motion-tokens";
6import { samplePath, waypointsToPath } from "@/remotion/lib/path-utils";
7 
8const { fontFamily } = loadFont("normal", {
9  weights: ["400", "500", "600", "700"],
10  subsets: ["latin"],
11});
12 
13export type DragDropFlowProps = {
14  /** File the cursor picks up and drops. */
15  fileName?: string;
16  /** Size shown once the upload completes. */
17  fileSize?: string;
18  /** Other rows in the source list, for context around the dragged file. */
19  siblings?: string[];
20  /** Heading on the source panel. */
21  sourceLabel?: string;
22  /** Idle prompt inside the drop zone. */
23  label?: string;
24  /** Secondary line under the prompt — accepted formats, limits. */
25  hint?: string;
26  /** Prompt while the file is held over the zone. */
27  activeLabel?: string;
28  /** Label once the upload finishes. */
29  doneLabel?: string;
30  accentColor?: string;
31  backgroundColor?: string;
32  theme?: "dark" | "light";
33  /** Animation speed multiplier. */
34  speed?: number;
35};
36 
37const DEFAULT_SIBLINGS = ["b-roll-rooftop.mov", "interview-cam-b.mp4"];
38 
39/** Beat plan in seconds — every frame number below derives from these. */
40const T = {
41  panel: 0,
42  rows: 0.28,
43  cursorIn: 0.45,
44  reach: 1.0,
45  press: 1.02,
46  liftEnd: 1.22,
47  dragStart: 1.12,
48  dragEnd: 2.12,
49  over: 1.62,
50  release: 2.12,
51  settleEnd: 2.5,
52  uploadStart: 2.42,
53  uploadEnd: 3.68,
54  doneEnd: 4.05,
55} as const;
56 
57const clamp = {
58  extrapolateLeft: "clamp",
59  extrapolateRight: "clamp",
60} as const;
61 
62const FileGlyph: React.FC<{ size: number; color: string }> = ({
63  size,
64  color,
65}) => (
66  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
67    <path
68      d="M13.5 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5L13.5 3Z"
69      stroke={color}
70      strokeWidth={1.6}
71      strokeLinejoin="round"
72    />
73    <path d="M13.3 3.2V8.7h5.5" stroke={color} strokeWidth={1.6} />
74    <path
75      d="m10.4 12.6 4 2.4-4 2.4v-4.8Z"
76      fill={color}
77      stroke={color}
78      strokeWidth={1.4}
79      strokeLinejoin="round"
80    />
81  </svg>
82);
83 
84const UploadGlyph: React.FC<{ size: number; color: string }> = ({
85  size,
86  color,
87}) => (
88  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
89    <path
90// … truncated