Morphing Dialog, animated React component

Dialogs that grow out of the button that opened them and shrink back into it on close, so you always see where they came from. Share opens a link panel, and Delete asks for the project name to be typed before the red button wakes up.

Pro
Cards
Spring

Lifts when a dialog opens out of its button, drops when it closes by Done, Cancel, the backdrop or Escape, and taps when you confirm Delete forever. 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.

orbitly-site

Edited 3 minutes ago

Props

Prop	Type	Default	What it does
projectName	string	"orbitly-site"	Name of the demo project. The delete dialog asks for it to be typed before the red button wakes up.
pageCount	number	14	Number of pages the delete dialog says will be removed.
shareBase	string	"nexus.app/p"	Host and path the share link is built from, followed by the project name.
onDelete	() => void	—	Called when the delete is confirmed.
onRestore	() => void	—	Called when a deleted project is restored.
autoplay	boolean	false	Opens Share and closes it, then opens Delete, types the name, confirms and restores, on a loop until someone touches the component. Pauses off screen and never runs under reduced motion.
className	string	—	Extra classes for the frame.
enableSound	boolean	true	Plays 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

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-dialog
```
3
Check what was added
With the standard aliases, these files land in your project:
components/
morphing-dialog/
index.ts
morphing-dialog.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 { MorphingDialog } from "@/components/morphing-dialog";

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

Morphing Dialog questions

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

Lifts when a dialog opens out of its button, drops when it closes by Done, Cancel, the backdrop or Escape, and taps when you confirm Delete forever. 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.

Pro
NewSound
Empty Projects
Pro
NewSound
No Results
Pro
NewSound
Empty Team
Pro
New
Skeleton Morph