为什么值得关注

它实现了逼真的物理模拟贴纸撕开效果，包含深度感知阴影、内嵌音效，并作为框架无关的库可嵌入任意网页。

适合谁使用

需要构建交互式或游戏化 UI 的前端开发者
尝试产品演示交互原型的设计师
需要设计奖励或互动式学习素材的教育工作者
在游戏中实现可撕贴纸元素的游戏开发者

典型使用场景

创建产品交互展示，用户撕开贴纸以显示隐藏内容
构建有趣的新用户引导或奖励体验
开发面向儿童的贴纸类教育应用
在营销或个人作品集中嵌入可定制贴纸组件

项目优势

逼真的 WebGL 模拟，使用自定义着色器处理刚性区域和弯曲区域
支持文本、图片和 SVG 输入，自动基于透明度生成裁切边界
框架无关：提供 Web Component 和命令式 JavaScript API
内嵌音频精灵，依据撕扯速度生成声音效果，无需额外文件

使用前须知

本地开发需 Node.js 22.13 或更高版本
浏览器必须支持 WebGL，旧设备可能无法运行
该效果专用于贴纸撕开，不适合通用 3D 交互

README 快速开始

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

项目描述

A tactile WebGL sticker maker with rich text, image uploads, and interactive peel physics.

sticker-forge