Morph Cursor, animated React component

An iPad-style pointer for a panel: a soft dot that melts into the shape of whatever you can press, sits behind it as a highlight while the element leans toward you, and turns into a caret over text. The system cursor is hidden only inside the panel.

Pro
Motion Effects
Hover
Spring

Play with it

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

Move the pointer around.

Props

Prop	Type	Default	What it does
icons	MorphCursorIcon[]	DEFAULT_MORPH_ICONS	Icon buttons in the top row, each { id, label, path } with a 24×24 path.
buttonLabel	string	"Start a project"	Label of the pill button.
inputLabel	string	"Project name"	Accessible name of the text field.
defaultInputValue	string	"Spring launch, website and email"	Starting text in the field.
cards	MorphCursorCard[]	DEFAULT_MORPH_CARDS	Tiles under the field, each { id, label, gradient }.
accent	string	"#0071e3"	Colour of the caret over the field and of the focus rings.
onAction	(id: string) => void	—	Called with an icon id, "button" for the pill, or a card id when one is pressed.
hint	string	"Move the pointer around."	Caption at the bottom of the panel. An empty string hides it.
autoplay	boolean	false	Tours the pointer over every target until someone moves over the panel.
className	string	—	Extra classes for the panel.

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

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

Morph Cursor, animated React component

Play with it

Props

More motion effects