Stamp Forge

Realistic ink stamp generator. Create authentic-looking rubber stamps with customizable text, shapes, grunge textures, curved text, logo support, and PNG export.

Built with React + Canvas. No external dependencies for rendering.

Features

• Realistic ink texture -- 4-layer grunge (pressure patches, paper fiber, high-freq fibrous grain, micro-holes)
• Ink bleed effect -- blur + threshold pipeline makes edges organically rounded
• Curved arc text -- text follows circular borders (passport/postmark style)
• Multiple shapes -- rounded rect, rectangle, circle, oval, diamond, hexagon
• Logo/image upload -- place any image in the center of your stamp
• Gallery mode -- preview 12 seed variations side by side, click to pick
• Multi-line text -- unlimited lines, each with independent size, font, bold
• Auto-fit -- text automatically shrinks to fit inside borders
• Decorative elements -- stars, dots, lines between concentric borders
• Double borders -- inner + outer border like professional stamps
• Edge splatter -- random ink dots near borders
• 11 templates -- Passport, Postmark, APPROVED, FRAGILE, AIR MAIL, PAID, VOID, Business, City Seal, REGISTERED, Custom
• 8 ink presets + custom color picker
• PNG export with transparent background
• SVG icon set -- no emoji dependencies

Quick Start

git clone https://github.com/YOUR_USERNAME/stamp-forge.git
cd stamp-forge
npm install
npm run dev

Open http://localhost:5173

Build

npm run build

Output in dist/ -- deploy anywhere as static files.

Project Structure

src/
  main.jsx        -- React entry point
  App.jsx         -- Main app component (self-contained single-file version)
  noise.js        -- Seeded Perlin noise engine
  renderer.js     -- Pure stamp renderer (config -> canvas)
  effects.js      -- Grunge texture + ink bleed processing
  templates.js    -- Stamp templates, shapes, ink presets
  icons.jsx       -- SVG icon components (Feather-style)

Architecture

The rendering pipeline is fully modular:

Config object
    |
    v
renderStamp(cfg)     -- draws borders, text, arc text, logo, splatter
    |
    v
applyInkBleed(canvas, px)  -- blur + threshold for organic edges
    |
    v
applyGrunge(canvas, seed, wear, density)  -- 4-layer noise texture
    |
    v
Final canvas (PNG export)

Each function is pure: input in, canvas out. Easy to use outside React.

Texture Layers

The grunge effect uses 4 noise layers to match real stamp references:

1. Low-freq fbm (0.009) -- large pressure patches where rubber didn't contact
2. Mid-freq fbm (0.06) -- paper fiber absorption pattern
3. High-freq noise (0.25) -- fibrous grain (key realism driver)
4. Hash noise (0.4) -- random micro-holes

Plus edge falloff (corners/edges print lighter) and color temperature variation.

License

MIT