Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Face Scan Morph, animated React component

A pay-with-your-face confirmation whose glyph takes itself apart to check you. Tap it and the four scan corners curl inward into the arcs of a ring that spins while the face glances about and blinks. A match closes the ring into one green circle as the eyes fade and the smile straightens into a check. No match stops the spin, the arcs straighten back into corners, and the face shakes its head with a flat mouth and waits for another go. The glyph is a plain button with each state spoken in a live region.

  • Pro
  • Inputs & Controls
  • Spring

A faint tick each quarter turn of the spinning ring, a rising chime and a warm note on a match, and two low notes as the face shakes its head. 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.

Little Fern Café

$24.00

Tap to pay with your face

Props

PropTypeDefaultWhat it does
merchantstring"Little Fern Café"Who is being paid.
amountstring"$24.00"The amount, as shown.
onConfirm() => Promise<boolean>—Check the face yourself and resolve true to pay. Without it the demo fails the first try and passes the next.
onPaid() => void—Called once the payment goes through.
enableSoundbooleantrueSoft ticks while it scans, a chime on a match and a low note on a miss. They also follow the site-wide sound switch.
volumenumber0.8Sound level, 0 to 1.
autoplaybooleanfalseScans 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

    Face Scan Morph 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 Face Scan Morph works

A pay-with-your-face confirmation whose glyph takes itself apart to check you. Tap it and the four scan corners curl inward into the arcs of a ring that spins while the face glances about and blinks. A match closes the ring into one green circle as the eyes fade and the smile straightens into a check. No match stops the spin, the arcs straighten back into corners, the face shakes its head with a flat mouth, and it waits for another go.

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

Face Scan Morph questions

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

A faint tick each quarter turn of the spinning ring, a rising chime and a warm note on a match, and two low notes as the face shakes its head. 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