Drag And Drop Flow

Installation

$ pnpm dlx shadcn@latest add @remocn/drag-and-drop-flow

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { DragAndDropFlow } from "@/components/remocn/drag-and-drop-flow";

const DragAndDropFlowScene = () => (
  <DragAndDropFlow
    accent="#0ea5e9"
    dropzoneLabel="Drop file to upload"
    fileName="design.fig"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="DragAndDropFlow"
    component={DragAndDropFlowScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

With Backdrop

Renders transparent — supply the background via Backdrop:

import { Backdrop } from "@/components/remocn/backdrop";
import { DragAndDropFlow } from "@/components/remocn/drag-and-drop-flow";

<Backdrop fill={{ type: "color", value: "#fafafa" }}>
  <DragAndDropFlow accent="#0ea5e9" dropzoneLabel="Drop file to upload" fileName="design.fig" />
</Backdrop>

Props

Prop	Type	Default	Description
`accent`	`string`	`"#0ea5e9"`	Accent color for the file icon, dropzone highlight, and progress bar
`dropzoneLabel`	`string`	`"Drop file to upload"`	Label rendered inside the dropzone
`fileName`	`string`	`"design.fig"`	File name shown above the progress bar
`className`	`string`	—	Optional className passed to the outer container