Drag And Drop Flow

A micro-interaction composition: a file icon is dragged across the frame into a dashed dropzone. The dropzone border highlights via interpolateColors, the file fades, and a progress bar grows from 0 to 100%.

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}
  />
);

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.
`background`	`string`	`"#fafafa"`	Frame background color.
`className`	`string`	—	Optional className passed to the outer container.

Notes

Three timed phases

The animation splits durationInFrames into a drag phase (~45%), a highlight handoff (~10%), and an upload phase (the remainder). All phases derive from durationInFrames, so resizing the composition stays in sync.

Width is intentional here

The progress bar grows by animating width instead of transform: scaleX so the rounded ends stay crisp at any progress value.