Skip to content

ProUnlock everything for $49.99 a year, or $79.99 once. See plans ›

Nexus UI

Status Morph, animated React component

An iPhone-style status bar (signal, Wi-Fi, battery) that takes itself apart to connect. Tap it and the battery drains, amber then red, before its outline rounds itself into a ring around the Wi-Fi. The signal bars sink into dots, swing under the ring and slide into its gap, and the ring spins while the Wi-Fi arcs ripple outward. When it connects, the spin coasts to rest, the ring closes over the dots with a soft pulse and the arcs fill in one by one. Tap again and it all folds back into the bar, this time charging, with a bolt.

  • Free
  • Motion Effects
  • Spring

Its own soft, glassy sounds, scored to the picture: a tap, three notes falling as the battery drains and an airy swish as it rounds into the ring, then a plink as each dot drops into the gap. Faint ticks climb with the Wi-Fi arcs while it searches; the ring swallows the dots with tiny gulps and a warm bloom, and a bright chime rings as the arcs fill in. Letting go plays four pips as the bars stand back up and a bubbly charging chime as the bolt pops in. 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.

Props

PropTypeDefaultWhat it does
autoplaybooleanfalseConnects and lets go by itself until the visitor taps it. Pauses while it is off screen.
theme"light" | "dark""light"Light (graphite on a white card) or dark (white on a graphite card).
sizenumber260Width of the drawing in pixels. Kept between 160 and 480.
speednumber1How fast it plays: 1 is the designed pace, 2 is twice as fast. Kept between 0.25 and 4.
networkstring"Nexus"The network name shown under the icons while joining and once connected.
volumenumber0.8Loudness of its sounds, 0 to 1.
enableSoundbooleantruePlays interface sounds on interaction. They follow the sound switch (setSoundsEnabled, on by default) and stay silent on hover. Autoplay makes the same sounds once the visitor has used the page. Pass false to silence this component.

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

    Run this once per project. It writes the Nexus UI entry into components.json for you:

    npx shadcn@latest registry add "@nexus-labs=https://www.nexus-ui.com/api/registry/{name}"

    Type it exactly as shown. {name} is filled in by the CLI with the component you ask for, so you never replace it.

  1. 3

    Add the component

    Run this from your project root. It adds the component, the helpers it imports and its npm packages.

    npx shadcn@latest add @nexus-labs/status-morph
  2. 4

    Check what was added

    With a project made as in the Quick Start (a src/ folder), these files land in it:

    components/
    status-morph/
    index.ts
    status-morph-sound.ts
    status-morph.tsx
  3. 5

    Copying by hand? Skip the registry

    Instead of steps 2 and 3 you can copy the files yourself, with no registry and no API key. Step 1 still applies, so that cn() exists. Install the packages:

    npm install framer-motion

    Then show the source and create each file at the path it gives:

  4. 6

    Use it in a page

    Installing only adds the files. Import the component in a page and render it. The Usage tab on the preview shows a fuller example with props:

    // src/app/page.tsx
import { StatusMorph } from "@/components/status-morph";

export default function Page() {
  return (
    <main>
      <StatusMorph />
    </main>
  );
}

Status Morph questions

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

Its own soft, glassy sounds, scored to the picture: a tap, three notes falling as the battery drains and an airy swish as it rounds into the ring, then a plink as each dot drops into the gap. Faint ticks climb with the Wi-Fi arcs while it searches; the ring swallows the dots with tiny gulps and a warm bloom, and a bright chime rings as the arcs fill in. Letting go plays four pips as the bars stand back up and a bubbly charging chime as the bolt pops in. 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 motion effects