∞ forever components

Product Flows

File Upload Dropzone

Simulated file upload with progress rings and completed rows.

cssmedium complexitysubtle motionmobile-ready

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
1

When to use it

Product illustrations and onboarding.

When not to

Real file uploads: no picker or server upload.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Edit files queue and ramp durations. Light tokens: --pro-bg:#f6f8fa; --pro-surface:#fff; --pro-border:rgba(0,0,0,.08); --pro-text:#1f2328; --pro-muted:#59636e; retain accent, update catalog bg. ?theme or forever:theme switches palettes.

Safe to edit

  • theme tokens (:root --pro-bg, --pro-surface, --pro-border, --pro-text, --pro-muted, --pro-accent)
  • files queue; ramp durations; ring size and fill easing

Keep intact

  • IIFE wrapper; reduced-motion static state; hidden-page pause
  • Theme tokens, ?theme bootstrap and forever:theme listener
  • demo-v1 lifecycle: read __foreverPreview.demoEnabled; stop attract work on forever:interactive; preserve manual feedback
  • :root --pro-* token names; descriptive role=img and aria-label

Known limitations

  • Demo data; no backend integration
  • Instance-local values; remount resets values

file-uploaddropzoneprogress-ringuploaddrag-dropproduct-flowonboardingfile-manager

More Product Flows components

  • Profile MenuSimulated account menu with staggered rows and presence changes.