Drag Drop Flow
Cursor drags a file out of a media library into a drop zone that arms, catches it, and uploads it.
SceneScenes
drag-drop-flow30fps · 960×540
Install
$ npx remotion-ui@latest add drag-drop-flowThe whole drag beat, not a card sliding into a box. The cursor travels into the media library, presses the file, and carries it across; the row it left holds its place as a dashed ghost; the drop zone arms while the file is held over it; and the release turns into a transfer that fills and completes.
Pass siblings to change the rest of the library, fileName/fileSize for the
file itself, and speed to fit the beat into a fixed sequence.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/drag-drop-flow- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: fileName, fileSize, siblings, sourceLabel, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { DragDropFlow } from "@/remotion/scenes/drag-drop-flow";
<DragDropFlow fileName="hero-loop.tsx" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| fileName | string | "hero-take.mp4" | File the cursor picks up. |
| fileSize | string | "48.2 MB" | Size shown once the upload completes. |
| siblings | string[] | - | Other rows in the source list. |
| sourceLabel | string | "Media library" | Heading on the source panel. |
| label | string | "Drop your clip" | Idle prompt in the drop zone. |
| hint | string | - | Second line under the prompt. |
| activeLabel | string | "Release to upload" | Prompt while the file is held over the zone. |
| doneLabel | string | "Uploaded" | Label once the upload finishes. |
| accentColor | string | "#E8B86D" | Zone, cursor ring, and progress colour. |
| backgroundColor | string | - | Overrides the page background. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |