kasaframe 0.1.1 → 0.1.4

package/themes/origami-fold/effects.ts

@@ -0,0 +1,535 @@
+import { clamp, ease, rand, toEase, type EaseName, type SceneCtx } from "@kasaframe/core";
+import { dropBurst } from "@kasaframe/motion";
+import { stage3d, THREE, type Stage3D } from "@kasaframe/themes/stage3d";
+
+type V3 = [number, number, number];
+type Font = "display" | "sans" | "mono";
+type Draw = (g: CanvasRenderingContext2D, W: number, H: number) => void;
+
+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 settle = (t: number, at: number, dur: number) => (t < at ? 0 : ease.outCubic(clamp((t - at) / dur)));
+
+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];
+}
+
+function matTexture(ctx: SceneCtx): THREE.CanvasTexture {
+  // 1 칸 = 128px = 세계 1 단위. 반 칸마다 가는 선, 두 칸마다 굵은 선 — 커팅 매트의 눈금
+  const c = document.createElement("canvas");
+  c.width = c.height = 512;
+  const g = c.getContext("2d")!;
+  g.fillStyle = hex(ctx, "bg");
+  g.fillRect(0, 0, 512, 512);
+  for (let i = 0; i <= 8; i++) {
+    const major = i % 4 === 0;
+    g.fillStyle = hex(ctx, major ? "line" : "matline");
+    const w = major ? 4 : 2;
+    g.fillRect(i * 64 - w / 2, 0, w, 512);
+    g.fillRect(0, i * 64 - w / 2, 512, w);
+  }
+  const tex = new THREE.CanvasTexture(c);
+  tex.colorSpace = THREE.SRGBColorSpace;
+  tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
+  tex.repeat.set(100, 100);
+  tex.anisotropy = 8;
+  return tex;
+}
+
+/** 공작 탁자 — 초록 커팅 매트(눈금은 서 있다), 왼쪽 위 빛 하나와 또렷한 그림자. 카메라는 탁자를 비스듬히 내려다보고 박에 맞춘 키로만 움직인다 */
+export function paperStage(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 ?? 38,
+    exposure: 1.05,
+    shot(t, cam) {
+      const p = camAt(t, shotAt(t).keys);
+      cam.position.set(...p.pos);
+      cam.lookAt(...p.look);
+    },
+  });
+  stage.scene.add(stage.camera);
+  const mat = new THREE.Mesh(new THREE.PlaneGeometry(400, 400), new THREE.MeshStandardMaterial({ map: matTexture(ctx), roughness: 0.95, metalness: 0 }));
+  mat.rotation.x = -Math.PI / 2;
+  mat.receiveShadow = true;
+  stage.scene.add(mat);
+  stage.scene.add(new THREE.HemisphereLight(0xffffff, color(ctx, "bg"), 1.15));
+  const key = new THREE.DirectionalLight(0xfff3e2, 2.5);
+  key.castShadow = true;
+  key.shadow.mapSize.set(1024, 1024);
+  Object.assign(key.shadow.camera, { left: -12, right: 12, top: 12, bottom: -12, near: 1, far: 60 });
+  key.shadow.bias = -0.0005;
+  key.shadow.normalBias = 0.02;
+  stage.scene.add(key);
+  return Object.assign((t: number) => {
+    // 빛과 매트가 지금 컷의 세트를 따라간다 — 매트는 눈금 네 칸 단위로만 옮겨 눈금이 서 있다
+    const [lx, , lz] = shotAt(t).keys[0].look;
+    mat.position.set(Math.round(lx / 4) * 4, 0, Math.round(lz / 4) * 4);
+    key.position.set(lx - 7, 13, lz + 8);
+    key.target.position.set(lx, 0, lz);
+    key.target.updateMatrixWorld();
+    stage.paint(t);
+  }, stage);
+}
+
+const paperMat = (ctx: SceneCtx, k: string | THREE.Texture, side: THREE.Side = THREE.FrontSide) =>
+  new THREE.MeshStandardMaterial(typeof k === "string" ? { color: color(ctx, k), roughness: 0.92, metalness: 0, side } : { map: k, roughness: 0.92, metalness: 0, side });
+
+function remapUV(geo: THREE.BufferGeometry, [u0, u1, v0, v1]: [number, number, number, number]): void {
+  const uv = geo.attributes.uv as THREE.BufferAttribute;
+  for (let i = 0; i < uv.count; i++) uv.setXY(i, u0 + uv.getX(i) * (u1 - u0), v0 + uv.getY(i) * (v1 - v0));
+  uv.needsUpdate = true;
+}
+
+/** 종이 한 장 — 앞면(무늬·글)과 뒷면(종이 색)이 따로. XY 평면에서 +Z 를 본다 */
+function sheet(w: number, h: number, front: THREE.Material, back: THREE.Material, uv?: [number, number, number, number]): THREE.Group {
+  const g = new THREE.Group();
+  const geo = new THREE.PlaneGeometry(w, h);
+  if (uv) remapUV(geo, uv);
+  const f = new THREE.Mesh(geo, front);
+  const b = new THREE.Mesh(geo.clone(), back);
+  b.rotation.y = Math.PI;
+  b.position.z = -0.004;
+  for (const m of [f, b]) {
+    m.castShadow = true;
+    m.receiveShadow = true;
+  }
+  g.add(f, b);
+  return g;
+}
+
+/** 종이에 찍은 글·그림 — 세계 크기 w×h 에 맞춘 캔버스. draw 를 다시 부르면 다시 찍는다 */
+function printed(ctx: SceneCtx, w: number, h: number, paper: string) {
+  const k = Math.min(2048 / Math.max(w, h), 240);
+  const c = document.createElement("canvas");
+  c.width = Math.round(w * k);
+  c.height = Math.round(h * k);
+  const g = c.getContext("2d")!;
+  const tex = new THREE.CanvasTexture(c);
+  tex.colorSpace = THREE.SRGBColorSpace;
+  tex.anisotropy = 8;
+  const draw = (fn: Draw) => {
+    g.fillStyle = hex(ctx, paper);
+    g.fillRect(0, 0, c.width, c.height);
+    fn(g, c.width, c.height);
+    tex.needsUpdate = true;
+  };
+  return { tex, draw };
+}
+
+/** 가운데 맞춘 글 한 줄 — 넘치면 줄여서 폭 안에 */
+function fitText(ctx: SceneCtx, g: CanvasRenderingContext2D, text: string, x: number, y: number, maxW: number, size: number, f: Font, ink: string): void {
+  const weight = f === "sans" ? 400 : 700;
+  g.font = `${weight} ${size}px ${ctx.style.fonts[f]}`;
+  const w = g.measureText(text).width;
+  const s = w > maxW ? (size * maxW) / w : size;
+  g.font = `${weight} ${s}px ${ctx.style.fonts[f]}`;
+  g.fillStyle = hex(ctx, ink);
+  g.textAlign = "center";
+  g.textBaseline = "middle";
+  g.fillText(text, x, y);
+}
+
+const cardPrint = (ctx: SceneCtx, text: string, sub: string | undefined, f: Font, ink: string): Draw => (g, W, H) => {
+  g.strokeStyle = hex(ctx, ink);
+  g.globalAlpha = 0.18;
+  g.lineWidth = Math.max(2, H * 0.012);
+  g.strokeRect(H * 0.06, H * 0.06, W - H * 0.12, H - H * 0.12);
+  g.globalAlpha = 1;
+  fitText(ctx, g, text, W / 2, sub ? H * 0.42 : H * 0.52, W * 0.86, H * (sub ? 0.34 : 0.46), f, ink);
+  if (sub) fitText(ctx, g, sub, W / 2, H * 0.76, W * 0.86, H * 0.17, "sans", ink);
+};
+
+/**
+ * 접힌 카드 = 펼치면 드러나는 정보 — 반으로 접힌 카드가 내려앉고(at 보다 조금 앞), at 에 오른쪽 장이 넘어가며 펼쳐져 안쪽에 찍힌 글이 드러난다.
+ * steps 면 그 박마다 다시 접혔다가(닫힌 동안 글이 바뀐다) 다시 펼쳐진다 — 같은 카드에 값만 바뀐다
+ */
+export function foldCard(
+  stage: Stage3D,
+  o: { ctx: SceneCtx; pos: V3; size: [number, number]; text: string; sub?: string; steps?: { at: number; text: string; sub?: string }[]; at: number; tone?: string; yaw?: number; font?: Font; ink?: string; draw?: Draw },
+): (t: number) => void {
+  const { ctx } = o;
+  const [w, h] = o.size;
+  const half = w / 2;
+  const ink = o.ink ?? "print";
+  const f = o.font ?? "display";
+  const page = printed(ctx, w, h, "paper");
+  const versions = [{ at: o.at, text: o.text, sub: o.sub }, ...(o.steps ?? [])].sort((a, b) => a.at - b.at);
+  const paint = (v: (typeof versions)[number]) => page.draw(o.draw ?? cardPrint(ctx, v.text, v.sub, f, ink));
+  // 값이 안 바뀌는 카드는 지을 때 한 번 찍는다. 바뀌는 카드는 매 프레임 찍는다 — 같은 t 를 두 번 그릴 때 둘째에 글 찍기가 빠지면 검사가 다른 화면으로 본다
+  paint(versions[0]);
+  const live = versions.length > 1;
+  const group = new THREE.Group();
+  group.position.set(...o.pos);
+  group.rotation.y = o.yaw ?? 0;
+  // 한 장에 찍은 안쪽 펼침면을 두 장이 반씩 나눠 받는다(UV)
+  const left = sheet(half, h, paperMat(ctx, page.tex), paperMat(ctx, o.tone ?? "indigo"), [0, 0.5, 0, 1]);
+  left.rotation.x = -Math.PI / 2;
+  left.position.set(-half / 2, 0.006, 0);
+  const pivot = new THREE.Group();
+  const right = sheet(half, h, paperMat(ctx, page.tex), paperMat(ctx, o.tone ?? "indigo"), [0.5, 1, 0, 1]);
+  right.rotation.x = -Math.PI / 2;
+  right.position.set(half / 2, 0, 0);
+  pivot.add(right);
+  group.add(left, pivot);
+  stage.scene.add(group);
+  const later = versions.slice(1);
+  return (t) => {
+    const appear = o.at - 0.3;
+    group.visible = t >= appear;
+    if (!group.visible) return;
+    const drop = settle(t, appear, 0.24);
+    group.position.y = o.pos[1] + (1 - drop) * 1.4;
+    let closed = 1 - settle(t, o.at, 0.38);
+    // 박 하나 안에 접었다 편다 — 0.12초 접고 닫힌 채 0.05초 머물며 글을 바꾸고(바뀌는 순간은 안 보인다), 0.22초 편다.
+    // 머묾이 없으면 닫힌 모습이 한 프레임만 나와 깜빡임으로 읽힌다
+    for (const s of later) {
+      if (t >= s.at - 0.25 && t < s.at - 0.13) closed = ease.inOutCubic(clamp((t - s.at + 0.25) / 0.12));
+      else if (t >= s.at - 0.13 && t < s.at - 0.08) closed = 1;
+      else if (t >= s.at - 0.08) closed = 1 - ease.outCubic(clamp((t - s.at + 0.08) / 0.22));
+    }
+    if (live) paint([...versions].reverse().find((v) => t >= v.at - 0.1) ?? versions[0]);
+    pivot.rotation.z = Math.PI * closed;
+    pivot.position.y = 0.006 + 0.012 * closed;
+  };
+}
+
+/** 세우는 카드 = 이름표·값 — 바닥에 엎드려 있던 카드가 아래 접선을 축으로 일어선다(살짝 넘쳤다 선다). until 이면 다시 눕는다. text 가 함수면 매 프레임 다시 찍는다 */
+export function popUp(
+  stage: Stage3D,
+  o: { ctx: SceneCtx; pos: V3; size: [number, number]; text: string | ((t: number) => string); sub?: string; at: number; until?: number; tone?: string; ink?: string; font?: Font; yaw?: number },
+): (t: number) => void {
+  const { ctx } = o;
+  const [w, h] = o.size;
+  const tone = o.tone ?? "paper";
+  const card = printed(ctx, w, h, tone);
+  const ink = o.ink ?? "print";
+  const f = o.font ?? "display";
+  const draw = (text: string) => card.draw(cardPrint(ctx, text, o.sub, f, ink));
+  if (typeof o.text === "string") draw(o.text);
+  const group = new THREE.Group();
+  group.position.set(...o.pos);
+  group.rotation.y = o.yaw ?? 0;
+  const hinge = new THREE.Group();
+  const face = sheet(w, h, paperMat(ctx, card.tex), paperMat(ctx, tone));
+  face.position.y = h / 2;
+  hinge.add(face);
+  group.add(hinge);
+  stage.scene.add(group);
+  return (t) => {
+    const off = o.until === undefined ? 0 : settle(t, o.until, 0.25);
+    group.visible = t >= o.at && off < 1;
+    if (!group.visible) return;
+    if (typeof o.text === "function") draw(o.text(t));
+    const up = t < o.at ? 0 : ease.outBack(clamp((t - o.at) / 0.34));
+    hinge.rotation.x = -(Math.PI / 2) * (1 - up * (1 - off));
+  };
+}
+
+export interface Pleat {
+  (t: number): void;
+  /** 그 시각 끝(세운 막대면 꼭대기) 자리 — 값 카드가 따라간다 */
+  tip(t: number): THREE.Vector3;
+}
+
+/**
+ * 아코디언 접기 = 압축·할인 — 긴 종이 띠가 panels 칸으로 산·골을 번갈아 접힌다. keys 의 ratio 는 원래 길이의 몇 분의 1 인가(1 이면 평평, 10 이면 1/10).
+ * axis x 는 매트에 누운 띠(가로로 줄어든다), y 는 세운 막대(아래로 줄어든다). print 면 띠에 글을 찍는다
+ */
+export function pleatFold(
+  stage: Stage3D,
+  o: { ctx: SceneCtx; pos: V3; length: number; width: number; panels?: number; axis?: "x" | "y"; keys: { t: number; ratio: number; ease?: EaseName }[]; at?: number; until?: number; tone?: string; print?: { text: string; font?: Font; ink?: string }; yaw?: number },
+): Pleat {
+  const { ctx } = o;
+  const N = o.panels ?? 8;
+  const s = o.length / N;
+  const axis = o.axis ?? "x";
+  let material: THREE.Material;
+  if (o.print) {
+    const pr = o.print;
+    const p = axis === "x" ? printed(ctx, o.length, o.width, o.tone ?? "paper") : printed(ctx, o.width, o.length, o.tone ?? "paper");
+    p.draw((g, W, H) => fitText(ctx, g, pr.text, W / 2, H / 2, W * 0.9, Math.min(H, W) * 0.62, pr.font ?? "display", pr.ink ?? "print"));
+    material = paperMat(ctx, p.tex, THREE.DoubleSide);
+  } else material = paperMat(ctx, o.tone ?? "paper", THREE.DoubleSide);
+  const group = new THREE.Group();
+  group.position.set(...o.pos);
+  group.rotation.y = o.yaw ?? 0;
+  const panels = Array.from({ length: N }, (_, i) => {
+    const geo = axis === "x" ? new THREE.PlaneGeometry(s, o.width) : new THREE.PlaneGeometry(o.width, s);
+    remapUV(geo, axis === "x" ? [i / N, (i + 1) / N, 0, 1] : [0, 1, i / N, (i + 1) / N]);
+    if (axis === "x") geo.rotateX(-Math.PI / 2);
+    const m = new THREE.Mesh(geo, material);
+    m.castShadow = true;
+    m.receiveShadow = true;
+    group.add(m);
+    return m;
+  });
+  stage.scene.add(group);
+  const ks = [...o.keys].sort((a, b) => a.t - b.t);
+  const ratioAt = (t: number) => {
+    if (t <= ks[0].t) return ks[0].ratio;
+    for (let i = 1; i < ks.length; i++) {
+      if (t >= ks[i].t) continue;
+      const u = toEase(ks[i].ease ?? "inOutCubic")((t - ks[i - 1].t) / Math.max(1e-6, ks[i].t - ks[i - 1].t));
+      return ks[i - 1].ratio + (ks[i].ratio - ks[i - 1].ratio) * u;
+    }
+    return ks[ks.length - 1].ratio;
+  };
+  const geom = (t: number) => {
+    const phi = Math.acos(clamp(1 / Math.max(1, ratioAt(t)), 0, 1));
+    return { c: Math.cos(phi), sn: Math.sin(phi) };
+  };
+  return Object.assign(
+    (t: number) => {
+      group.visible = t >= (o.at ?? -1) && (o.until === undefined || t < o.until);
+      if (!group.visible) return;
+      const { c, sn } = geom(t);
+      panels.forEach((m, i) => {
+        const a0 = i * s * c;
+        const a1 = (i + 1) * s * c;
+        const b0 = i % 2 ? s * sn : 0;
+        const b1 = (i + 1) % 2 ? s * sn : 0;
+        if (axis === "x") {
+          m.position.set((a0 + a1) / 2, 0.006 + (b0 + b1) / 2, 0);
+          m.rotation.set(0, 0, Math.atan2(b1 - b0, a1 - a0));
+        } else {
+          m.position.set(0, (a0 + a1) / 2, (b0 + b1) / 2);
+          m.rotation.set(Math.atan2(b1 - b0, a1 - a0), 0, 0);
+        }
+      });
+    },
+    {
+      tip: (t: number) => {
+        const { c, sn } = geom(t);
+        const along = N * s * c;
+        const off = N % 2 ? s * sn : 0;
+        const v = axis === "x" ? new THREE.Vector3(along, off, 0) : new THREE.Vector3(0, along, off);
+        return v.applyAxisAngle(new THREE.Vector3(0, 1, 0), o.yaw ?? 0).add(new THREE.Vector3(...o.pos));
+      },
+    },
+  );
+}
+
+function planeGeometry(): THREE.BufferGeometry {
+  // 다트 비행기 — 앞이 +Z(lookAt 이 그쪽을 본다). 날개 둘과 용골 하나
+  const P = {
+    nose: [0, 0, 0.5],
+    tail: [0, 0, -0.5],
+    wl: [0.42, 0.07, -0.5],
+    wr: [-0.42, 0.07, -0.5],
+    keel: [0, -0.16, -0.45],
+  };
+  const tris = [P.nose, P.wl, P.tail, P.nose, P.tail, P.wr, P.nose, P.keel, P.tail].flat();
+  const g = new THREE.BufferGeometry();
+  g.setAttribute("position", new THREE.Float32BufferAttribute(tris, 3));
+  g.computeVertexNormals();
+  return g;
+}
+
+/**
+ * 종이비행기 = 요청 — from 에서 to 로 휜 길을 날아가 앉는다(stay) 또는 날아가 버린다. 앞을 보고 날고 휘는 쪽으로 기운다.
+ * rest 면 날기 전에 from 에 앉아 있다
+ */
+export function paperPlane(stage: Stage3D, o: { ctx: SceneCtx; from: V3; to: V3; at: number; dur?: number; arc?: number; tone?: string; size?: number; rest?: boolean; stay?: boolean }): (t: number) => void {
+  const { ctx } = o;
+  const size = o.size ?? 0.9;
+  const m = new THREE.Mesh(planeGeometry(), new THREE.MeshStandardMaterial({ color: color(ctx, o.tone ?? "paper"), roughness: 0.9, side: THREE.DoubleSide, flatShading: true }));
+  m.castShadow = true;
+  m.scale.setScalar(size);
+  stage.scene.add(m);
+  const A = new THREE.Vector3(...o.from);
+  const B = new THREE.Vector3(...o.to);
+  const C = A.clone().lerp(B, 0.5).add(new THREE.Vector3(0, o.arc ?? A.distanceTo(B) * 0.3, 0));
+  const curve = new THREE.QuadraticBezierCurve3(A, C, B);
+  const dur = o.dur ?? 0.6;
+  const rest = 0.16 * size;
+  const side = Math.sign((B.x - A.x) * 0.3 + (B.z - A.z)) || 1;
+  const at = (u: number) => curve.getPoint(u);
+  return (t) => {
+    const k = (t - o.at) / dur;
+    if (k < 0) {
+      m.visible = !!o.rest;
+      if (!m.visible) return;
+      m.position.copy(A).setY(A.y + rest);
+      m.lookAt(B.x, A.y + rest, B.z);
+      return;
+    }
+    if (k >= 1) {
+      m.visible = !!o.stay;
+      if (!m.visible) return;
+      const tail = at(0.97);
+      m.position.copy(B).setY(B.y + rest);
+      m.lookAt(B.x + (B.x - tail.x), B.y + rest, B.z + (B.z - tail.z));
+      return;
+    }
+    m.visible = true;
+    const u = toEase("inOutQuad")(k);
+    const p = at(u);
+    const ahead = at(Math.min(1, u + 0.02));
+    m.position.copy(p).setY(Math.max(p.y, B.y) + rest);
+    m.lookAt(ahead.x, Math.max(ahead.y, B.y) + rest, ahead.z);
+    m.rotateZ(Math.sin(k * Math.PI) * 0.35 * side);
+  };
+}
+
+export interface Stack {
+  (t: number): void;
+  /** 그 시각까지 앉은 장 수 — 숫자가 같은 값을 센다 */
+  shown(t: number): number;
+  /** 더미 꼭대기 자리 */
+  top(t: number): THREE.Vector3;
+}
+
+/** 종이 더미 = 개수 — count 장이 위에서 한 장씩 떨어져 쌓인다(at 부터 dur 동안). tones 는 장마다 색(회사 색) */
+export function sheetStack(
+  stage: Stage3D,
+  o: { ctx: SceneCtx; pos: V3; count: number; at: number; dur: number; size?: [number, number]; thick?: number; tones?: string[] | ((i: number) => string); fall?: number; seed?: string },
+): Stack {
+  const { ctx } = o;
+  const [w, d] = o.size ?? [1.4, 1];
+  const th = o.thick ?? 0.05;
+  const seed = o.seed ?? "stack";
+  const mesh = new THREE.InstancedMesh(new THREE.BoxGeometry(w, th, d), new THREE.MeshStandardMaterial({ roughness: 0.92, metalness: 0 }), o.count);
+  mesh.castShadow = true;
+  mesh.receiveShadow = true;
+  mesh.frustumCulled = false;
+  const tone = (i: number) => (typeof o.tones === "function" ? o.tones(i) : (o.tones ?? ["paper"])[i % (o.tones?.length ?? 1)]);
+  for (let i = 0; i < o.count; i++) mesh.setColorAt(i, color(ctx, tone(i)));
+  stage.scene.add(mesh);
+  const land = (i: number) => o.at + (o.count > 1 ? (o.dur * i) / (o.count - 1) : 0);
+  const fall = o.fall ?? 2.4;
+  const m4 = new THREE.Matrix4();
+  const q = new THREE.Quaternion();
+  const up = new THREE.Vector3(0, 1, 0);
+  const one = new THREE.Vector3(1, 1, 1);
+  const zero = new THREE.Vector3(0, 0, 0);
+  const v = new THREE.Vector3();
+  return Object.assign(
+    (t: number) => {
+      for (let i = 0; i < o.count; i++) {
+        const L = land(i);
+        const k = (t - (L - 0.26)) / 0.26;
+        if (k < 0) {
+          mesh.setMatrixAt(i, m4.compose(v.set(...o.pos), q.identity(), zero));
+          continue;
+        }
+        const u = clamp(k);
+        const y = o.pos[1] + th * (i + 0.5) + fall * (1 - u * u);
+        const yaw = (rand(seed, i) - 0.5) * (0.12 + 0.8 * (1 - u));
+        q.setFromAxisAngle(up, yaw);
+        v.set(o.pos[0] + (rand(seed, i + 300) - 0.5) * 0.08, y, o.pos[2] + (rand(seed, i + 600) - 0.5) * 0.08);
+        mesh.setMatrixAt(i, m4.compose(v, q, one));
+      }
+      mesh.instanceMatrix.needsUpdate = true;
+    },
+    {
+      shown: (t: number) => {
+        let n = 0;
+        for (let i = 0; i < o.count; i++) if (t >= land(i)) n++;
+        return n;
+      },
+      top: (t: number) => {
+        let n = 0;
+        for (let i = 0; i < o.count; i++) if (t >= land(i)) n++;
+        return new THREE.Vector3(o.pos[0], o.pos[1] + th * n, o.pos[2]);
+      },
+    },
+  );
+}
+
+/**
+ * 드롭 — 네 날개로 접혀 있던 종이가 탁 펼쳐지며 안쪽에 찍힌 글(숫자)이 드러나고, 가운데서 종이비행기들이 사방으로 날아간다.
+ * 섬광·흔들림은 dropBurst(검사가 센다)
+ */
+export function foldBurst(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; size?: number; drop?: number; text?: string; tone?: string; planes?: number; seed?: string }): (t: number) => void {
+  const { ctx } = o;
+  const S = o.size ?? 7;
+  const c = S / 2;
+  const f = S / 4;
+  const page = printed(ctx, S, S, "paper");
+  page.draw((g, W, H) => {
+    if (o.text) fitText(ctx, g, o.text, W / 2, H * 0.52, W * 0.94, H * 0.42, "display", "print");
+  });
+  const back = paperMat(ctx, o.tone ?? "accent");
+  const front = paperMat(ctx, page.tex);
+  const part = (w: number, h: number, uv: [number, number, number, number]) => {
+    const s = sheet(w, h, front, back, uv);
+    s.rotation.x = -Math.PI / 2;
+    return s;
+  };
+  const group = new THREE.Group();
+  group.position.set(...o.pos);
+  const center = part(c, c, [0.25, 0.75, 0.25, 0.75]);
+  center.position.y = 0.006;
+  group.add(center);
+  // 날개 넷 — 먼 쪽(-Z, 캔버스 위)·가까운 쪽(+Z)·오른쪽(+X)·왼쪽(-X). 접힌 각은 가운데 위로 넘어간 자리
+  const flaps = [
+    { at: [0, 0, -c / 2] as V3, off: [0, 0, -f / 2] as V3, size: [c, f], uv: [0.25, 0.75, 0.75, 1] as [number, number, number, number], axis: "x", fold: Math.PI, lift: 0.012 },
+    { at: [0, 0, c / 2] as V3, off: [0, 0, f / 2] as V3, size: [c, f], uv: [0.25, 0.75, 0, 0.25] as [number, number, number, number], axis: "x", fold: -Math.PI, lift: 0.016 },
+    { at: [c / 2, 0, 0] as V3, off: [f / 2, 0, 0] as V3, size: [f, c], uv: [0.75, 1, 0.25, 0.75] as [number, number, number, number], axis: "z", fold: Math.PI, lift: 0.02 },
+    { at: [-c / 2, 0, 0] as V3, off: [-f / 2, 0, 0] as V3, size: [f, c], uv: [0, 0.25, 0.25, 0.75] as [number, number, number, number], axis: "z", fold: -Math.PI, lift: 0.024 },
+  ].map((fl, i) => {
+    const pivot = new THREE.Group();
+    pivot.position.set(...fl.at);
+    const s = part(fl.size[0], fl.size[1], fl.uv);
+    // 매트 바로 위 — 같은 높이면 펼친 날개가 매트와 깊이를 다툰다
+    s.position.set(fl.off[0], 0.006, fl.off[2]);
+    pivot.add(s);
+    group.add(pivot);
+    return { ...fl, pivot, i };
+  });
+  stage.scene.add(group);
+  const drop = o.drop ?? 0;
+  const tones = ["paper", "indigo", "mustard", "sakura", "kraft", "accent"];
+  const n = o.planes ?? 12;
+  const planes = Array.from({ length: n }, (_, i) => {
+    const a = (i / n) * Math.PI * 2 + rand(o.seed ?? "burst", i) * 0.4;
+    const to: V3 = [o.pos[0] + Math.cos(a) * 16, 0, o.pos[2] + Math.sin(a) * 12];
+    return paperPlane(stage, { ctx, from: [o.pos[0], 0.4, o.pos[2]], to, at: ctx.beats.drop(drop) + 0.04 + (i % 4) * 0.05, dur: 0.95, arc: 3 + (i % 3), tone: tones[i % tones.length], size: 0.8 });
+  });
+  const flash = document.createElement("div");
+  flash.style.cssText = `position:absolute;inset:0;background:${hex(ctx, "paper")};opacity:0;pointer-events:none;`;
+  stage.el.append(flash);
+  return (t) => {
+    const s = dropBurst(t, { beats: ctx.beats, drop, rules: ctx.style.motion, scene: ctx.id, source: "foldBurst" });
+    flash.style.opacity = String(Math.round(s.flash * 60) / 100);
+    const k = t - ctx.beats.drop(drop);
+    for (const fl of flaps) {
+      const open = settle(k, fl.i * 0.05, 0.28);
+      const a = fl.fold * (1 - open);
+      if (fl.axis === "x") fl.pivot.rotation.set(a, 0, 0);
+      else fl.pivot.rotation.set(0, 0, a);
+      fl.pivot.position.y = fl.lift * (1 - open);
+    }
+    for (const p of planes) p(t);
+    stage.camera.position.x += (s.shake.x ?? 0) * 0.02;
+    stage.camera.position.y += (s.shake.y ?? 0) * 0.02;
+  };
+}

package/themes/origami-fold/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>