Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Soap Bubble, animated React component

A kudos button you blow like a soap bubble. Hold the wand and a bubble swells and wobbles; let go and it floats off, its skin swirling with thin-film colours as the soap drains, then pops into droplets at the top and leaves the message behind. Hold too long and it bursts. The bubble is a WebGL shader, and Space or Enter works the wand the same way as a press.

  • Pro
  • Inputs & Controls
  • Spring

Breath through the wand as the bubble swells, a soft release as it lets go and a bright pop. 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.

Send Priya kudos
For the launch notes. The bigger the bubble, the bigger the thanks.
Hold the ring to blow. Let go to send it.

Props

PropTypeDefaultWhat it does
tostring"Priya"Who the kudos go to.
onSend(size: number) => void—Called when a bubble is sent, with how big it was, 0 to 1.
enableSoundbooleantrueBreath through the wand, the bubble letting go and the pop. They also follow the site-wide sound switch.
volumenumber0.8Sound level, 0 to 1.
autoplaybooleanfalseBlows bubbles by itself until the visitor touches it. Never runs under reduced motion.
classNamestring—Extra classes for the card.

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

    Soap Bubble 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}"
    }
  }
}

How Soap Bubble works

A kudos button you blow like a soap bubble. the kudos. Let go and it breaks free with a shiver, floats up drifting and turning, its skin swirling with the colours of a thin film (they thin and shift as the soap drains to the bottom), and pops at the top into a spray of droplets, leaving the message behind. Blow too long and it bursts in your face.

The source, the install command and the build prompt come with Pro.

Soap Bubble questions

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

Breath through the wand as the bubble swells, a soft release as it lets go and a bright pop. 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