Skip to content

New200 animated icons, 75 free. See the icons ›

Nexus UI

Molten Hold, animated React component

Hold to confirm by pouring molten metal. Press and hold and metal pours into the channel: the front is a glowing meniscus, white-orange at the lip, that shivers as it runs and throws heat onto the groove ahead, while behind it the metal cools through orange and red into chrome, its skin breaking into slow cells. Let go early and it drains back. Hold to the end and the glow fades, one ripple runs the length of the set bar, and the label is pressed into the metal. Space or Enter hold it from the keyboard. Until you touch it, it holds and lets go by itself.

  • Pro
  • Inputs & Controls
  • Spring

A low thump and a short whoosh as the metal starts to run, then a sizzle that follows the front: grains of hiss and crackle that come closer together and brighter as the channel fills, with the odd spit and a low glug. Let go early and it drains with an airy slide and a few bubbly notes stepping down. Hold to the end and it sets with a heavy thunk, a hiss of steam as the metal quenches, a ring of chrome and a sheen that runs the length of the bar. Pressing it again plays a soft reverse blip. 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.

Press and hold

Props

PropTypeDefaultWhat it does
autoplaybooleanfalseHolds and lets go by itself until the first touch. Held still under reduced motion.
volumenumber0.8Loudness of the sounds, 0 to 1.
labelstringHold to publishThe words on the bar before it is held.
doneLabelstringPublishedThe words pressed into the metal once the hold is complete.
durationnumber1.8Seconds of holding it takes to fill the channel.
onConfirm() => void—Called once, when the channel is full.
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

    Molten Hold 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}"
    }
  }
}

Molten Hold questions

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

A low thump and a short whoosh as the metal starts to run, then a sizzle that follows the front: grains of hiss and crackle that come closer together and brighter as the channel fills, with the odd spit and a low glug. Let go early and it drains with an airy slide and a few bubbly notes stepping down. Hold to the end and it sets with a heavy thunk, a hiss of steam as the metal quenches, a ring of chrome and a sheen that runs the length of the bar. Pressing it again plays a soft reverse blip. 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