12:I[93649,["/_next/static/immutable/chunks/1tf2pn9278k7y.js","/_next/static/immutable/chunks/0m34zmqogmgme.js","/_next/static/immutable/chunks/3tvvqezakiib-.js"],"DocsSidebar"] 13:I[67919,["/_next/static/immutable/chunks/1tf2pn9278k7y.js","/_next/static/immutable/chunks/0m34zmqogmgme.js","/_next/static/immutable/chunks/3tvvqezakiib-.js"],"PreviewTabs"] 14:I[27615,["/_next/static/immutable/chunks/1tf2pn9278k7y.js","/_next/static/immutable/chunks/0m34zmqogmgme.js","/_next/static/immutable/chunks/3tvvqezakiib-.js"],"CopyBlock"] 15:T4f91,# Thermal Cut Invoice Studio — AI Prompt Copy this prompt into **v0**, **Bolt**, **Cursor**, **Framer AI**, or **Claude** to generate this component from scratch. > **Use case:** A SaaS billing product's checkout confirmation page, replacing the static email-receipt pattern with a tactile, interactive moment. --- # Receipt Printer · Live Invoice Studio Build a single-page React app where a thermal printer prints a live-editable invoice, a user drags a pair of scissors across the paper to cut it off, and the cut receipt (a) drops into a tray on the right for re-download and (b) saves as a proper A4 PDF a customer would accept. Three columns, one viewport. Editor on the left, printer in the middle, tray on the right. No vertical scroll on desktop. Save to **`receipt-printer-app/`**. --- ## FRAMEWORK - **Vite 4** + **React 18** + **TypeScript** - **Tailwind CSS 3** (Play CDN or PostCSS — either works) - **motion** (aka framer-motion successor) — for the print feed, cut retract, and tray spring - **@phosphor-icons/react** — icons only - **jsPDF** — programmatic A4 PDF (do NOT use html2canvas, canvas output looks bad at zoom) - **clsx** + **tailwind-merge** — helper for className composition - Node 16-compatible: pin Vite 4.x, tailwindcss 3.x `package.json` deps: ``` "motion", "@phosphor-icons/react", "jspdf", "tailwindcss@3", "clsx", "tailwind-merge", "@vitejs/plugin-react", "vite@^4" ``` --- ## FILE STRUCTURE ``` receipt-printer-app/ ├── components/ │ ├── ReceiptPrinter.tsx // presentational compound: Root/Machine/Header/Screen/Status/Output/Paper │ ├── CheckoutStatus.tsx // consumer: editor + printer + tray + cut + PDF │ └── TactileButton.tsx // small styled button/link ├── helpers/ │ └── classname-helper.ts // cn() = twMerge(clsx(...)) ├── public/textures/ │ ├── plastic-noise.svg // chassis noise overlay │ └── receipt-paper.svg // paper noise (pure white base, 5% neutral noise) ├── public/images/ │ └── receipt-printer-logo.png // 24×24 ├── src/ │ ├── main.tsx // wraps in .dark scope, cream page bg │ └── index.css // grayscale CSS vars (light + dark), tailwind directives ├── tailwind.config.js // color tokens reference CSS vars └── vite.config.ts // @/* alias to project root ``` --- ## ASSETS Two SVG textures generated in-repo, one small PNG logo. **`public/textures/plastic-noise.svg`** (chassis grain): ```svg ``` **`public/textures/receipt-paper.svg`** (paper grain, PURE WHITE — no cream/mauve tint): ```svg ``` **`public/images/receipt-printer-logo.png`** — any 24×24 dark PNG (or generate a tiny valid PNG programmatically). --- ## DESIGN TOKENS — paste verbatim `src/index.css`: ```css @tailwind base; @tailwind components; @tailwind utilities; /* Light scale (neutral gray, no warm tint) */ :root { --color-grayscale-1: #FDFDFC; --color-grayscale-2: #F9F9F8; --color-grayscale-3: #F1F0EF; --color-grayscale-4: #E9E8E6; --color-grayscale-5: #E2E1DF; --color-grayscale-6: #DAD9D6; --color-grayscale-7: #CFCECC; --color-grayscale-8: #BBBAB8; --color-grayscale-9: #8D8D89; --color-grayscale-10: #82827E; --color-grayscale-11: #63635E; --color-grayscale-12: #1B1B18; --color-green-9: #30A46C; } /* Dark scale — CRITICAL: --color-grayscale-12 is PURE WHITE (paper color). Do not use Radix mauve values here — they add a yellow tint to the paper. */ .dark { --color-grayscale-1: #171717; --color-grayscale-2: #1D1D1D; --color-grayscale-3: #232323; --color-grayscale-4: #2A2A2A; --color-grayscale-5: #313131; --color-grayscale-6: #3B3B3B; --color-grayscale-7: #494949; --color-grayscale-8: #6E6E6E; --color-grayscale-9: #7B7B7B; --color-grayscale-10: #9E9E9E; --color-grayscale-11: #B4B4B4; --color-grayscale-12: #FFFFFF; --color-green-9: #33B074; } ``` `tailwind.config.js`: ```js export default { content: ["./index.html", "./src/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"], darkMode: "class", theme: { extend: { colors: { grayscale: { 1: "var(--color-grayscale-1)", 2: "var(--color-grayscale-2)", 3: "var(--color-grayscale-3)", 4: "var(--color-grayscale-4)", 5: "var(--color-grayscale-5)", 6: "var(--color-grayscale-6)", 7: "var(--color-grayscale-7)", 8: "var(--color-grayscale-8)", 9: "var(--color-grayscale-9)", 10: "var(--color-grayscale-10)", 11: "var(--color-grayscale-11)", 12: "var(--color-grayscale-12)", }, green: { 9: "var(--color-green-9)" }, }, }, }, }; ``` **Page background** (in `main.tsx`, on the outer wrapper): `#F5F5F5` — neutral off-white, slightly darker than the white cards so they pop. Do NOT use warm cream (`#F1F0EC`) — it looks yellowish. --- ## LAYOUT Root wrapper (`src/main.tsx`): ```jsx

{/* scopes the printer's dark palette without darkening the page */}

``` **Three-column grid** (`grid-cols-[300px_380px_240px]` at `lg`, single column below): - **Col 1 · Editor** (300px) — white card, 12 form fields, live total, reprint button - **Col 2 · Printer** (380px) — dark chassis + screen + paper output - **Col 3 · Tray** (240px) — vertical stack of saved receipts, each row = a mini card Card treatment (editor + tray): - Background: `bg-white` - Border: `border border-neutral-200/70` - Radius: `rounded-2xl` - Padding: `p-4` - Shadow: `shadow-[0_1px_0_rgba(0,0,0,0.03),0_10px_30px_-15px_rgba(0,0,0,0.10)]` --- ## ReceiptPrinter — compound component API Presentational only. Consumer drives `stage` state; the library animates. ```tsx Home {/* live plan preview + */} {/* override the default h-[32rem] */} {/* receipt body */} ``` **Stages:** `"processing" | "printing" | "complete"` - Root uses `React.Context` to broadcast stage + `shouldMove` (checks `useReducedMotion`). - Status renders a spinner (`CircleNotchIcon` with `animate-spin`) at processing/printing, morphs to green `CheckCircleIcon` at complete. - Output paper starts translated `translateY(calc(-100% + 2px))` (hidden inside machine), animates to `translateY(0%)` over 1.75s during "printing". - Feed motion `"stepped"` uses a 20-frame keyframe array `translateY(-91% → -81% → -70% → … → 0%)` with `linear` easing to simulate line-by-line paper advance. `"smooth"` uses `easeInOut` and no times array. - Paper has a serrated bottom via `clipPath: polygon(…)` — 40 teeth × 4px depth, generated with an `Array.from({length:80}, …)` loop. - Machine chassis uses layered `color-mix()` gradients on top of `bg-grayscale-4` (dark) — this REQUIRES the `--color-grayscale-*` CSS vars to exist (Tailwind 3 doesn't auto-emit them; the tokens above are the fix). --- ## CheckoutStatus — the consumer ### Invoice state Single controlled object with every field editable: ```ts type InvoiceData = { planName: string; planSubtitle: string; qty: number; unitPrice: number; taxPct: number; currencySymbol: string; orderId: string; cardLast4: string; date: string; customerName: string; customerEmail: string; companyName: string; companyEmail: string; }; ``` Defaults: `Pro plan / Annual subscription / qty 1 / £192 / 20% / ORD-2048 / Visa •••• 4242 / 11 Aug 2026 · 14:32 / Peeyush Kumar / hello@peeyush.studio / Refero Studio / billing@refero.studio` Derived (memo'd): ```ts subtotal = unitPrice * qty tax = subtotal * taxPct / 100 total = subtotal + tax ``` ### Editor form 2-column grid inside the white card. Every input on change updates the invoice state → receipt on the printer re-renders instantly. Input styling: ``` rounded-md border border-neutral-200 bg-white px-2.5 py-1.5 text-[13px] outline-none focus:border-neutral-900 focus:ring-2 focus:ring-neutral-900/10 ``` Field labels: `text-[10px] font-medium uppercase tracking-[0.15em] text-neutral-500`. Currency is a `