Animated DropZone

Auto-looping file upload showcase

What it does A complete drop-zone interaction that animates on its own — no interaction required. A cursor drags three files into the zone one by one, each uploads with a live progress bar, two complete with a green pulse and one fails with a Try-again recovery. The whole sequence loops on a customizable duration. Animations included • Animated cursor with a tilted "ghost file" pill following it • Drag-over state on the drop zone (subtle scale + tint) • Stagger entry of file items (fade + y-slide + scale) • Live progress bars with linear fill • Pop + halo on success, flash glow on completion • Status dot that morphs from grey (uploading) to green (complete) to red (failed) • Inline "Try again" with soft-red treatment on failure • Exit stagger between cycles What's editable • Loop duration (12–40s) • Every text — drop title, subtitle, button label • File names, sizes, types (PDF / PNG / MP4) • Full color palette — surface, foreground, muted, border, success, danger, danger soft, file-type badges • Auto-loop toggle (on/off) Use cases Landing pages, SaaS dashboards, file-upload product demos, onboarding screens, hero sections that need a self-running interaction. Tech Built with Framer Motion, fixed-size component (420×540 by default, both axes resizable). No external dependencies. Cursor and file ghost are pure SVG + DOM, no images required.

Auto-looping file upload showcase