Money Printer

Create personalized time vouchers that look like real currency. Design your own "Zeitgutscheine" (time vouchers) with custom portraits, names, and descriptions - perfect as unique gifts.

Live Demo

Features

- Custom Portrait: Upload your photo with zoom and pan controls
- Background Removal: AI-powered background removal with adjustable opacity and blur
- Sepia Effect: Local vintage currency engraving effect (no API required)
- Personalization: Add your name, email, and phone number
- Multiple Denominations: Choose between 1, 5, or 10 hour vouchers
- Bilingual: Full support for German and English (auto-detects browser language)
- High-Quality Export: Download as print-ready PDF (A4 landscape)
- Responsive: Works on desktop and mobile with touch support

Installation

``bash
npm install @antontranelis/money-printer
`

Usage

$3

`tsx
import { MoneyPrinter } from '@antontranelis/money-printer';

function App() {
return ;
}
`

$3

`tsx
import {
BillForm,
BillPreview,
ExportButton,
PortraitUpload,
useBillStore
} from '@antontranelis/money-printer';

function CustomEditor() {
const portrait = useBillStore((state) => state.portrait);

return (



);
}
`

$3

`tsx
import {
// PDF Generation
generateBillPDF,
exportBillAsPDF,

// Canvas Rendering
renderFrontSide,
renderBackSide,

// Template Composition
composeTemplate,
composeTemplateFullRes,
getTemplateLayers,
preloadBaseImages,
TEMPLATE_WIDTH,
TEMPLATE_HEIGHT,
PREVIEW_WIDTH,
PREVIEW_HEIGHT,

// Image Effects (local, no API)
applyEngravingEffect,
resizeImage,
compositeWithBackground,
clearImageCache,

// AI Enhancement (requires API key)
removeBackground,
setApiKey,
hasApiKey,
} from '@antontranelis/money-printer';
`

Portrait Controls

$3

- Zoom Slider: Adjust portrait size from 50% to 200%
- Pan/Drag: When zoomed in, drag the portrait to reposition (mouse & touch supported)
- Works in both the avatar preview and the bill preview canvas

$3

1. Toggle "Remove background" (requires Stability AI API key)
2. Adjust Background Opacity (0-100%) to blend original background
3. Adjust Blur (0-100%) for depth-of-field effect

$3

- Local processing, no API required
- Adjustable intensity (0-100%)
- Applies vintage currency engraving look

AI Features (Optional)

Background removal uses Stability AI. To enable:

1. Get an API key from Stability AI
2. Click "Remove background" toggle in the app
3. Enter your API key when prompted

The sepia/engraving effect runs locally and doesn't require an API key.

Tech Stack

- React 18/19 - UI Framework
- TypeScript - Type Safety
- Zustand - State Management with persistence
- jsPDF - PDF Generation
- Canvas API - Image Processing & Template Compositing

Templates

Templates are dynamically composed at runtime from layered assets:

- Background: Base template background (3633x1920px @ 600 DPI)
- Badges: Hour denomination badges (1, 5, 10) positioned in corners
- Frame: Ornamental frame overlay
- Banner Text: Arc-curved text rendered on canvas

Both German and English use the same base templates with localized text.

Development

`bash


Clone the repository

git clone https://github.com/antontranelis/money-printer.git
cd money-printer

Install dependencies

npm install

Start development server

npm run dev

Build library

npm run build:lib

Build standalone app

npm run build
``

Performance Optimizations

The image processing is optimized for smooth performance:

- Layer Caching: Composed templates are cached as data URLs
- Image Caching: Avoids reloading the same images
- Uint32Array: Fast pixel manipulation for effects
- Reusable Canvas: Reduces garbage collection pressure
- Debounced Updates: Slider changes are debounced to prevent lag
- Preview Scale: Lower resolution previews (50% scale) for faster rendering

License

MIT License - see LICENSE for details.