Skip to content

New301 animated icons, 75 free. See the icons ›

Nexus UI

Aquarium Prompt, animated React component

Aquarium Prompt: an AI prompt box floating in a pixel-art aquarium. A shoal of pixel fish swims behind the frosted glass, each kind schooling with its own: clownfish, blue and yellow tangs, and a fast flicker of sardines. Move the pointer through the water and they scatter; click the water and a ripple sends them darting. Type, and they crowd round the caret to watch, a bubble rising with each key. Press send and they all swim into the box with your message, which floats up as a bubble and pops. Keyboard: it's a normal text field; Enter sends.

  • Pro
  • AI Components
  • Hover

Play with it

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

What's on your mind?

Move through the water, or tap it.

Props

PropTypeDefaultWhat it does
titlestring"What's on your mind?"The title shown in the component.
placeholderstring"Ask anything"The placeholder shown in the component.
onSubmit(text: string) => void—called with the text when it's sent
fishnumber—how many fish swim in the tank
autoplaybooleanfalseDemo itself until someone touches it. Off by default.
classNamestring""Extra classes for the outer element.

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

    Aquarium Prompt 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}"
    }
  }
}

More ai components