Catch Undo, animated React component

An Undo that catches. Delete a file and the row comes loose, drops out of the list and time slows as it falls into the dark. Hit Undo and a web shoots from the button: a twisted rope of silk fibres that frays open into a hand as it flies, wraps the row, stretches to slow it down gently and reels it back into its slot. Miss it and the row is simply gone. A slow-hand switch gives you more time, and an onCue callback exposes each stage for your own sound layer.

Free
For Fun
Spring

Play with it

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

Recent files

4 items

KEY

Q4 pitch deck.key

18.2 MB · Edited 2h ago

PDF

invoice-0423.pdf

284 KB · Edited yesterday

BLEND

clocktower-final.blend

46.9 MB · Edited 3 days ago

HEIC

IMG_4021.HEIC

3.1 MB · Edited last week

Delete a file, then catch it with Undo before it falls.

Moved to Trash

Props

Prop	Type	Default	What it does
autoplay	boolean	false	Plays itself with a ghost pointer until the visitor touches the card. Off by default, so a copied component reacts only to the visitor. Never runs under reduced motion.
height	number	560	Height of the stage in pixels.
slowHand	boolean	false	Starts with the slow hand on: the web takes about two and a half times longer to open its hand.
onCue	(cue: CatchCue) => void	—	Called at each stage (delete, slowmo, shoot, catch, reel, restored, missed) so you can attach your own sound or haptics.
className	string	—	Extra classes for the outer card.

Add it to your project

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
Connect the registry
Run this once per project. It writes the Nexus UI entry into components.json for you:
```
npx shadcn@latest registry add "@nexus-labs=https://www.nexus-ui.com/api/registry/{name}"
```
Type it exactly as shown. {name} is filled in by the CLI with the component you ask for, so you never replace it.
3
Add the component
Run this from your project root. It adds the component, the helpers it imports and its npm packages.
```
npx shadcn@latest add @nexus-labs/catch-undo
```
4
Check what was added
With a project made as in the Quick Start (a src/ folder), these files land in it:
components/
catch-undo/
catch-undo.tsx
index.ts
5
Copying by hand? Skip the registry
Instead of steps 2 and 3 you can copy the files yourself, with no registry and no API key. Step 1 still applies, so that cn() exists. Install the packages:
```
npm install framer-motion
```
Then show the source and create each file at the path it gives:

Use it in a page

Installing only adds the files. Import the component in a page and render it. The Usage tab on the preview shows a fuller example with props:

// src/app/page.tsx
import { CatchUndo } from "@/components/catch-undo";

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

Catch Undo, animated React component

Play with it

Props

Add it to your project

Set up your project once

Connect the registry

Add the component

Check what was added

Copying by hand? Skip the registry

Use it in a page

More for fun