Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Warp CTA, animated React component

A deploy button that goes to warp. Hover and the drive spools up on a smooth spring: stars drifting toward you draw out into streaks of true motion blur from a vanishing point that eases after your pointer, and a hairline of light on the rim follows you round. Click and the streaks run long into a bloom while the deploy runs, then draw back into stars when it lands. Give it onDeploy and the jump lasts until your promise settles.

  • Pro
  • Inputs & Controls
  • Hover
  • Spring

The drive spooling up as you hover, a rush on the jump and a settling note on arrival. 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.

Ready to ship
main is 3 commits ahead of production
Checks passed
3 files changed, 2 migrationsLast deploy 2 h ago

Props

PropTypeDefaultWhat it does
titlestring"Ready to ship"The heading above the button.
detailstring"main is 3 commits ahead of production"The line under the heading.
labelstring"Deploy at warp speed"The words on the button.
onDeploy() => Promise<unknown> | void—Runs on press. If it returns a promise, the jump lasts until it settles (at least a second).
enableSoundbooleantrueThe drive spooling up, the jump and the arrival. They also follow the site-wide sound switch.
volumenumber0.8Sound level, 0 to 1.
autoplaybooleanfalseSpools up and jumps by itself now and then 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

    Warp CTA 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 Warp CTA works

A deploy button that goes to warp. The button is a window onto space. Move over it and the drive spools up on a smooth spring: the stars, which drift toward you as points, draw out into streaks of true motion blur that pour from a vanishing point easing after your jumps: the streaks run long and a bloom opens from the centre while the deploy runs, then the drive spools down and the streaks draw back into stars beside the result.

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

Warp CTA questions

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

The drive spooling up as you hover, a rush on the jump and a settling note on arrival. 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