Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Ink Drop Picker, animated React component

An accent colour picker that drops your colour into a glass of water. A pipette squeezes a drop in; it rings the surface, then rolls into a vortex ring that sinks, hits the floor and curls back up. It is run by a fluid simulation on the GPU and seen through the glass like a lens, and you can stir the water by dragging in it. Inks mix the way dyes do, and once the water settles the colour flows into the interface below. The inks are a radio group with arrow keys.

  • Pro
  • Inputs & Controls

The pipette squeezing, a plip as the drop lands and the water settling. 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.

Accent colour
Drop a colour in and watch it take.
Ocean
#0A84FF
Pick an ink to drop it in. Drag in the water to stir.

Props

PropTypeDefaultWhat it does
colorsInk[]—The inks to choose from: { id, name, hex }.
defaultValuestring—The id of the ink chosen at the start.
onChange(hex: string, id: string) => void—Called with the chosen ink's hex and id.
labelstring"Accent colour"The card's heading.
descriptionstring"Drop a colour in and watch it take."The line under the heading.
enableSoundbooleantrueThe pipette, the drop landing and the water. They also follow the site-wide sound switch.
volumenumber0.8Sound level, 0 to 1.
autoplaybooleanfalseDrops inks in 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

    Ink Drop Picker 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 Ink Drop Picker works

An accent colour picker that drops your colour into a glass of water. Choose an ink and a glass pipette slides over the glass, squeezes, and lets a drop fall: it rings the surface, throws up a little crown of droplets, then sinks and blooms into curling plumes as it falls through the water.

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

Ink Drop Picker questions

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

The pipette squeezing, a plip as the drop lands and the water settling. 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