kasaframe 0.1.1 → 0.1.4

package/themes/paper-cutout/effects.ts

@@ -0,0 +1,609 @@
+import { applyStyle, clamp, combine, ease, rand, randRange, type SceneCtx, type Style } from "@kasaframe/core";
+import { dropBurst, type DropBurstState } from "@kasaframe/motion";
+import { partial, type Pt } from "@kasaframe/themes/slotkit";
+
+export type { SceneCtx };
+
+export interface Rect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+const col = (ctx: SceneCtx, key: string): string => ctx.style.colors[key] ?? key;
+const mix = (c: string, a: number): string => `color-mix(in srgb, ${c} ${Math.round(clamp(a) * 100)}%, transparent)`;
+const px = (v: number): string => `${Math.round(v * 10) / 10}px`;
+const shadeOf = (ctx: SceneCtx): string => col(ctx, "shade");
+
+function div(doc: Document, css: string, parent?: HTMLElement): HTMLDivElement {
+  const d = doc.createElement("div");
+  d.style.cssText = `position:absolute;${css}`;
+  parent?.append(d);
+  return d;
+}
+
+// 빛은 위 왼쪽 한 방향 — 모든 종이가 오른쪽 아래로 드리워야 층의 위아래가 읽힌다(그림자 방향이 섞이면 깊이가 무너진다).
+// 높이 h(px)에 거리·흐림이 비례하고 높을수록 옅다. 붙은 종이도 1px 또렷한 닿음 선이 하나 있다
+function castShadow(h: number, shade: string, inset = false): string {
+  const d = Math.max(0, h);
+  const touch = clamp(1 - d / 8);
+  const far = clamp(0.34 - d * 0.0035, 0.14, 0.34) + (inset ? 0.2 : 0);
+  const i = inset ? "inset " : "";
+  const parts: string[] = [];
+  if (touch > 0.01) parts.push(`${i}0.6px 1px 1px ${mix(shade, 0.42 * touch)}`);
+  parts.push(`${i}${px(0.4 + d * 0.32)} ${px(0.8 + d * 0.56)} ${px(1.5 + d * 0.85)} ${mix(shade, far)}`);
+  // 오린 창의 아래·오른쪽 안 가장자리는 종이 단면이 빛을 받는다
+  if (inset) parts.push("inset -1px -1px 0 rgba(255, 255, 255, 0.55)");
+  return parts.join(", ");
+}
+
+// 종이결 한 장(256px 타일) — 고른 섬유와 티끌. 어떤 색 종이에 깔아도 되게 반투명, 서 있다(끓지 않는다)
+let grainUrl = "";
+function grain(doc: Document): string {
+  if (grainUrl) return grainUrl;
+  const S = 256;
+  const c = doc.createElement("canvas");
+  c.width = c.height = S;
+  const g = c.getContext("2d")!;
+  const im = g.createImageData(S, S);
+  for (let i = 0; i < S * S; i++) {
+    const v = rand("paper-grain", i);
+    const dark = v > 0.5;
+    const k = dark ? (v - 0.5) * 2 : (0.5 - v) * 2;
+    const p = i * 4;
+    im.data[p] = dark ? 70 : 255;
+    im.data[p + 1] = dark ? 50 : 255;
+    im.data[p + 2] = dark ? 30 : 250;
+    im.data[p + 3] = Math.round(k * k * k * (dark ? 34 : 30));
+  }
+  g.putImageData(im, 0, 0);
+  g.lineWidth = 0.8;
+  g.strokeStyle = "rgba(70, 50, 30, 0.10)";
+  g.beginPath();
+  for (let i = 0; i < 80; i++) {
+    const x = rand("paper-fiber", i * 4) * S;
+    const y = rand("paper-fiber", i * 4 + 1) * S;
+    const len = 8 + rand("paper-fiber", i * 4 + 2) * 24;
+    const a = rand("paper-fiber", i * 4 + 3) * Math.PI;
+    // 타일 이음매에서 섬유가 끊기지 않게 아홉 자리에 같이 긋는다
+    for (const ox of [-S, 0, S])
+      for (const oy of [-S, 0, S]) {
+        g.moveTo(x + ox, y + oy);
+        g.quadraticCurveTo(x + ox + Math.cos(a) * len * 0.5 + 4, y + oy + Math.sin(a) * len * 0.5 - 4, x + ox + Math.cos(a) * len, y + oy + Math.sin(a) * len);
+      }
+  }
+  g.stroke();
+  grainUrl = c.toDataURL("image/png");
+  return grainUrl;
+}
+
+/** 종이 면 CSS — 결을 화면 좌표에 맞춰(ox, oy) 깔아 오린 조각이 대지와 이음매 없이 맞는다 */
+const face = (doc: Document, color: string, ox = 0, oy = 0): string => `background:url("${grain(doc)}") ${-Math.round(ox)}px ${-Math.round(oy)}px / 256px 256px, ${color};`;
+
+const outline = (r: Rect, round = false): Pt[] => {
+  if (!round)
+    return [
+      [r.x, r.y],
+      [r.x + r.w, r.y],
+      [r.x + r.w, r.y + r.h],
+      [r.x, r.y + r.h],
+      [r.x, r.y],
+    ];
+  const cx = r.x + r.w / 2;
+  const cy = r.y + r.h / 2;
+  return Array.from({ length: 49 }, (_, i) => {
+    const a = -Math.PI * 0.75 + (i / 48) * Math.PI * 2;
+    return [cx + Math.cos(a) * (r.w / 2), cy + Math.sin(a) * (r.h / 2)] as Pt;
+  });
+};
+
+const pathD = (pts: readonly Pt[]): string => (pts.length < 2 ? "" : `M${pts.map((q) => `${q[0].toFixed(1)} ${q[1].toFixed(1)}`).join(" L")}`);
+
+// 오려 낸 조각이 손에 들려 걷혀 나간다 — 0.08초 들리고 0.22초에 화면 밖으로(0.3초 안 — 큰 층이 오래 미끄러지면 카메라 이동으로 읽힌다)
+function carry(k: number, seed: string | number, reach: number): { on: boolean; h: number; style: Style } {
+  if (k < 0) return { on: false, h: 2, style: {} };
+  if (k > 0.3) return { on: false, h: 2, style: {} };
+  const up = clamp(k / 0.08);
+  const go = ease.inCubic(clamp((k - 0.08) / 0.22));
+  const a = randRange(seed, 0, -0.5, 0.9);
+  const spin = randRange(seed, 1, -14, 14);
+  return {
+    on: true,
+    h: 2 + 30 * ease.outCubic(up),
+    style: { x: Math.cos(a) * reach * go, y: Math.sin(a) * reach * go, rotate: spin * go, scale: 1 + 0.06 * ease.outCubic(up) },
+  };
+}
+
+export interface Lift {
+  /** 그림자에 줄 높이(px) */
+  h: number;
+  /** 높이만큼 커진 꼴 — 위에서 보면 떠오른 종이가 조금 크다 */
+  style: Style;
+  /** 그 높이의 box-shadow·text-shadow 값(같은 꼴) */
+  shadow: string;
+  /** land 에서 at 전이면 false — 아직 놓이지 않았다 */
+  on: boolean;
+}
+
+/**
+ * 종이 높이 곡선. land: at 에 height 에서 떨어져 dur 초에 내려앉고 한 번 튄다 · raise: at 부터 천천히 들려 떠 있다 ·
+ * hop: 들렸다 다시 내려앉는다. 가벼운 종이라 오를 땐 느리게, 내릴 땐 빠르게
+ */
+export function lift(t: number, o: { at: number; mode?: "land" | "raise" | "hop"; height?: number; dur?: number; rest?: number; ctx?: SceneCtx; shade?: string }): Lift {
+  const H = o.height ?? 28;
+  const rest = o.rest ?? 2;
+  const dur = o.dur ?? 0.2;
+  const k = t - o.at;
+  const bounce = (d: number) => 6 * Math.exp(-d / 0.07) * Math.abs(Math.sin(d * 22));
+  let h = rest;
+  let on = true;
+  if ((o.mode ?? "land") === "land") {
+    if (k < 0) on = false;
+    else h = k < dur ? H - (H - rest) * (k / dur) ** 2 : rest + bounce(k - dur);
+  } else if (o.mode === "raise") {
+    h = k <= 0 ? rest : rest + (H - rest) * ease.outCubic(clamp(k / dur));
+  } else {
+    const upT = dur * 0.55;
+    if (k > 0) h = k < upT ? rest + (H - rest) * ease.outCubic(k / upT) : k < dur ? H - (H - rest) * ((k - upT) / (dur - upT)) ** 2 : rest + bounce(k - dur);
+  }
+  const shade = o.shade ?? (o.ctx ? shadeOf(o.ctx) : "#3B2615");
+  return { h, on, style: on ? { scale: 1 + (h - rest) * 0.0024 } : { opacity: 0 }, shadow: castShadow(h, shade) };
+}
+
+/** 대지 — 화면 전체 흰 수채화지. 서 있는 종이결만, 움직이지 않는다(움직임은 그 위 종이가 진다) */
+export function paperBoard(el: HTMLElement, o: { ctx: SceneCtx; color?: string }): (t: number) => void {
+  div(el.ownerDocument, `inset:0;${face(el.ownerDocument, col(o.ctx, o.color ?? "paper"))}`, el);
+  return () => {};
+}
+
+export interface SheetOpts {
+  ctx: SceneCtx;
+  /** 화면 px 자리. 없으면 el 을 꽉 채운다(패턴이 상자를 잡은 슬롯) */
+  rect?: Rect;
+  /** colors 키나 색. 기본 surface */
+  color?: string;
+  /** 놓인 높이(px) — 그림자 거리. 기본 2(붙은 종이) */
+  height?: number;
+  /** 놓이는 시각 — 그 전엔 없고 위에서 떨어져 내려앉는다 */
+  at?: number;
+  /** 떨어지기 시작하는 높이. 기본 32 */
+  drop?: number;
+  round?: boolean;
+  /** 종이 위에 붙일 것(오린 글자 따위) — 종이와 같이 움직인다 */
+  build?(face: HTMLElement): void;
+  /** 시각마다 높이(px)를 정한다 — 주면 at 대신 이 값(들림·깊이 바꾸기) */
+  lift?(t: number): number;
+  style?(t: number): Style;
+}
+
+/** 색종이 한 장 — 높이만큼 그림자를 드리우고, at 에 위에서 떨어져 내려앉는다 */
+export function paperSheet(el: HTMLElement, o: SheetOpts): (t: number) => void {
+  const doc = el.ownerDocument;
+  const r = o.rect;
+  const wrap = div(doc, r ? `left:${r.x}px;top:${r.y}px;width:${r.w}px;height:${r.h}px;` : "inset:0;", el);
+  const sheet = div(doc, `inset:0;${face(doc, col(o.ctx, o.color ?? "surface"), r?.x, r?.y)}${o.round ? "border-radius:50%;" : ""}`, wrap);
+  const content = div(doc, "inset:0;", wrap);
+  o.build?.(content);
+  const shade = shadeOf(o.ctx);
+  const rest = o.height ?? 2;
+  return (t) => {
+    let h = rest;
+    let s: Style = {};
+    if (o.lift) {
+      h = o.lift(t);
+      s = { scale: 1 + (h - rest) * 0.0024 };
+    } else if (o.at !== undefined) {
+      const L = lift(t, { at: o.at, height: o.drop ?? 32, rest, shade });
+      if (!L.on) {
+        wrap.style.display = "none";
+        return;
+      }
+      h = L.h;
+      s = L.style;
+    }
+    wrap.style.display = "";
+    sheet.style.boxShadow = castShadow(h, shade);
+    applyStyle(wrap, combine(s, o.style?.(t)));
+  };
+}
+
+export interface LetterOpts {
+  ctx: SceneCtx;
+  text: string;
+  at: number;
+  /** 글자 사이 떨어지는 간격(초). 기본 0.035 */
+  gap?: number;
+  /** colors 키나 색. 기본 ink */
+  color?: string;
+  /** 자리·글꼴(el 안 position:absolute 기준) */
+  css?: string;
+  /** 떨어지기 시작하는 높이. 기본 30 */
+  height?: number;
+  seed?: string | number;
+}
+
+/** 오린 글자 — 글자 한 장씩 위에서 떨어져 붙는다. 손으로 붙여 아주 조금 기울고, 붙은 뒤엔 1–2px 종이 그림자 */
+export function cutLetters(el: HTMLElement, o: LetterOpts): (t: number) => void {
+  const doc = el.ownerDocument;
+  const box = div(doc, `white-space:pre;line-height:1;color:${col(o.ctx, o.color ?? "ink")};${o.css ?? ""}`, el);
+  const seed = o.seed ?? `${o.ctx.id}:${o.text}`;
+  const chars = Array.from(o.text);
+  const spans = chars.map((ch) => {
+    const s = doc.createElement("span");
+    s.textContent = ch;
+    s.style.display = "inline-block";
+    s.style.whiteSpace = "pre";
+    box.append(s);
+    return s;
+  });
+  const gap = o.gap ?? 0.035;
+  const shade = shadeOf(o.ctx);
+  const tilt = chars.map((_, i) => randRange(seed, i, -1.4, 1.4));
+  const fall = chars.map((_, i) => randRange(seed, 100 + i, -9, 9));
+  return (t) => {
+    spans.forEach((s, i) => {
+      const at = o.at + i * gap;
+      const L = lift(t, { at, height: o.height ?? 30, dur: 0.16, shade });
+      s.style.visibility = L.on ? "visible" : "hidden";
+      if (!L.on) return;
+      const air = clamp(1 - (t - at) / 0.16);
+      s.style.transform = `rotate(${(tilt[i] + fall[i] * air).toFixed(2)}deg) scale(${(1 + (L.h - 2) * 0.004).toFixed(4)})`;
+      s.style.textShadow = L.shadow;
+    });
+  };
+}
+
+export interface Win extends Rect {
+  /** 조각이 걷혀 창이 열리는 시각 — 그 앞 cut 초 동안 칼선이 둘레를 긋는다 */
+  at: number;
+  /** 창 아래 깊이(px) — 위·왼쪽 가장자리 그림자 띠 길이. 기본 14 */
+  depth?: number;
+  /** 칼선 긋는 시간. 0 이면 이미 오려 둔 창(캐시) — 칼선 없이 열린다. 기본 0.3 */
+  cut?: number;
+  round?: boolean;
+}
+
+/**
+ * 대지에 창을 오린다 — at 앞 cut 초 동안 칼선이 창 둘레를 그어 가고, at 에 오린 조각이 들려 걷히며 창이 열린다.
+ * 창 안은 이 층보다 먼저 지은 층(아래 색종이)이 보이고, 창 위·왼쪽 가장자리가 depth 만큼 그림자를 드리운다(깊을수록 길다)
+ */
+export function cutWindows(el: HTMLElement, o: { ctx: SceneCtx; windows: Win[]; color?: string }): (t: number) => void {
+  const { ctx } = o;
+  const doc = el.ownerDocument;
+  const W = ctx.meta.width;
+  const H = ctx.meta.height;
+  const paper = col(ctx, o.color ?? "paper");
+  const shade = shadeOf(ctx);
+  const mat = div(doc, `inset:0;${face(doc, paper)}`, el);
+  const wells = o.windows.map((w) => div(doc, `left:${w.x}px;top:${w.y}px;width:${w.w}px;height:${w.h}px;${w.round ? "border-radius:50%;" : ""}box-shadow:${castShadow(w.depth ?? 14, shade, true)};display:none`, el));
+  const svg = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("viewBox", `0 0 ${W} ${H}`);
+  svg.setAttribute("style", "position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none");
+  el.append(svg);
+  // 칼선 = 벌어진 틈(그림자 줄) + 아래·오른쪽 단면이 받는 빛 한 줄. 칼끝은 남색 점
+  const knives = o.windows.map(() => {
+    const path = (stroke: string, width: number, dx: number) => {
+      const p = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+      p.setAttribute("fill", "none");
+      p.setAttribute("stroke", stroke);
+      p.setAttribute("stroke-width", String(width));
+      p.setAttribute("stroke-linejoin", "miter");
+      if (dx) p.setAttribute("transform", `translate(${dx} ${dx})`);
+      return p;
+    };
+    const lit = path("rgba(255, 255, 255, 0.85)", 2, 2.5);
+    const line = path(shade, 4, 0);
+    const tip = doc.createElementNS("http://www.w3.org/2000/svg", "circle");
+    tip.setAttribute("r", "8");
+    tip.setAttribute("fill", col(ctx, "ink"));
+    svg.append(lit, line, tip);
+    return { line, lit, tip };
+  });
+  const pieces = o.windows.map((w) => {
+    const p = div(doc, `left:${w.x}px;top:${w.y}px;width:${w.w}px;height:${w.h}px;${w.round ? "border-radius:50%;" : ""}${face(doc, paper, w.x, w.y)}display:none`, el);
+    return p;
+  });
+  const shapes = o.windows.map((w) => outline(w, w.round));
+  const ring = `0px 0px, ${W}px 0px, ${W}px ${H}px, 0px ${H}px, 0px 0px`;
+  return (t) => {
+    let poly = ring;
+    let any = false;
+    o.windows.forEach((w, i) => {
+      const open = t >= w.at;
+      if (open) {
+        poly += `, ${shapes[i].map((q) => `${q[0].toFixed(1)}px ${q[1].toFixed(1)}px`).join(", ")}, 0px 0px`;
+        any = true;
+      }
+      wells[i].style.display = open ? "" : "none";
+      const cut = w.cut ?? 0.3;
+      const { line, lit, tip } = knives[i];
+      const cutting = cut > 0 && t >= w.at - cut && t < w.at;
+      const pts = cutting ? partial(shapes[i], clamp((t - (w.at - cut)) / cut)) : [];
+      line.setAttribute("d", pathD(pts));
+      lit.setAttribute("d", pathD(pts));
+      const end = pts[pts.length - 1];
+      tip.setAttribute("visibility", end ? "visible" : "hidden");
+      if (end) {
+        tip.setAttribute("cx", end[0].toFixed(1));
+        tip.setAttribute("cy", end[1].toFixed(1));
+      }
+      const c = carry(t - w.at, `${ctx.id}:win:${i}`, Math.max(W, H));
+      pieces[i].style.display = c.on ? "" : "none";
+      if (c.on) {
+        pieces[i].style.boxShadow = castShadow(c.h, shade);
+        applyStyle(pieces[i], c.style);
+      }
+    });
+    mat.style.clipPath = any ? `polygon(evenodd, ${poly})` : "";
+  };
+}
+
+/**
+ * 층 바꾸기 — 다 본 판(el, 아래를 가리는 불투명한 종이)이 at 에 들려 dir 쪽으로 걷혀 나가고 아래 층이 드러난다.
+ * 들림 0.08초 + 걷힘 0.2초 — 큰 층이 오래 미끄러지면 카메라 이동으로 읽힌다. 걷힌 뒤엔 display:none
+ */
+export function liftSwap(el: HTMLElement, o: { ctx: SceneCtx; at: number; dir?: "left" | "right" | "up" | "down"; seed?: string | number }): (t: number) => void {
+  const shade = shadeOf(o.ctx);
+  const W = o.ctx.meta.width;
+  const H = o.ctx.meta.height;
+  const dir = o.dir ?? "left";
+  const spin = randRange(o.seed ?? `${o.ctx.id}:swap:${o.at}`, 0, 2, 5) * (dir === "left" || dir === "down" ? -1 : 1);
+  return (t) => {
+    const k = t - o.at;
+    if (k >= 0.28) {
+      el.style.display = "none";
+      return;
+    }
+    el.style.display = "";
+    if (k < 0) {
+      el.style.boxShadow = "";
+      applyStyle(el, {});
+      return;
+    }
+    const up = ease.outCubic(clamp(k / 0.08));
+    const go = ease.inCubic(clamp((k - 0.08) / 0.2));
+    const reach = (dir === "left" || dir === "right" ? W : H) * 1.15 * go;
+    const x = dir === "left" ? -reach : dir === "right" ? reach : 0;
+    const y = dir === "up" ? -reach : dir === "down" ? reach : 0;
+    el.style.boxShadow = castShadow(2 + 34 * up, shade);
+    applyStyle(el, { x, y, rotate: spin * go, scale: 1 + 0.02 * up });
+  };
+}
+
+/**
+ * 깊이 우물 — 같은 꼴 종이 고리를 안으로 한 장씩 깊게 겹친다(동심 사각). 겹수 = 깊이 = 지연.
+ * at 부터 every 초마다 고리 한 장의 속이 오려져 걷히고 한 층 더 깊어진다
+ */
+export function depthWell(el: HTMLElement, o: { ctx: SceneCtx; rect: Rect; rings: number; at: number; every?: number; step?: number; colors?: string[]; seed?: string | number }): (t: number) => void {
+  const { ctx, rect } = o;
+  const doc = el.ownerDocument;
+  const shade = shadeOf(ctx);
+  const step = o.step ?? Math.min(rect.w, rect.h) / (2 * (o.rings + 1.4));
+  const colors = (o.colors ?? ["sheet1", "sheet2", "sheet3", "surface"]).map((c) => col(ctx, c));
+  const every = o.every ?? 0.1;
+  const seed = o.seed ?? `${ctx.id}:well`;
+  // 빼낸 뚜껑은 우물 가장자리 밑으로 들어가 사라진다 — 우물 밖으로 날아다니면 옆 우물을 덮는다
+  const box = div(doc, `left:${rect.x}px;top:${rect.y}px;width:${rect.w}px;height:${rect.h}px;overflow:hidden;`, el);
+  // 가장 깊은 바닥부터 짓는다 — 바깥 고리가 위
+  const levels: { frame: HTMLDivElement; lid: HTMLDivElement; at: number; size: number }[] = [];
+  for (let i = o.rings; i >= 0; i--) {
+    const inset = i * step;
+    const w = rect.w - inset * 2;
+    const h = rect.h - inset * 2;
+    const c = colors[i % colors.length];
+    const frame = div(doc, `left:${inset}px;top:${inset}px;width:${w}px;height:${h}px;box-sizing:border-box;border:${step}px solid ${c};box-shadow:${castShadow(i === 0 ? 2 : 10, shade, true)}`, box);
+    const lid = div(doc, `left:${inset + step}px;top:${inset + step}px;width:${Math.max(0, w - step * 2)}px;height:${Math.max(0, h - step * 2)}px;${face(doc, c, rect.x + inset + step, rect.y + inset + step)}`, box);
+    levels.push({ frame, lid, at: o.at + i * every, size: Math.max(w, h) });
+  }
+  levels.reverse();
+  return (t) => {
+    levels.forEach((lv, i) => {
+      // 바깥 고리는 처음부터, 안쪽 고리는 그 위 뚜껑이 걷혀야 보인다
+      const shown = i === 0 || t >= levels[i - 1].at;
+      lv.frame.style.display = shown ? "" : "none";
+      if (i === levels.length - 1) {
+        lv.lid.style.display = lv.frame.style.display;
+        lv.frame.style.borderWidth = "0px";
+        return;
+      }
+      // 오린 속 조각이 살짝 들렸다가 한쪽 가장자리 밑으로 빠져나간다
+      const k = t - lv.at;
+      const out = k >= 0 && k < 0.26;
+      lv.lid.style.display = shown && (k < 0 || out) ? "" : "none";
+      if (!out) {
+        lv.lid.style.boxShadow = "";
+        applyStyle(lv.lid, {});
+        return;
+      }
+      const up = ease.outCubic(clamp(k / 0.06));
+      const go = ease.inCubic(clamp((k - 0.06) / 0.2));
+      const side = Math.floor(rand(seed, i) * 4);
+      const reach = lv.size * 1.1 * go;
+      lv.lid.style.boxShadow = castShadow(2 + 12 * up, shade);
+      applyStyle(lv.lid, { x: side === 0 ? -reach : side === 1 ? reach : 0, y: side === 2 ? -reach : side === 3 ? reach : 0, scale: 1 + 0.03 * up });
+    });
+  };
+}
+
+export interface StripOpts {
+  ctx: SceneCtx;
+  /** 띠 가운데 y, 지나가는 구간 x0–x1 */
+  y: number;
+  x0: number;
+  x1: number;
+  /** 띠 두께(px). 기본 64 */
+  thick?: number;
+  /** 띠에 찍힌 낱말 — 되풀이된다 */
+  words: string[];
+  /** 끌려가는 빠르기(px/초). 기본 260 */
+  speed?: number;
+  /** 띠 머리가 x0 에서 밀려 나오는 시각. 없으면 처음부터 꽉 차 있다 */
+  at?: number;
+  /** 띠가 대지 밑으로 들어갔다 나오는 칼집 자리(x) */
+  slits?: number[];
+  /** 띠 종이. 기본 surface */
+  color?: string;
+  /** 글. 기본 ink */
+  ink?: string;
+}
+
+/**
+ * 요청 띠 — 낱말이 찍힌 종이 띠가 대지의 칼집을 꿰고 오른쪽으로 끌려간다. 칼집 자리는 띠가 대지 밑으로 들어갔다 나오고(칼집 하나 = 거쳐 가는 단계),
+ * 띠는 늘 움직인다 — 요청이 오가는 동안 화면이 서지 않는다
+ */
+export function paperStrip(el: HTMLElement, o: StripOpts): (t: number) => void {
+  const { ctx } = o;
+  const doc = el.ownerDocument;
+  const shade = shadeOf(ctx);
+  const thick = o.thick ?? 64;
+  const top = o.y - thick / 2;
+  const span = o.x1 - o.x0;
+  const speed = o.speed ?? 260;
+  const band = div(doc, `left:${o.x0}px;top:${top}px;width:0px;height:${thick}px;${face(doc, col(ctx, o.color ?? "surface"))}box-shadow:${castShadow(5, shade)}`, el);
+  const view = div(doc, `left:${o.x0}px;top:${top}px;width:0px;height:${thick}px;overflow:hidden`, el);
+  const size = Math.round(thick * 0.46);
+  // 고정폭 글꼴 한 칸 = 0.6em — 글자마다 자리를 셈으로 정한다(build 때는 잴 수 없다)
+  const cw = size * 0.6;
+  const track = div(doc, `left:0;top:0;height:${thick}px;white-space:pre;font:600 ${size}px ${ctx.style.fonts.mono};line-height:${thick}px;color:${col(ctx, o.ink ?? "ink")}`, view);
+  const unit = Array.from(o.words.map((w) => `${w}   ·   `).join(""));
+  const loop = unit.length * cw;
+  const copies = Math.ceil(span / loop) + 2;
+  // 글자 한 장씩 — 칼집 밑으로 들어간 글자·띠 끝을 넘은 글자는 감춘다(덮인 글·화면 밖 글이 남지 않게)
+  const chars = Array.from({ length: unit.length * copies }, (_, i) => {
+    const s = doc.createElement("span");
+    s.textContent = unit[i % unit.length];
+    s.style.cssText = `position:absolute;left:${(i * cw).toFixed(2)}px;top:0`;
+    track.append(s);
+    return s;
+  });
+  const slitW = Math.round(thick * 1.1);
+  const covers = (o.slits ?? []).map((sx) => {
+    const c = div(doc, `left:${sx - slitW / 2}px;top:${top - 10}px;width:${slitW}px;height:${thick + 20}px;${face(doc, col(ctx, "paper"), sx - slitW / 2, top - 10)}box-shadow:${castShadow(2, shade)}`, el);
+    // 칼집 두 줄 — 띠가 들어가고 나오는 자리
+    div(doc, `left:0;top:0;width:3px;height:100%;background:${mix(shade, 0.7)}`, c);
+    div(doc, `right:0;top:0;width:3px;height:100%;background:${mix(shade, 0.7)}`, c);
+    return { el: c, x0: sx - slitW / 2 - o.x0, x1: sx + slitW / 2 - o.x0 };
+  });
+  return (t) => {
+    const fed = o.at === undefined ? span : clamp(speed * (t - o.at), 0, span);
+    const on = fed > 0.5;
+    band.style.display = view.style.display = on ? "" : "none";
+    band.style.width = view.style.width = `${fed.toFixed(1)}px`;
+    // 띠는 머리와 함께 오른쪽으로 — 머리가 다 나온 뒤에도 같은 빠르기로 끌려간다. 낱말은 loop 마다 되풀이라 나머지로 감는다
+    const base = ((((speed * (t - (o.at ?? 0))) % loop) + loop) % loop) - loop;
+    track.style.transform = `translateX(${base.toFixed(1)}px)`;
+    const live = covers.filter((c) => on && c.x0 < fed);
+    chars.forEach((s, i) => {
+      const x = base + i * cw;
+      const inside = x > -cw * 0.5 && x + cw * 0.5 < fed;
+      const covered = live.some((c) => x + cw > c.x0 + 2 && x < c.x1 - 2);
+      s.style.visibility = inside && !covered ? "visible" : "hidden";
+    });
+    for (const c of covers) c.el.style.display = live.includes(c) ? "" : "none";
+  };
+}
+
+/**
+ * 비용 막대 — 종이 띠 길이가 값이다. landAt 에 놓이고, at 앞 0.2초 동안 keep 자리에 칼선이 내려가고 at 에 나머지가 들려 걷힌다(할인 = 오려 떼어 낸 몫)
+ */
+export function trimBar(
+  el: HTMLElement,
+  o: { ctx: SceneCtx; rect: Rect; keep: number; at: number; landAt?: number; color?: string; seed?: string | number; build?(keep: HTMLElement, cut: HTMLElement): void },
+): (t: number) => void {
+  const { ctx, rect: r } = o;
+  const doc = el.ownerDocument;
+  const shade = shadeOf(ctx);
+  const c = col(ctx, o.color ?? "sheet1");
+  const kw = Math.max(4, r.w * clamp(o.keep));
+  const left = div(doc, `left:${r.x}px;top:${r.y}px;width:${kw}px;height:${r.h}px;${face(doc, c, r.x, r.y)}`, el);
+  const right = div(doc, `left:${r.x + kw}px;top:${r.y}px;width:${r.w - kw}px;height:${r.h}px;${face(doc, c, r.x + kw, r.y)}`, el);
+  const knife = div(doc, `left:${r.x + kw - 1.5}px;top:${r.y - 14}px;width:3px;height:0px;background:${shade}`, el);
+  // 떼어 낼 몫에 붙인 것(정가 글자)은 그 조각과 같이 걷혀 나간다
+  o.build?.(left, right);
+  const seed = o.seed ?? `${ctx.id}:trim:${o.at}`;
+  return (t) => {
+    const L = o.landAt === undefined ? null : lift(t, { at: o.landAt, height: 26, shade });
+    const on = !L || L.on;
+    left.style.display = on ? "" : "none";
+    const h = L?.h ?? 2;
+    left.style.boxShadow = castShadow(h, shade);
+    applyStyle(left, L?.style ?? {});
+    const cut = clamp((t - (o.at - 0.2)) / 0.2);
+    knife.style.display = on && cut > 0 && t < o.at + 0.06 ? "" : "none";
+    knife.style.height = `${((r.h + 28) * cut).toFixed(1)}px`;
+    const k = carry(t - o.at, seed, 1400);
+    right.style.display = on && (t < o.at || k.on) ? "" : "none";
+    right.style.boxShadow = castShadow(k.on ? k.h : h, shade);
+    applyStyle(right, k.on ? k.style : (L?.style ?? {}));
+  };
+}
+
+export interface BurstOpts {
+  ctx: SceneCtx;
+  drop?: number;
+  /** 창 가운데(px). 기본 화면 가운데 */
+  origin?: [number, number];
+  /** 겹수. 기본 5 */
+  layers?: number;
+  /** 층마다 놓이는 시각 — 드롭 앞 모아 올리기. 맨 위(창이 가장 큰) 층부터 한 장씩 안으로 깊어진다. 없으면 처음부터 쌓여 있다 */
+  landAt?: number[];
+  /** false 면 드롭 전엔 안 보이고 드롭에 화면 가장자리에서만 터져 나간다(위에 덮는 층으로 쓸 때) */
+  closed?: boolean;
+  /** 맨 안쪽 창 크기(화면 짧은 변 비율). 기본 0.18 */
+  inner?: number;
+  colors?: string[];
+}
+
+/**
+ * 드롭 — 가운데 창이 한 장마다 작아지는 동심 대지 층이 드롭에 한꺼번에 들려 바깥으로 터져 나가며 창이 활짝 열린다.
+ * 흔들림·한 번 튐을 돌려준다(돌려준 shake 는 화면 틀에, punch 는 주인공에)
+ */
+export function layerBurst(el: HTMLElement, o: BurstOpts): (t: number) => DropBurstState {
+  const { ctx } = o;
+  const doc = el.ownerDocument;
+  const W = ctx.meta.width;
+  const H = ctx.meta.height;
+  const shade = shadeOf(ctx);
+  const n = o.layers ?? 5;
+  const [ox, oy] = o.origin ?? [W / 2, H / 2];
+  const short = Math.min(W, H);
+  const inner = o.inner ?? 0.18;
+  const closed = o.closed ?? true;
+  const colors = (o.colors ?? ["paper", "sheet2", "sheet1", "sheet3", "surface"]).map((c) => col(ctx, c));
+  const far = Math.hypot(Math.max(ox, W - ox), Math.max(oy, H - oy)) * 2.4;
+  // 창이 가장 작은 층이 맨 아래, 위로 갈수록 창이 크다 — 위에서 보면 계단처럼 한 장씩 깊어지는 우물
+  const layers = Array.from({ length: n }, (_, i) => {
+    const k = (i + 1) / n;
+    const half = (closed ? inner + (1.05 - inner) * k * k : 0.55 + 0.3 * k) * short * 0.5;
+    const sheet = div(doc, `inset:0;${face(doc, colors[(n - 1 - i) % colors.length])}`, el);
+    const well = div(doc, "left:0;top:0;width:0;height:0;", el);
+    return { sheet, well, hx: half * (W > H ? 1.3 : 1), hy: half * (H > W ? 1.3 : 1), i };
+  });
+  const at = ctx.beats.drop(o.drop ?? 0);
+  return (t) => {
+    const s = dropBurst(t, { beats: ctx.beats, drop: o.drop ?? 0, rules: ctx.style.motion, scene: ctx.id, source: "layerBurst" });
+    for (const L of layers) {
+      const landAt = o.landAt?.[n - 1 - L.i];
+      const land = landAt === undefined ? null : lift(t, { at: landAt, height: 34, shade });
+      // 맨 위 층부터 0.04초씩 터져 나간다
+      const k = t - at - (n - 1 - L.i) * 0.04;
+      const go = k < 0 ? 0 : ease.outCubic(clamp(k / 0.32));
+      const visible = (closed ? !land || land.on : k >= 0) && go < 1;
+      L.sheet.style.display = L.well.style.display = visible ? "" : "none";
+      if (!visible) continue;
+      const hx = L.hx + far * go;
+      const hy = L.hy + far * go;
+      const x0 = ox - hx;
+      const y0 = oy - hy;
+      L.sheet.style.clipPath = `polygon(evenodd, 0px 0px, ${W}px 0px, ${W}px ${H}px, 0px ${H}px, 0px 0px, ${x0.toFixed(1)}px ${y0.toFixed(1)}px, ${(ox + hx).toFixed(1)}px ${y0.toFixed(1)}px, ${(ox + hx).toFixed(1)}px ${(oy + hy).toFixed(1)}px, ${x0.toFixed(1)}px ${(oy + hy).toFixed(1)}px, ${x0.toFixed(1)}px ${y0.toFixed(1)}px, 0px 0px)`;
+      // 터질 때 층이 들려 창 그림자가 길어진다
+      const h = (land?.h ?? 2) + 8 + 40 * Math.sin(Math.PI * Math.min(1, go * 1.4));
+      L.well.style.cssText = `position:absolute;left:${x0.toFixed(1)}px;top:${y0.toFixed(1)}px;width:${(hx * 2).toFixed(1)}px;height:${(hy * 2).toFixed(1)}px;box-shadow:${castShadow(h, shade, true)}`;
+      const sc = land?.style.scale ?? 1;
+      L.sheet.style.transform = L.well.style.transform = sc !== 1 ? `scale(${sc.toFixed(4)})` : "";
+      L.sheet.style.transformOrigin = L.well.style.transformOrigin = `${ox}px ${oy}px`;
+    }
+    return s;
+  };
+}

package/themes/paper-cutout/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>