Skip to content

New200 animated icons, 75 free. See the icons ›

Nexus UI

Mercury Upload, animated React component

A file upload that pours the file in as mercury. A bead swells under the file's chip, stretches on a thinning neck and falls, lengthening as it speeds up, then merges into the pool below with ripples running off both ways. Drop by drop the pool spreads from the middle of the channel, which is the progress. When the last drop is in, the whole pool pulls itself together into a single bead and a check is pressed into it. Real file picker and drag and drop; wire progress to your upload. Until you touch it, it uploads a sample file by itself.

  • Pro
  • Inputs & Controls
  • Spring

A soft thock as the file arrives, a tick as each bead lets go under the chip and a bubble as it lands in the pool, rising in pitch as the pool fills, like a bottle ringing higher as it fills, so you can hear the progress. When the last drop is in the pool gathers itself with a rising swell of air and a low note drawing in, then a thunk and a ring of chrome as the check is pressed into the bead. Sound is off on this site until you switch it on.

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Nothing uploaded yet

Props

PropTypeDefaultWhat it does
autoplaybooleanfalseUploads a sample file by itself until the first touch. Held still under reduced motion.
volumenumber0.8Loudness of the sounds, 0 to 1.
onUpload(file: File) => void—Called with the file the moment one is chosen or dropped.
progressnumber—Real progress from 0 to 1. Leave it out and the pour runs on its own timing.
enableSoundbooleantruePlays interface sounds on interaction. They follow the sound switch (setSoundsEnabled, on by default) and stay silent on hover. Autoplay makes the same sounds once the visitor has used the page. Pass false to silence this component.

Add it to your project

  1. 1

    Set up your project once

    You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:

    npx shadcn@latest init -d

    Starting from nothing? The Quick Start walks through the whole thing.

  2. 2

    Connect the registry with your API key

    Mercury Upload is a Pro item, so the CLI has to send your API key. Do this once per project:

    1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
    2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
      NEXUS_API_KEY=nxs_your_key_here
    3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
      "registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}

Mercury Upload questions

Does it make sound, and how do I turn it off?

A soft thock as the file arrives, a tick as each bead lets go under the chip and a bubble as it lands in the pool, rising in pitch as the pool fills, like a bottle ringing higher as it fills, so you can hear the progress. When the last drop is in the pool gathers itself with a rising swell of air and a low note drawing in, then a thunk and a ring of chrome as the check is pressed into the bead. Sounds are synthesised with the Web Audio API, so there are no audio files, and they only play after a click or key press. Pass `enableSound={false}` to silence this component, or call `setSoundsEnabled(false)` from `@/lib/ui-sounds` to switch every sound off at once. The CLI installs `@/lib/ui-sounds` with the component.

More inputs & controls