Animated DropZone

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.