Drop Upload

A file card drops into a zone, becomes an upload row, fills a progress bar and ends on a check.

Installation

$ pnpm dlx shadcn@latest add @remocn/drop-upload

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { DropUpload } from "@/components/remocn/drop-upload";
 
const DropUploadScene = () => (
  <DropUpload
    title="Drop in your launch notes"
    fileName="launch-notes.md"
    fileKind="MD"
    fileSize="2.4 MB"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="DropUpload"
    component={DropUploadScene}
    durationInFrames={162}
    fps={30}
    width={1280}
    height={720}
  />
);

A drop zone appears with a title and hint, a file card flies in and drops, then collapses into an upload row. A progress bar fills and the row ends on a check mark. Pass your own title, fileName, fileKind, fileSize and hint; the history rows only show in portrait. It ships light and dark through theme.

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

Props10

Prop	Type	Default
theme	"dark" \| "light""dark" Color scheme. Ships light and dark.
accent	string"#3B5BFD" Accent color for the drop zone, progress and check.
title	string"Drop in your launch notes" Heading above the drop zone.
fileName	string"launch-notes.md" Name of the dropped file.
fileKind	string"MD" File type badge, such as MD or PDF.
fileSize	string"2.4 MB" File size text.
hint	string"MD, PDF or ZIP · up to 50 MB" Helper text inside the drop zone.
history	{ name: string; kind: string; size: string; ago: string }[]— Earlier uploads listed below. Shown in portrait only.
ground	GshPresetId— Shader preset id for the animated background.
groundParams	Partial<GradientParams>— Partial shader parameters that override the ground preset.

theme"dark" | "light"
Color scheme. Ships light and dark.
Default"dark"
accentstring
Accent color for the drop zone, progress and check.
Default"#3B5BFD"
titlestring
Heading above the drop zone.
Default"Drop in your launch notes"
fileNamestring
Name of the dropped file.
Default"launch-notes.md"
fileKindstring
File type badge, such as MD or PDF.
Default"MD"
fileSizestring
File size text.
Default"2.4 MB"
hintstring
Helper text inside the drop zone.
Default"MD, PDF or ZIP · up to 50 MB"
history{ name: string; kind: string; size: string; ago: string }[]
Earlier uploads listed below. Shown in portrait only.
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.