Animated React form components
File drop
A drag and drop uploader. The border marches as files hover, drops ripple in, uploads run on sliders and glow green when done, and deleting a file breaks it in half.
Forms, drag, Motion + GSAP
Install
npm i clsx gsap motion tailwind-merge && curl -o components/file-drop.tsx https://motion-brew.com/r/file-drop.tsxOne self contained file for React and Tailwind CSS: file-drop.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { FileDrop } from "@/components/file-drop";
// Report progress from 0 to 1; the slider follows it.
const upload = (file: File, progress: (p: number) => void) =>
new Promise<void>((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.upload.onprogress = (e) => progress(e.loaded / e.total);
xhr.onload = () => resolve();
xhr.onerror = reject;
xhr.open("POST", "/api/upload");
xhr.send(file);
});
export default function Settings() {
return <FileDrop upload={upload} />;
}
A ref gives `add(files)`, to add files picked or dragged from somewhere else.Props
| Prop | Type | Default | Description |
|---|---|---|---|
| accept | string[] | PNG, JPEG, GIF | Accepted MIME types |
| maxSize | number | 10 MB | Largest file in bytes |
| upload | (file, progress: (p: number) => void) => Promise | a simulated upload | Your upload, reporting 0 to 1 |
| onUploaded | (file: File) => void | Called as each file finishes | |
| className | string | Placement |
More forms
- Voice prompt: An AI composer you can talk to.
- Amount slider: Drag the grip thumb and the amount rolls like an odometer while the monthly payment works itself out.
- AI prompt input: A composer for an AI assistant: a growing field with rolling placeholders, file chips, a model picker, web search, voice with a rippling particle ring, and a send that launches into a shimmering working state.
- Payment form: Card details with a focus ring that glides between fields, floating labels, card network logos and a lock that snaps shut, ending on a sealed confirmation.