Runaway Button, animated React component

A cancel-subscription dialog whose cancel button slips away from the pointer, getting less sure of itself each time, then gives up after a few tries and lets you click it. Keyboard users get a normal button that never moves while focused.

Pro
Inputs & Controls
Hover
Spring

Play with it

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

Cancel your subscription?

You'll lose your saved boards at the end of the month.

Props

Prop	Type	Default	What it does
onCancel	() => void	undefined	Called when the cancel button is finally clicked or activated from the keyboard.
onKeep	() => void	undefined	Called when "Keep my plan" is clicked.
autoplay	boolean	false	Hops the cancel button around the dialog every 1.1 s, until someone points at it, focuses it or presses a key.

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

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