Sticker Forge 是一款基于 WebGL 的网页端贴纸创作工具，它不只让你设计贴纸图案，更模拟了真实贴纸的“撕开”体验——点击边缘、拖动剥离，贴纸会像实物一样卷曲翻起，露出哑光背面，并实时投下符合视角的阴影。它解决了设计师、教育者和内容创作者在数字场景中难以传递“物理质感”的痛点，让静态贴纸拥有令人会心一笑的交互生命力。
核心功能
- 真实撕贴物理引擎：内置高精度 peel physics（剥离物理），拖拽贴纸边缘时自动模拟卷曲弧度、张力反馈与深度感知阴影，告别生硬动画
- 所见即所得编辑器：支持富文本排版（字体/颜色/间距）、本地图片上传（PNG/JPEG）、透明背景自动识别，无需PS即可完成专业级贴纸设计
- 零依赖嵌入式组件：提供开箱即用的 Web Component（
<sticker-forge>），一行 script 标签 + 一段 HTML 即可集成到任何网站、博客或教学平台 - 双格式开发支持：同时输出 ES Module（现代前端项目）与 IIFE（传统网页直引），并附带完整 TypeScript 类型定义，Vue/React/Svelte 全兼容
- 声音与细节全内联：标志性的“嘶啦”撕贴音效已压缩优化并直接打包进 JS 文件，无需额外托管音频资源，加载即用
- 离线可用 & 静态部署：整个应用可一键构建为纯静态文件，支持 GitHub Pages、Vercel 等任意平台托管，甚至保存到本地直接双击打开
适合哪些人用
这款工具特别适合：教师（制作互动课件中的可操作教具）、自媒体创作者（为公众号/小红书/B站视频定制品牌化动态贴纸）、UI/UX 设计师（快速产出高保真原型交互动效）、学生与手账爱好者（零代码玩转3D视觉表达），以及任何想为网页增添一点“指尖温度”的开发者——它把工业级 WebGL 效果，做成了连小学生都能上手拖拽的玩具。
快速上手
无需安装复杂环境！最简单的方式是直接访问在线体验版：https://sticker.oooo.so。若需本地运行或集成开发：
- 确保已安装 Node.js 22.13+（推荐使用 Node.js 官方中文版）
- 终端执行：
git clone https://github.com/CatsJuice/sticker-forge.git && cd sticker-forge && npm install && npm run dev，浏览器打开 http://localhost:5173 即可实时编辑 - 如需嵌入自己的网页，复制
public/embed/sticker-forge.es.js到项目中，再添加 HTML：<sticker-forge src="your-artwork.png"></sticker-forge>—— 5 分钟完成集成
项目信息
📦
CatsJuice/sticker-forge
GitHub
CatsJuice/sticker-forge
GitHub
A tactile WebGL sticker maker with rich text, image uploads, and interactive peel physics.
编程语言：JavaScript｜Star 数：520｜开源协议：MIT｜GitHub 项目地址
如果你厌倦了扁平化贴纸，渴望让数字内容拥有真实的触觉记忆——Sticker Forge 就是那个能让你笑着拖动鼠标、反复“撕”上十分钟的魔法小工具。
