Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Airmail Globe, animated React component

A postcard composer that sends by airmail across a real globe. Press send and the card folds itself into a paper plane right where it lies, in one smooth movement, then is thrown onto the globe and becomes the plane you watch fly. It sets off away from them, goes the long way round behind the earth trailing a contrail, and comes down on the person you chose, the only place marked on the globe. The globe is lit by the sun where it is right now, and on landing it tells you the time there. The recipients are a radio group with arrow keys and the message is a real text field.

  • Pro
  • 3D Components
  • Spring

Paper creasing as the card folds, a whoosh on take-off, wind on the way round and a chime when it lands. 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 a postcard
Kyoto, 11:27 PM
Kyoto to Lisbon, 11,060 km
Mia
Lisbon
It's 2:27 PM in Lisbon

Props

PropTypeDefaultWhat it does
fromAirmailPlace—Where the card is sent from: { id, name, city, lat, lon, tz }.
toAirmailPlace[]—The people it can go to.
defaultTostring"mia"The id of the person chosen first.
defaultMessagestring—The message already written on the card.
onSend(to: AirmailPlace, message: string) => void—Called when the card is sent.
enableSoundbooleantrueThe card folding, the take-off, wind on the way and a chime on landing. They also follow the site-wide sound switch.
volumenumber0.8Sound level, 0 to 1.
autoplaybooleanfalseSends a card 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

    Airmail Globe 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 Airmail Globe works

A postcard that travels by airmail, across a real globe. Send it and the card folds itself into a paper plane where it lies, in one continuous movement (corners in, edges in, where its flight begins, so the plane you folded is the one that flies. The globe turns to watch from a little above.

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

Airmail Globe questions

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

Paper creasing as the card folds, a whoosh on take-off, wind on the way round and a chime when it lands. 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 3d components