Fold Note, animated React component

A printed credit note you fold on its centre crease. Drag the right half over and it turns in 3D, shading as it goes and showing its patterned back; past halfway it snaps shut with a bounce, and a tap opens it again.

Pro
Cards
3D
Spring

Play with it

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

Store Credit50NOT LEGAL TENDER · SC 000042✦50

Thanks

Drag the right half over, or tap it.

Props

Prop	Type	Default	What it does
title	string	"Store Credit"	Small caps heading printed top left.
amount	string	"50"	Denomination printed top right and, smaller, bottom right.
serial	string	"NOT LEGAL TENDER · SC 000042"	Fine print along the bottom edge.
backLabel	string	"Thanks"	Word printed on the back of the folding half.
onFoldChange	(folded: boolean) => void	undefined	Called with true when the note snaps shut and false when it opens.
autoplay	boolean	false	Folds and unfolds every two seconds until the user grabs or taps it.

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

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

FoldFold Note, animated React component

Play with it

Props

More cards

Fold Note, animated React component