Sticker Forge

Sticker Forge turns text or uploaded image artwork into a tactile WebGL sticker. Grab the real die-cut edge, drag it inward, and the sticker curls to reveal a satin back surface with depth-aware shadowing.

The repository contains two deliverables:

• an interactive builder in app/;
• a framework-independent Web Component and imperative API in lib/.

Run locally

Node.js 22.13 or newer is required.

npm install
npm run dev

Build the hosted app and both reusable library bundles with:

npm run build

The reusable files are emitted to public/embed/:

• sticker-forge.es.js — an ES module that auto-registers ``;
• sticker-forge.iife.js — a classic script exposing window.StickerForge;
• sticker-forge.d.ts — public TypeScript declarations.

GitHub Pages

Pushes to main deploy a static export through the GitHub Pages workflow at .github/workflows/deploy-pages.yml. Build the same artifact locally with:

npm run build:pages

The production Pages site uses https://sticker.oooo.so. Its DNS record is a CNAME for the sticker subdomain pointing to catsjuice.github.io.

The provided peel sound is trimmed, converted to mono, lightly high-passed, and inlined into both JavaScript bundles, so it does not need to be copied or hosted as a separate asset. The untouched source recording remains in lib/assets/.

Copy-paste Web Component

Copy both the ES bundle and this markup into any page. The bundle registers the element automatically; the idempotent defineStickerForge() helper is also exported and returns immediately (void).

  await customElements.whenDefined("sticker-forge");
  const sticker = document.querySelector("#sticker");

  sticker.setOptions({
    outline: { width: 18, color: "#ffffff" },
    shadow: { opacity: 0.22, blur: 22, distance: 16, angle: 42 },
    lighting: {
      direction: { x: -0.38, y: 0.52, z: 0.76 },
      intensity: 0.8,
      ambient: 0.35,
      softness: 0.6,
    },
    peel: {
      radius: 0.12,
      stiffness: 0.72,
      maxAngle: 3.55,
      release: "reset",
    },
    sound: { enabled: true, volume: 0.68 },
    back: { color: "#f7f5f2", gloss: 0.7, roughness: 0.3 },
    material: {
      type: "holographic",
      intensity: 0.86,
      scale: 1,
    },
    tilt: -3,
  });

  // setSource() is async: the promise settles after the tex