kasaframe 0.1.1 → 0.1.4

package/themes/clay-toy/effects.ts

@@ -0,0 +1,643 @@
+import { clamp, ease, rand, toEase, type EaseName, type SceneCtx } from "@kasaframe/core";
+import { dropBurst } from "@kasaframe/motion";
+import { roundRectShape, stage3d, THREE, type Stage3D } from "@kasaframe/themes/stage3d";
+import { GLYPHS, glyphWidth } from "./glyphs.ts";
+
+// 점토 세계 — 바탕(매트·벽)은 서 있고, 움직이는 것은 다 눌리고 늘어나는 점토다. 공 하나가 요청 하나, 덩어리 하나가 모델 하나
+
+type V3 = [number, number, number];
+type Font = "display" | "sans" | "mono";
+
+const hex = (ctx: SceneCtx, k: string): string => ctx.style.colors[k] ?? k;
+const color = (ctx: SceneCtx, k: string) => new THREE.Color(hex(ctx, k));
+const vec = (p: V3) => new THREE.Vector3(p[0], p[1], p[2]);
+
+/**
+ * 눌림 — 닿은 순간 납작해졌다(+) 늘어났다(-) 한 번 출렁이고 선다. hits 마다 더한다.
+ * 같은 t 면 같은 값(앞 프레임을 쌓지 않는다)
+ */
+const squish = (t: number, hits: readonly number[] | undefined, amp = 0.32): number => {
+  let s = 0;
+  for (const h of hits ?? []) {
+    const u = t - h;
+    if (u >= 0 && u < 1.1) s += amp * Math.exp(-6.5 * u) * Math.cos(15 * u);
+  }
+  return Math.max(-0.4, Math.min(0.55, s));
+};
+// 부피를 지키는 척 — 세로로 눌리면 옆으로 퍼진다. 물체의 원점은 바닥(밑면)이라 바닥에 붙은 채 눌린다
+const press = (o: THREE.Object3D, s: number, base = 1, sy = 1): void => {
+  o.scale.set(base * (1 + s * 0.5), base * sy * (1 - s), base * (1 + s * 0.5));
+};
+// 위에서 떨어져 내려앉는 몫(0 = 떠 있음, 1 = 앉음) — 떨어지는 동안은 가속
+const fall = (t: number, at: number, dur = 0.26): number => (t < at ? 0 : ease.inQuad(clamp((t - at) / dur)));
+
+let bumpTex: THREE.CanvasTexture | null = null;
+// 손으로 누른 자국과 지문 — 결(노멀)로만 보이는 회색조 판 하나를 모든 점토가 같이 쓴다
+function clayBump(): THREE.CanvasTexture {
+  if (bumpTex) return bumpTex;
+  const N = 256;
+  const c = document.createElement("canvas");
+  c.width = c.height = N;
+  const g = c.getContext("2d")!;
+  g.fillStyle = "#808080";
+  g.fillRect(0, 0, N, N);
+  for (let i = 0; i < 46; i++) {
+    const x = rand("bump", i * 4) * N;
+    const y = rand("bump", i * 4 + 1) * N;
+    const r = 8 + rand("bump", i * 4 + 2) * 34;
+    const v = rand("bump", i * 4 + 3) > 0.5 ? 255 : 0;
+    const grd = g.createRadialGradient(x, y, 0, x, y, r);
+    grd.addColorStop(0, `rgba(${v},${v},${v},0.22)`);
+    grd.addColorStop(1, `rgba(${v},${v},${v},0)`);
+    g.fillStyle = grd;
+    g.fillRect(x - r, y - r, r * 2, r * 2);
+  }
+  g.lineWidth = 1.3;
+  for (let f = 0; f < 4; f++) {
+    const cx = rand("print", f * 3) * N;
+    const cy = rand("print", f * 3 + 1) * N;
+    const rot = rand("print", f * 3 + 2) * Math.PI;
+    for (let k = 1; k < 13; k++) {
+      g.strokeStyle = `rgba(40,40,40,${0.2 - k * 0.01})`;
+      g.beginPath();
+      g.ellipse(cx, cy, k * 3, k * 2.2, rot, 0.4, 0.4 + Math.PI * 1.35);
+      g.stroke();
+    }
+  }
+  bumpTex = new THREE.CanvasTexture(c);
+  bumpTex.wrapS = bumpTex.wrapT = THREE.RepeatWrapping;
+  return bumpTex;
+}
+
+const clayMat = (ctx: SceneCtx, k: string): THREE.MeshStandardMaterial =>
+  new THREE.MeshStandardMaterial({ color: color(ctx, k), roughness: 0.86, metalness: 0, bumpMap: clayBump(), bumpScale: 2.2 });
+
+const shade = <T extends THREE.Object3D>(m: T): T => {
+  m.traverse((o) => {
+    if ((o as THREE.Mesh).isMesh) {
+      o.castShadow = true;
+      o.receiveShadow = true;
+    }
+  });
+  return m;
+};
+
+// 꼭짓점을 시드 고정 잡음만큼 밀어 손으로 빚은 울퉁불퉁함을 낸다(가운데를 원점으로 둔 꼴에) — 같은 자리 꼭짓점은 노멀을 합쳐 이음매가 안 보이게
+function lumpy<G extends THREE.BufferGeometry>(geo: G, seed: string, amt = 0.045): G {
+  const p = geo.attributes.position as THREE.BufferAttribute;
+  const waves = [0, 1, 2, 3, 4].map((i) => ({
+    k: new THREE.Vector3(rand(seed, i * 5) - 0.5, rand(seed, i * 5 + 1) - 0.5, rand(seed, i * 5 + 2) - 0.5).normalize().multiplyScalar(1.6 + rand(seed, i * 5 + 3) * 3.4),
+    ph: rand(seed, i * 5 + 4) * Math.PI * 2,
+  }));
+  const v = new THREE.Vector3();
+  const n = new THREE.Vector3();
+  for (let i = 0; i < p.count; i++) {
+    v.fromBufferAttribute(p, i);
+    n.copy(v).normalize();
+    let d = 0;
+    for (const w of waves) d += Math.sin(n.dot(w.k) + w.ph);
+    v.multiplyScalar(1 + (amt * d) / waves.length);
+    p.setXYZ(i, v.x, v.y, v.z);
+  }
+  geo.computeVertexNormals();
+  const nm = geo.attributes.normal as THREE.BufferAttribute;
+  const sum = new Map<string, THREE.Vector3>();
+  const key = (i: number) => `${p.getX(i).toFixed(4)},${p.getY(i).toFixed(4)},${p.getZ(i).toFixed(4)}`;
+  for (let i = 0; i < p.count; i++) {
+    const s = sum.get(key(i)) ?? new THREE.Vector3();
+    s.add(n.fromBufferAttribute(nm, i));
+    sum.set(key(i), s);
+  }
+  for (let i = 0; i < p.count; i++) {
+    const s = sum.get(key(i))!.clone().normalize();
+    nm.setXYZ(i, s.x, s.y, s.z);
+  }
+  return geo;
+}
+
+export interface CamKey {
+  t: number;
+  pos: V3;
+  look: V3;
+  /** 앞 키에서 이 키로 오는 이징. 기본 inOutCubic */
+  ease?: EaseName;
+}
+export interface Shot {
+  from: number;
+  to: number;
+  /** 키 사이는 움직이고 키에서 선다 — 쉬지 않는 몫은 눌리고 튀는 점토가 진다 */
+  keys: CamKey[];
+}
+const mix3 = (a: V3, b: V3, u: number): V3 => [a[0] + (b[0] - a[0]) * u, a[1] + (b[1] - a[1]) * u, a[2] + (b[2] - a[2]) * u];
+function camAt(t: number, keys: CamKey[]): { pos: V3; look: V3 } {
+  const ks = [...keys].sort((a, b) => a.t - b.t);
+  if (t <= ks[0].t) return ks[0];
+  for (let i = 1; i < ks.length; i++) {
+    if (t >= ks[i].t) continue;
+    const [a, b] = [ks[i - 1], ks[i]];
+    const u = toEase(b.ease ?? "inOutCubic")((t - a.t) / Math.max(1e-6, b.t - a.t));
+    return { pos: mix3(a.pos, b.pos, u), look: mix3(a.look, b.look, u) };
+  }
+  return ks[ks.length - 1];
+}
+
+/**
+ * 점토 세트 — 하늘색 점토 매트가 둥근 벽으로 이어지는 작은 탁상, 왼쪽 위 큰 창빛과 부드러운 그림자, 뒤에서 가장자리를 짚는 빛.
+ * 카메라는 세트를 비스듬히 내려다보고 박에 맞춘 키로만 움직인다
+ */
+export function clayStage(el: HTMLElement, o: { ctx: SceneCtx; shots: Shot[]; fov?: number }): ((t: number) => void) & Stage3D {
+  const { ctx } = o;
+  const shots = [...o.shots].sort((a, b) => a.from - b.from);
+  const shotAt = (t: number) => shots.find((x) => t >= x.from && t < x.to) ?? shots[shots.length - 1];
+  const stage = stage3d(el, {
+    ctx,
+    fov: o.fov ?? 34,
+    fog: [30, 70],
+    exposure: 1.05,
+    shot(t, cam) {
+      const p = camAt(t, shotAt(t).keys);
+      cam.position.set(...p.pos);
+      cam.lookAt(...p.look);
+    },
+  });
+  const floor = new THREE.Mesh(new THREE.PlaneGeometry(400, 400), new THREE.MeshStandardMaterial({ color: color(ctx, "mat"), roughness: 0.95, metalness: 0, bumpMap: clayBump(), bumpScale: 0.8 }));
+  (floor.material.bumpMap as THREE.Texture).repeat.set(1, 1);
+  floor.rotation.x = -Math.PI / 2;
+  floor.receiveShadow = true;
+  stage.scene.add(floor);
+  stage.scene.add(new THREE.HemisphereLight(0xffffff, color(ctx, "mat"), 1.25));
+  const key = new THREE.DirectionalLight(0xfff1e0, 2.4);
+  key.castShadow = true;
+  key.shadow.mapSize.set(1024, 1024);
+  Object.assign(key.shadow.camera, { left: -11, right: 11, top: 11, bottom: -11, near: 1, far: 60 });
+  key.shadow.bias = -0.0006;
+  key.shadow.normalBias = 0.03;
+  key.shadow.radius = 6;
+  stage.scene.add(key);
+  const rim = new THREE.DirectionalLight(color(ctx, "rim"), 0.9);
+  stage.scene.add(rim);
+  return Object.assign((t: number) => {
+    // 빛이 지금 컷의 세트를 따라간다
+    const [lx, , lz] = shotAt(t).keys[0].look;
+    key.position.set(lx - 6, 12, lz + 7);
+    key.target.position.set(lx, 0, lz);
+    key.target.updateMatrixWorld();
+    rim.position.set(lx + 4, 6, lz - 10);
+    rim.target.position.set(lx, 1, lz);
+    rim.target.updateMatrixWorld();
+    stage.paint(t);
+  }, stage);
+}
+
+/**
+ * 모델 = 점토 덩어리. at 에 위에서 떨어져 털썩 앉고(눌렸다 출렁), hits 마다 요청을 받아 다시 눌린다.
+ * grow(t) 를 주면 크기가 값을 따라 부푼다
+ */
+export function clayBlob(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; r?: number; tone?: string; at?: number; hits?: readonly number[]; seed?: string; grow?: (t: number) => number }): (t: number) => void {
+  const { ctx } = o;
+  const r = o.r ?? 1;
+  const geo = lumpy(new THREE.SphereGeometry(1, 40, 28), o.seed ?? `blob:${o.pos.join(",")}`, 0.06);
+  geo.scale(1, 0.82, 1);
+  geo.translate(0, 0.7, 0);
+  const body = shade(new THREE.Mesh(geo, clayMat(ctx, o.tone ?? "clay")));
+  const g = new THREE.Group();
+  g.add(body);
+  g.position.set(...o.pos);
+  stage.scene.add(g);
+  const at = o.at ?? 0;
+  const land = at + 0.26;
+  const hits = [land, ...(o.hits ?? [])];
+  return (t) => {
+    g.visible = t >= at;
+    if (!g.visible) return;
+    const f = fall(t, at);
+    g.position.y = o.pos[1] + (1 - f) * 4;
+    const stretch = f < 1 ? 0.18 * f : 0;
+    press(g, t < land ? -stretch : squish(t, hits, t < land + 1.1 ? 0.4 : 0.3), r * (o.grow?.(t) ?? 1));
+  };
+}
+
+/**
+ * 요청 = 빨강 점토 공. times 마다 하나가 from 에서 to 로 포물선을 그리며 튀어 간다 — 날 땐 길쭉, 닿으면 납작하게 꾹 붙어
+ * 덩어리 속으로 스며든다. rest 면 닿은 자리에 남아 쌓인다(셈·더미)
+ */
+export function clayBall(stage: Stage3D, o: { ctx: SceneCtx; from: V3 | ((i: number) => V3); to: V3 | ((i: number) => V3); times: readonly number[]; dur?: number; hop?: number; r?: number; tone?: string; rest?: boolean; cube?: boolean }): (t: number) => void {
+  const { ctx } = o;
+  const r = o.r ?? 0.26;
+  const geo = o.cube ? lumpy(new THREE.BoxGeometry(1.5, 1.5, 1.5, 6, 6, 6), "cube", 0.05) : lumpy(new THREE.SphereGeometry(1, 18, 14), "ball", 0.05);
+  const mat = clayMat(ctx, o.tone ?? "request");
+  const dur = o.dur ?? 0.45;
+  const hop = o.hop ?? 1.4;
+  const up = new THREE.Vector3(0, 1, 0);
+  const balls = o.times.map((s, i) => {
+    const m = shade(new THREE.Mesh(geo, mat));
+    const pivot = new THREE.Group();
+    pivot.add(m);
+    stage.scene.add(pivot);
+    const a = vec(typeof o.from === "function" ? o.from(i) : o.from);
+    const b = vec(typeof o.to === "function" ? o.to(i) : o.to);
+    return { s, pivot, m, a, b };
+  });
+  const at = (a: THREE.Vector3, b: THREE.Vector3, u: number) => new THREE.Vector3().lerpVectors(a, b, u).setY(a.y + (b.y - a.y) * u + hop * 4 * u * (1 - u) + r);
+  return (t) => {
+    for (const { s, pivot, m, a, b } of balls) {
+      const tau = t - s;
+      const gone = o.rest ? false : tau > dur + 0.22;
+      pivot.visible = tau >= 0 && !gone;
+      if (!pivot.visible) continue;
+      if (tau < dur) {
+        const u = tau / dur;
+        const p = at(a, b, u);
+        const q = at(a, b, Math.min(1, u + 0.02));
+        pivot.position.copy(p);
+        // 나는 동안 나는 쪽으로 길쭉 — 뜰 때와 내릴 때 가장 길다
+        const v = q.sub(p).normalize();
+        pivot.quaternion.setFromUnitVectors(up, v.lengthSq() > 0 ? v : up);
+        const st = 0.28 * (1 - Math.sin(Math.PI * u) * 0.6);
+        m.scale.set(r * (1 - st * 0.4), r * (1 + st), r * (1 - st * 0.4));
+        m.position.set(0, 0, 0);
+        continue;
+      }
+      // 닿았다 — 납작하게 눌리고(rest 면 그 자리에서 출렁이며 선다, 아니면 덩어리 속으로 스며든다)
+      pivot.quaternion.identity();
+      pivot.position.copy(b);
+      const k = tau - dur;
+      const s2 = o.rest ? squish(t, [s + dur], 0.5) : Math.min(0.6, k * 4);
+      const sink = o.rest ? 1 : 1 - clamp(k / 0.22);
+      m.position.set(0, r * (1 - s2) * sink, 0);
+      m.scale.set(r * (1 + s2 * 0.6) * sink, r * (1 - s2) * sink, r * (1 + s2 * 0.6) * sink);
+    }
+  };
+}
+
+/** 점들을 부드럽게 잇는 점토 띠 하나 — 굵기 r, 양 끝은 둥근 마개. 드러낸 몫 p 를 그리면서 머리 마개가 따라간다 */
+function rope(ctx: SceneCtx, pts: THREE.Vector3[], r: number, tone: string, closed = false) {
+  const curve = new THREE.CatmullRomCurve3(pts, closed, "centripetal", 0.5);
+  const len = curve.getLength();
+  const segs = Math.max(12, Math.min(260, Math.round((len / r) * 2.2)));
+  const radial = 10;
+  const mat = clayMat(ctx, tone);
+  const tube = shade(new THREE.Mesh(new THREE.TubeGeometry(curve, segs, r, radial, closed), mat));
+  const capGeo = new THREE.SphereGeometry(r, 12, 9);
+  const head = shade(new THREE.Mesh(capGeo, mat));
+  const tail = shade(new THREE.Mesh(capGeo, mat));
+  tail.position.copy(curve.getPointAt(0));
+  const g = new THREE.Group();
+  g.add(tube, head, tail);
+  return {
+    g,
+    len,
+    show(p: number) {
+      const k = clamp(p);
+      g.visible = k > 0;
+      tube.geometry.setDrawRange(0, Math.ceil(k * segs) * radial * 6);
+      head.position.copy(curve.getPointAt(Math.min(1, k)));
+      head.visible = !closed || k < 1;
+      tail.visible = !closed || k < 1;
+    },
+  };
+}
+
+/**
+ * 점토 띠 — 점들을 잇는 가래떡이 짜여 나오듯 늘어난다. 연결·경로·늘어나는 시간(지연 — linear 면 일정한 빠르기로 dur 초 동안).
+ * 끝에 닿은 뒤엔 hits 마다 띠가 한 번 출렁인다
+ */
+export function claySnake(stage: Stage3D, o: { ctx: SceneCtx; points: readonly V3[]; r?: number; tone?: string; at?: number; dur?: number; linear?: boolean; closed?: boolean; hits?: readonly number[] }): (t: number) => void {
+  const { ctx } = o;
+  const R = rope(ctx, o.points.map(vec), o.r ?? 0.16, o.tone ?? "clay", o.closed);
+  stage.scene.add(R.g);
+  const at = o.at ?? 0;
+  const dur = o.dur ?? 0.4;
+  return (t) => {
+    const u = clamp((t - at) / dur);
+    R.show(t < at ? 0 : o.linear ? u : ease.outCubic(u));
+    const s = squish(t, o.hits, 0.2);
+    R.g.scale.set(1, 1 - s * 0.6, 1 + s * 0.4);
+  };
+}
+
+/** 점토로 빚은 글자 묶음 하나 — 획마다 띠, 기준선 왼쪽 아래가 원점 */
+function word(ctx: SceneCtx, text: string, size: number, tone: string) {
+  const s = size / 2;
+  const r = 0.19 * s;
+  const g = new THREE.Group();
+  const parts: { show(p: number): void; len: number }[] = [];
+  let x = 0;
+  for (const ch of Array.from(text)) {
+    const gl = GLYPHS[ch];
+    if (!gl) {
+      x += 0.8 * s + 0.34 * s;
+      continue;
+    }
+    for (const st of gl.strokes) {
+      if ("dot" in st) {
+        const m = shade(new THREE.Mesh(lumpy(new THREE.SphereGeometry(st.r * s, 14, 10), `dot${ch}`, 0.04), clayMat(ctx, tone)));
+        m.position.set(x + st.dot[0] * s, st.dot[1] * s, 0);
+        g.add(m);
+        parts.push({ len: st.r * s * 4, show: (p) => (m.visible = p > 0) });
+        continue;
+      }
+      const R = rope(
+        ctx,
+        st.pts.map(([px, py]) => new THREE.Vector3(x + px * s, py * s, 0)),
+        r,
+        tone,
+        st.closed,
+      );
+      g.add(R.g);
+      parts.push({ len: R.len, show: R.show });
+    }
+    x += (gl.w + 0.34) * s;
+  }
+  const total = parts.reduce((a, p) => a + p.len, 0) || 1;
+  return {
+    g,
+    width: glyphWidth(text) * s,
+    show(p: number) {
+      let left = clamp(p) * total;
+      for (const part of parts) {
+        part.show(left <= 0 ? 0 : Math.min(1, left / part.len));
+        left -= part.len;
+      }
+    },
+  };
+}
+
+/**
+ * 점토 숫자 — 숫자·기호를 가래떡처럼 굽혀 빚는다(획을 따라 짜여 나온다). 기준선 왼쪽 아래가 pos.
+ * text 가 함수면 prints 시각마다 새 값을 다시 빚고, hits 마다 숫자 전체가 눌렸다 선다
+ */
+export function clayDigits(
+  stage: Stage3D,
+  o: { ctx: SceneCtx; text: string | ((t: number) => string); pos: V3; size?: number; tone?: string; at?: number; dur?: number; prints?: readonly number[]; hits?: readonly number[]; align?: "left" | "center" | "right"; lean?: number },
+): (t: number) => void {
+  const { ctx } = o;
+  const size = o.size ?? 2;
+  const text = typeof o.text === "function" ? o.text : () => o.text as string;
+  const root = new THREE.Group();
+  root.position.set(...o.pos);
+  root.rotation.x = o.lean ?? -0.12;
+  stage.scene.add(root);
+  const cache = new Map<string, ReturnType<typeof word>>();
+  const get = (s: string) => {
+    let w = cache.get(s);
+    if (!w) {
+      w = word(ctx, s, size, o.tone ?? "clay");
+      w.g.position.x = o.align === "center" ? -w.width / 2 : o.align === "right" ? -w.width : 0;
+      root.add(w.g);
+      cache.set(s, w);
+    }
+    return w;
+  };
+  const prints = [o.at ?? 0, ...(o.prints ?? [])].sort((a, b) => a - b);
+  const dur = o.dur ?? 0.36;
+  return (t) => {
+    root.visible = t >= prints[0];
+    if (!root.visible) return;
+    const cur = text(t);
+    const from = prints.filter((p) => p <= t).at(-1)!;
+    const w = get(cur);
+    for (const [k, other] of cache) other.g.visible = k === cur;
+    w.show((t - from) / dur);
+    const s = squish(t, o.hits, 0.28);
+    press(root, s);
+  };
+}
+
+/**
+ * 이름표 — 손바닥으로 눌러 편 크림 점토 판에 글을 꾹 찍었다. at 에 떨어져 털썩 앉고 hits 마다 눌린다.
+ * 줄바꿈(\n)이면 여러 줄. text 가 함수면 매 프레임 다시 그린다(같은 t 면 같은 판)
+ */
+export function clayTag(
+  stage: Stage3D,
+  o: { ctx: SceneCtx; text: string | ((t: number) => string); pos: V3; height?: number; at?: number; until?: number; hits?: readonly number[]; font?: Font; tone?: string; ink?: string; width?: number; lean?: number; px?: number },
+): (t: number) => void {
+  const { ctx } = o;
+  const H = o.height ?? 0.8;
+  const px = o.px ?? 120;
+  const family = ctx.style.fonts[o.font ?? "display"];
+  const weight = o.font === "display" || !o.font ? 400 : 700;
+  const font = `${weight} ${px}px ${family}`;
+  const text = typeof o.text === "function" ? o.text : () => o.text as string;
+  const probe = document.createElement("canvas").getContext("2d")!;
+  probe.font = font;
+  const sample = text(1e9);
+  const lines = sample.split("\n");
+  const textW = Math.max(...lines.map((l) => probe.measureText(l).width));
+  const ch = Math.ceil(lines.length * px * 1.18 + px * 0.6);
+  const cw = Math.ceil(o.width ? (o.width / H) * ch : textW + px * 0.9);
+  const W = (H * cw) / ch;
+  const c = document.createElement("canvas");
+  c.width = cw;
+  c.height = ch;
+  const tex = new THREE.CanvasTexture(c);
+  tex.colorSpace = THREE.SRGBColorSpace;
+  tex.anisotropy = 4;
+  const inkCol = hex(ctx, o.ink ?? "ink");
+  const draw = (s: string) => {
+    const g = c.getContext("2d")!;
+    g.clearRect(0, 0, cw, ch);
+    g.font = font;
+    g.textAlign = "center";
+    g.textBaseline = "middle";
+    const ls = s.split("\n");
+    ls.forEach((l, i) => {
+      const y = ch / 2 + (i - (ls.length - 1) / 2) * px * 1.18 + px * 0.04;
+      // 꾹 눌러 찍은 자국 — 아래 오른쪽에 밝은 턱
+      g.fillStyle = "rgba(255,255,255,0.55)";
+      g.fillText(l, cw / 2 + px * 0.025, y + px * 0.035);
+      g.fillStyle = inkCol;
+      g.fillText(l, cw / 2, y);
+    });
+    tex.needsUpdate = true;
+  };
+  const r = Math.min(W, H) * 0.32;
+  const depth = H * 0.16;
+  const slabGeo = new THREE.ExtrudeGeometry(roundRectShape(W, H, r), { depth, bevelEnabled: true, bevelThickness: depth * 0.5, bevelSize: Math.min(W, H) * 0.07, bevelSegments: 4, curveSegments: 10 });
+  slabGeo.translate(0, H / 2, 0);
+  const slab = shade(new THREE.Mesh(slabGeo, clayMat(ctx, o.tone ?? "plaque")));
+  const face = new THREE.Mesh(new THREE.PlaneGeometry(W, H), new THREE.MeshStandardMaterial({ map: tex, transparent: true, roughness: 0.9, metalness: 0, depthWrite: false }));
+  face.position.set(0, H / 2, depth + depth * 0.5 + 0.004);
+  const card = new THREE.Group();
+  card.add(slab, face);
+  card.rotation.x = o.lean ?? -0.22;
+  const g = new THREE.Group();
+  g.add(card);
+  g.position.set(...o.pos);
+  stage.scene.add(g);
+  const at = o.at ?? 0;
+  const land = at + 0.22;
+  let last = "";
+  return (t) => {
+    g.visible = t >= at && (o.until === undefined || t < o.until);
+    if (!g.visible) return;
+    const s = text(t);
+    if (typeof o.text === "function" || s !== last) draw(s);
+    last = s;
+    g.position.y = o.pos[1] + (1 - fall(t, at, 0.22)) * 2.6;
+    press(g, t < land ? -0.12 : squish(t, [land, ...(o.hits ?? [])], 0.26));
+  };
+}
+
+/**
+ * 한 주소 = 점토 깔때기. 어디서 오든 요청(공)이 위 입으로 들어가 아래 한 구멍으로 나온다.
+ * hits 마다 몸통이 꿀꺽 눌렸다 선다
+ */
+export function clayFunnel(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; r?: number; h?: number; tone?: string; at?: number; hits?: readonly number[] }): (t: number) => void {
+  const { ctx } = o;
+  const R = o.r ?? 1.3;
+  const H = o.h ?? 1.9;
+  const prof = [
+    [0.26, 0],
+    [0.3, 0.05],
+    [0.3, 0.45],
+    [0.42, 0.62],
+    [R * 0.72, 0.95 * H],
+    [R, H],
+    [R * 1.08, H * 1.04],
+    [R * 1.02, H * 1.08],
+    [R * 0.9, H * 1.02],
+    [0.36, 0.62],
+    [0.2, 0.45],
+    [0.2, 0.05],
+  ].map(([x, y]) => new THREE.Vector2(x, y));
+  const geo = new THREE.LatheGeometry(prof, 36);
+  const body = shade(new THREE.Mesh(geo, clayMat(ctx, o.tone ?? "plaque")));
+  const g = new THREE.Group();
+  g.add(body);
+  g.position.set(...o.pos);
+  stage.scene.add(g);
+  const at = o.at ?? 0;
+  const land = at + 0.26;
+  return (t) => {
+    g.visible = t >= at;
+    if (!g.visible) return;
+    g.position.y = o.pos[1] + (1 - fall(t, at)) * 4;
+    press(g, t < land ? -0.12 : squish(t, [land, ...(o.hits ?? [])], 0.22));
+  };
+}
+
+/**
+ * 점토 파이 — n 조각(하루 24시간·몫). 조각이 차례로 떨어져 둥글게 모이고, press(i, t) 만큼 조각이 눌려 낮아진다
+ * (값이 내린 칸 = 눌린 칸). 눌리는 순간 그 조각이 출렁인다
+ */
+export function clayPie(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; r?: number; h?: number; n?: number; tone: (i: number) => string; at?: number; press?: (i: number, t: number) => number; pressAt?: (i: number) => number | null }): (t: number) => void {
+  const { ctx } = o;
+  const n = o.n ?? 24;
+  const R = o.r ?? 2.6;
+  const H = o.h ?? 0.7;
+  const g = new THREE.Group();
+  g.position.set(...o.pos);
+  stage.scene.add(g);
+  const step = (Math.PI * 2) / n;
+  const wedges = Array.from({ length: n }, (_, i) => {
+    // 00 이 화면 안쪽(뒤 가운데), 시계 방향
+    const a0 = Math.PI - (i + 1) * step;
+    const geo = new THREE.CylinderGeometry(R, R, H, 5, 1, false, a0 + step * 0.04, step * 0.92);
+    geo.translate(0, H / 2, 0);
+    const m = shade(new THREE.Mesh(geo, clayMat(ctx, o.tone(i))));
+    const mid = a0 + step / 2;
+    const off = new THREE.Vector3(Math.sin(mid) * 0.06, 0, Math.cos(mid) * 0.06);
+    m.position.copy(off);
+    const w = new THREE.Group();
+    w.add(m);
+    g.add(w);
+    return w;
+  });
+  const at = o.at ?? 0;
+  return (t) => {
+    g.visible = t >= at;
+    if (!g.visible) return;
+    wedges.forEach((w, i) => {
+      const a = at + i * 0.018;
+      w.visible = t >= a;
+      w.position.y = (1 - fall(t, a, 0.2)) * 2.4;
+      const p = clamp(o.press?.(i, t) ?? 0);
+      const pa = o.pressAt?.(i);
+      press(w, squish(t, [a + 0.2, ...(pa !== null && pa !== undefined ? [pa] : [])], 0.25), 1, 1 - 0.68 * p);
+    });
+  };
+}
+
+/**
+ * 점토 기둥 — 값만큼 위로 늘어난다(height(t), 늘어날 땐 길게 넘쳤다 앉는다). 값이 내리면 눌려 낮아진다. hits 마다 꼭대기가 눌린다
+ */
+export function clayBar(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; r?: number; height: (t: number) => number; tone?: string; at?: number; hits?: readonly number[]; seed?: string }): (t: number) => void {
+  const { ctx } = o;
+  const r = o.r ?? 0.5;
+  const mat = clayMat(ctx, o.tone ?? "clay");
+  const bodyGeo = lumpy(new THREE.CylinderGeometry(1, 1.04, 1, 28, 6), o.seed ?? `bar:${o.pos.join(",")}`, 0.03);
+  bodyGeo.translate(0, 0.5, 0);
+  const body = shade(new THREE.Mesh(bodyGeo, mat));
+  const cap = shade(new THREE.Mesh(lumpy(new THREE.SphereGeometry(1, 28, 12, 0, Math.PI * 2, 0, Math.PI / 2), `${o.seed ?? "bar"}:cap`, 0.03), mat));
+  const g = new THREE.Group();
+  g.add(body, cap);
+  g.position.set(...o.pos);
+  stage.scene.add(g);
+  const at = o.at ?? 0;
+  return (t) => {
+    g.visible = t >= at;
+    if (!g.visible) return;
+    const s = squish(t, o.hits, 0.22);
+    // 둥근 꼭대기까지 쳐서 전체 높이가 값 — 낮은 기둥은 꼭대기도 낮게 눌린다
+    const H = Math.max(0.02, o.height(t)) * (1 - s);
+    const w = r * (1 + s * 0.5);
+    const capH = Math.min(r * 0.55, H * 0.45);
+    body.scale.set(w, Math.max(0.001, H - capH), w);
+    cap.scale.set(w, capH, w);
+    cap.position.y = H - capH;
+  };
+}
+
+/**
+ * 드롭 — 쿵. 가운데서 점토 물결 고리가 바닥을 따라 퍼지고, 점토 알갱이가 튀어 올랐다 떨어져 납작하게 붙는다.
+ * 카메라가 한 번 흔들린다(dropBurst — 섬광은 쓰지 않는다)
+ */
+export function claySplat(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; drop?: number; count?: number; seed?: string; tones?: string[] }): (t: number) => void {
+  const { ctx } = o;
+  const at = ctx.beats.drop(o.drop ?? 0);
+  const seed = o.seed ?? "splat";
+  const tones = o.tones ?? ["request", "clay"];
+  const ringGeo = new THREE.TorusGeometry(1, 0.16, 10, 64);
+  ringGeo.rotateX(Math.PI / 2);
+  const ring = shade(new THREE.Mesh(ringGeo, clayMat(ctx, tones[1] ?? "clay")));
+  ring.position.set(o.pos[0], 0.02, o.pos[2]);
+  stage.scene.add(ring);
+  const ballGeo = lumpy(new THREE.SphereGeometry(1, 14, 10), "pellet", 0.06);
+  const mats = tones.map((k) => clayMat(ctx, k));
+  const bits = Array.from({ length: o.count ?? 22 }, (_, i) => {
+    const m = shade(new THREE.Mesh(ballGeo, mats[i % mats.length]));
+    stage.scene.add(m);
+    const a = rand(seed, i * 3) * Math.PI * 2;
+    const d = 3 + rand(seed, i * 3 + 1) * 5;
+    return { m, dir: [Math.cos(a) * d, Math.sin(a) * d * 0.6] as [number, number], up: 2.2 + rand(seed, i * 3 + 2) * 2.6, r: 0.14 + rand(seed, i * 3 + 2) * 0.16, fly: 0.42 + rand(seed, i * 3) * 0.2 };
+  });
+  return (t) => {
+    const s = dropBurst(t, { beats: ctx.beats, drop: o.drop ?? 0, rules: ctx.style.motion, scene: ctx.id, source: "claySplat" });
+    const cam = stage.camera;
+    cam.position.x += (s.shake.x ?? 0) * 0.004;
+    cam.position.y += (s.shake.y ?? 0) * 0.004;
+    const u = t - at;
+    ring.visible = u >= 0 && u < 0.7;
+    if (ring.visible) {
+      const k = ease.outCubic(clamp(u / 0.7));
+      const R = 0.6 + k * 5;
+      ring.scale.set(R, 1 - k * 0.7, R);
+    }
+    for (const b of bits) {
+      b.m.visible = u >= 0 && u < b.fly + 0.9;
+      if (!b.m.visible) continue;
+      if (u < b.fly) {
+        const k = u / b.fly;
+        b.m.position.set(o.pos[0] + b.dir[0] * k, o.pos[1] + b.up * 4 * k * (1 - k) + b.r, o.pos[2] + b.dir[1] * k);
+        b.m.scale.setScalar(b.r);
+      } else {
+        // 바닥에 털썩 — 납작하게 붙었다 서서히 스며든다
+        const k = clamp((u - b.fly) / 0.12);
+        const fade = 1 - clamp((u - b.fly - 0.5) / 0.4);
+        b.m.position.set(o.pos[0] + b.dir[0], b.r * (1 - 0.6 * k) * fade, o.pos[2] + b.dir[1]);
+        b.m.scale.set(b.r * (1 + 0.7 * k) * fade, b.r * (1 - 0.6 * k) * fade, b.r * (1 + 0.7 * k) * fade);
+      }
+    }
+  };
+}

package/themes/clay-toy/glyphs.ts

@@ -0,0 +1,32 @@
+// 점토 띠를 굽혀 쓴 숫자·기호 — 글자 하나는 높이 2 상자 안의 획 몇 개(점들을 부드럽게 잇는다). 폭은 글자마다
+export type Stroke = { pts: [number, number][]; closed?: boolean } | { dot: [number, number]; r: number };
+export interface Glyph {
+  w: number;
+  strokes: Stroke[];
+}
+
+const line = (...pts: [number, number][]): Stroke => ({ pts });
+const loop = (...pts: [number, number][]): Stroke => ({ pts, closed: true });
+const dot = (x: number, y: number, r = 0.17): Stroke => ({ dot: [x, y], r });
+
+export const GLYPHS: Record<string, Glyph> = {
+  "0": { w: 1, strokes: [loop([0.5, 2], [0.93, 1.62], [1, 1], [0.93, 0.38], [0.5, 0], [0.07, 0.38], [0, 1], [0.07, 1.62])] },
+  "1": { w: 0.72, strokes: [line([0.08, 1.62], [0.48, 2], [0.48, 0])] },
+  "2": { w: 1, strokes: [line([0.06, 1.52], [0.32, 1.92], [0.62, 1.98], [0.92, 1.66], [0.86, 1.22], [0.06, 0.04], [0.98, 0.04])] },
+  "3": { w: 1, strokes: [line([0.08, 1.74], [0.5, 2], [0.9, 1.7], [0.82, 1.22], [0.42, 1.06], [0.86, 0.9], [0.96, 0.44], [0.56, 0], [0.06, 0.24])] },
+  "4": { w: 1, strokes: [line([0.74, 0], [0.74, 2], [0.02, 0.62], [1, 0.62])] },
+  "5": { w: 1, strokes: [line([0.92, 2], [0.16, 2], [0.08, 1.12], [0.56, 1.24], [0.96, 0.84], [0.86, 0.18], [0.44, 0], [0.04, 0.22])] },
+  "6": { w: 1, strokes: [line([0.86, 1.9], [0.46, 2], [0.1, 1.52], [0.02, 0.8], [0.2, 0.1], [0.6, 0], [0.96, 0.42], [0.86, 0.96], [0.44, 1.1], [0.04, 0.76])] },
+  "7": { w: 1, strokes: [line([0.04, 2], [0.96, 2], [0.34, 0])] },
+  "8": { w: 1, strokes: [line([0.5, 1.06], [0.12, 1.46], [0.5, 2], [0.88, 1.46], [0.5, 1.06], [0.05, 0.54], [0.5, 0], [0.95, 0.54], [0.5, 1.06])] },
+  "9": { w: 1, strokes: [line([0.96, 1.26], [0.56, 0.94], [0.1, 1.2], [0.14, 1.8], [0.56, 2], [0.96, 1.6], [0.96, 0.6], [0.6, 0], [0.14, 0.12])] },
+  ".": { w: 0.42, strokes: [dot(0.2, 0.17, 0.2)] },
+  ":": { w: 0.42, strokes: [dot(0.2, 0.3, 0.19), dot(0.2, 1.3, 0.19)] },
+  "-": { w: 0.8, strokes: [line([0.06, 0.95], [0.74, 0.95])] },
+  "%": { w: 1.1, strokes: [loop([0.25, 2], [0.45, 1.68], [0.25, 1.36], [0.05, 1.68]), line([0.98, 2], [0.12, 0]), loop([0.85, 0.64], [1.05, 0.32], [0.85, 0], [0.65, 0.32])] },
+  $: { w: 1, strokes: [line([0.9, 1.64], [0.5, 1.84], [0.1, 1.6], [0.2, 1.14], [0.8, 0.86], [0.9, 0.36], [0.5, 0.14], [0.08, 0.36]), line([0.5, 2.2], [0.5, -0.2])] },
+  "×": { w: 0.9, strokes: [line([0.08, 1.38], [0.82, 0.58]), line([0.82, 1.38], [0.08, 0.58])] },
+  " ": { w: 0.5, strokes: [] },
+};
+
+export const glyphWidth = (s: string, gap = 0.34): number => Array.from(s).reduce((a, ch) => a + (GLYPHS[ch]?.w ?? 0.8) + gap, 0) - gap;

package/themes/clay-toy/sample/assets/og/logo.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1140 650" width="1140" height="650" fill="none" role="img" aria-label="OpenGateway">
+  <title>OpenGateway</title>
+  <g id="logo" stroke="currentColor" fill="currentColor">
+    <rect id="node-in" x="36" y="36" width="420" height="578" rx="89" fill="none" stroke-width="72"/>
+    <rect id="bar-in" x="72" y="272" width="277" height="106" stroke="none"/>
+    <path id="node-out" d="M684 213 L684 125 A89 89 0 0 1 773 36 L1015 36 A89 89 0 0 1 1104 125 L1104 525 A89 89 0 0 1 1015 614 L773 614 A89 89 0 0 1 684 525 L684 436" fill="none" stroke-width="72" stroke-linecap="butt"/>
+    <g id="arrow">
+      <rect id="arrow-shaft" x="420" y="272" width="394" height="106" stroke="none"/>
+      <path id="arrow-head" d="M833 220 L970 325 L833 430 Z" stroke-width="38" stroke-linejoin="round"/>
+    </g>
+  </g>
+</svg>