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.