File Dropzone

Files drop into an upload dialog, progress bars fill, and an upload toast confirms the destination.

Installation

$ pnpm dlx shadcn@latest add @remocn/file-dropzone

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { FileDropzone } from "@/components/remocn/file-dropzone";
 
const FileDropzoneScene = () => (
  <FileDropzone
    title="Upload files"
    destination="Research"
    files={[{ name: "Q3-board-deck.pdf", size: 4200000 }, { name: "customers.csv", size: 640000 }]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="FileDropzone"
    component={FileDropzoneScene}
    durationInFrames={195}
    fps={30}
    width={1280}
    height={720}
  />
);

An upload modal opens over an app window; file cards drop into the dropzone, rows appear with progress bars that finish at different times, then Upload is clicked and the files land in the table behind with a confirming toast. Pass files (name, size in bytes, optional type), title and destination. Pass image for the preview of image files; the default image only exists in the Remocn repo. Ships light and dark.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props9

Prop	Type	Default
files	DropFile[]DEFAULT_FILES Up to three files: name, size in bytes, optional type
title	string"Upload files" Modal title
destination	string"Research" Where files go; shown in the window, rows and toast
image	stringstaticFile("reel/reel-2.jpg") Preview for image files; default exists only in the Remocn repo
accent	string"#3B5BFD" Accent color for highlights, buttons and progress
speed	number1 Playback speed multiplier for the whole timeline
theme	"light" \| "dark""light" Light or dark palette
ground	GshPresetId— gradients.sh preset id for the backdrop shader
groundParams	Partial<GradientParams>— Overrides for the backdrop shader parameters

filesDropFile[]
Up to three files: name, size in bytes, optional type
DefaultDEFAULT_FILES
titlestring
Modal title
Default"Upload files"
destinationstring
Where files go; shown in the window, rows and toast
Default"Research"
imagestring
Preview for image files; default exists only in the Remocn repo
DefaultstaticFile("reel/reel-2.jpg")
accentstring
Accent color for highlights, buttons and progress
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline
Default1
theme"light" | "dark"
Light or dark palette
Default"light"
groundGshPresetId
gradients.sh preset id for the backdrop shader
groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters