Claude Skill Tearable Cloth — Development skill for Claude Code

tearable-cloth

**把网页入口做成"撕开一张纸"的仪式感 — Three.js + Verlet 物理,放进任何 Next.js 项目都能用。**

A Claude Code Skill for building **interactive "tearable paper" entry-gate effects** in web apps using Three.js + Verlet cloth physics. Drop into any Next.js project, get a ritual that turns "loading the page" into 5–10 seconds of tactile play.

---

这是什么

每个 portfolio / 品牌站都需要一个"开场仪式" — 让访客记得"哦那个网站,进去要撕一张纸的"。

`tearable-cloth` 不是一个挂件 — 它是一整套**已调好参数 + 算法洞察 + 多层撕扯架构**:

访客打开页面
   ↓
看到一张设计过的纸盖住一切 (大字 + 拼贴色块 + 手绘涂鸦)
   ↓
鼠标拽 → 纸真的伸长 → 拉到极限断裂 → 留下真正的洞 (不是变形)
   ↓
透过洞看见下一层 (再一张纸 / 真正的内容)
   ↓
再撕一次 → 进入工具墙 / 作品集 / 品牌主页

**视觉 + 触感 + 节奏全部到位的关键**(花了 25 轮迭代才搞定):

1. 真的有洞 — 撕开的三角形从 mesh 里跳出来,不是单纯的形变
2. 拉很长才断 — TEAR_DISTANCE = 4.5×rest,有"伸缩"反馈
3. 撕痕不规则 — 每根 link 自己的随机阈值,撕痕像真撕纸
4. 断的瞬间反弹 — 断点向外 + 微 Z+,像真纸撕开会"翘起来"
5. 分级重力 — 完整的纸近零重力(贴墙不下垂),撕开的边缘下垂,完全断的碎片下落
6. 首次互动前零重力 — 不动鼠标的时候是稳定贴墙,触碰瞬间"唤醒"

详情进 `SKILL.md`。

---

What this is

Every portfolio / brand site needs an **opening ritual** — something that makes visitors remember "oh, that site, you have to tear a piece of paper to get in."

`tearable-cloth` is not a widget — it's a full set of **tuned parameters + algorithm insights + multi-layer tear architecture**:

Visitor lands
   ↓
Sees a designed sheet of paper covering everything
   ↓
Drags mouse → paper actually stretches → snaps at limit → leaves real holes
   ↓
Through the holes, the next layer shows
   ↓
Tear again → reveal the actual content (tools wall / portfolio / etc.)

**Six visual + tactile keys** that took 25 iterations to nail (against [pushmatrix/tearable](https://pushmatrix.github.io/tearable/) as reference):

1. Real holes — torn triangles dropped from mesh, not just deformed
2. Visible stretch before tear — TEAR_DISTANCE = 4.5×rest
3. Asymmetric edges — per-link random thresholds = paper-like rips
4. Tear recoil — broken endpoints kick outward + slight +z lift, flap curls
5. Differential gravity — healthy c