Morphing Text, animated React component

A keyword that melts into the next one. Two blurred copies meet under an SVG alpha threshold, so the letters flow into new letters instead of cross-fading. The threshold is only on during the morph, so resting text stays crisp, and a pause button stops the cycle.

Pro
Motion Effects
Spring

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Interfaces that feelalive.

Props

Prop	Type	Default	What it does
lead	string	"Interfaces that feel"	Static line above the morphing word. An empty string hides it.
words	string[]	["alive.", "tactile.", "physical.", "inevitable.", "yours."]	The words to cycle through.
morphTime	number	1.1	Seconds each morph takes.
holdTime	number	1.6	Seconds each word rests before the next morph.
align	"left" \| "center" \| "right"	"center"	Alignment of the lead line and the word.
color	string	"#0071e3"	Colour of the morphing word.
autoplay	boolean	false	Cycles through the words on its own. Off, it rests on the first word until Play is pressed. Pauses off screen, and reduced motion swaps words with a plain fade.
className	string	—	Extra classes for the wrapper.

Add it to your project

Prepare your project

You need Tailwind CSS and the @/import alias. If shadcn isn't set up yet, initialise it once:

npx shadcn@latest init

Then add the Nexus registry to your components.json (the registries key is the part that matters):

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": "https://www.nexus-ui.com/api/registry/{name}"
  }
}

2
Add the component
Run this from your project root. It adds the component, the utilities it uses and its packages.
```
npx shadcn@latest add @nexus-labs/morphing-text
```
3
Check what was added
With the standard aliases, these files land in your project:
components/
morphing-text/
index.ts
morphing-text.tsx
4
Copying by hand? Install the packages
Skip this if you used the command above.
```
npm install framer-motion
```

Use it in a page

Import it and render it. The Code tab above has the full example.

// app/page.tsx
import { MorphingText } from "@/components/morphing-text";

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

Pro
New
Mesh Net
Pro
New
Particle Reveal
Pro
New
Workflow Network
Pro
New
Cubes Grid