Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Inspect Text, animated React component

An intro paragraph where every word, logo and photo is its own layer, like in a design tool. A selection frame with handles and a live size tag springs between the layers as you point, and logos fill with colour from the edge you came in by. Click a layer to inspect its real styles, then point at another for red measurement lines between the two; drag a handle to resize. In autoplay a collaborator's cursor wanders in and does it for you.

  • Pro
  • Motion Effects
  • Hover
  • Spring

Soft ticks as the frame springs between layers and a tock when you select one. 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.

AboutPoint at a name, click to inspect

Hi, I'm . I lead design at , draw typefaces for and build with .

Props

PropTypeDefaultWhat it does
textstring—The sentence: plain words, with layers in braces by id, for example "Hi, I'm {lena}."
layersInspectLayer[]—The layers the braces refer to.
collaborator{ name: string; color: string }{ name: "Noah", color: "#ff375f" }The collaborator whose cursor wanders in during autoplay.
enableSoundbooleantrueTicks as the frame moves and a tock when you select. They also follow the site-wide sound switch.
volumenumber0.8Sound level, 0 to 1.
autoplaybooleanfalseLets a collaborator's cursor inspect layers 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

    Inspect Text 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 Inspect Text works

An intro paragraph you can inspect like layers in a design tool. Every word, logo and photo is its own layer. Point at one and a selection frame springs onto it with a little fills with colour from the edge your pointer came in by, and drains out the edge you leave by. A hand-written nudge says where to start.

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

Inspect Text questions

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

Soft ticks as the frame springs between layers and a tock when you select one. 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