Multi File Drop

A fan of files flies into a prompt box, deals into slots, finishes uploading, then the cursor presses send.

Installation

$ pnpm dlx shadcn@latest add @remocn/multi-file-drop

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { MultiFileDrop } from "@/components/remocn/multi-file-drop";
 
const MultiFileDropScene = () => (
  <MultiFileDrop
    heading="What are we launching?"
    prompt="Build a launch page with a hero video and a pricing table."
    files={[{ name: "brief.pdf", kind: "doc", size: "412 KB" }, { name: "hero.jpg", kind: "image", src: "/hero.jpg" }]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="MultiFileDrop"
    component={MultiFileDropScene}
    durationInFrames={144}
    fps={30}
    width={1280}
    height={720}
  />
);

A heading and prompt card appear, then a fan of up to four files flies in, drops into the card and deals into slots. Each file shows a progress ring that resolves into a thumbnail, and the cursor presses send. Pass your own heading, prompt and files; it ships light and dark through theme. The default image file uses a staticFile that only exists in the Remocn repo, so give your own image through files[].src.

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

Props8

Prop	Type	Default
theme	"dark" \| "light""dark" Color scheme. Ships light and dark.
accent	string"#3B5BFD" Accent color for the drop zone and progress rings.
heading	string"What are we launching?" Headline shown above the card.
prompt	string"Build a launch page for v2 with a hero video, a pricing table and a waitlist." Prompt text shown in the card.
files	{ name: string; kind: 'image' \| 'sketch' \| 'doc' \| 'sheet'; src?: string; size?: string }[]DEFAULT_FILES Up to four files to drop in. Image files take an optional src.
resolveOrder	number[][0, 2, 1, 3] Order in which files finish uploading, as file indexes.
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 and progress rings.
Default"#3B5BFD"
headingstring
Headline shown above the card.
Default"What are we launching?"
promptstring
Prompt text shown in the card.
Default"Build a launch page for v2 with a hero video, a pricing table and a waitlist."
files{ name: string; kind: 'image' | 'sketch' | 'doc' | 'sheet'; src?: string; size?: string }[]
Up to four files to drop in. Image files take an optional src.
DefaultDEFAULT_FILES
resolveOrdernumber[]
Order in which files finish uploading, as file indexes.
Default[0, 2, 1, 3]
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.