kasaframe 0.1.4 → 0.1.6

package/packages/patterns/src/code/terminal.ts

@@ -1,6 +1,6 @@
 import { clamp, spring, applyStyle } from "@kasaframe/core";
 import { typeText } from "@kasaframe/motion";
-import { area, beatStops, glider, moving, node, slotsOf } from "../kit.ts";
+import { area, beatStops, dwells, glider, markOf, moving, node, readOver, reread, slotsOf } from "../kit.ts";
 import type { Pattern } from "../types.ts";
 
 export interface CodeContent {
@@ -22,13 +22,13 @@ const rowsOf = (c: CodeContent): Row[] => {
 };
 
 /**
- * 명령·코드 — 창 판 안에서 명령은 자모 단위로 쳐지고(블록 커서가 끝을 따라간다), 출력·코드 줄은 흘러 찍힌다. 지금 줄 뒤엔 강조색 칸이 글과 함께 늘어난다.
- * 다 서면 짚개가 마지막 줄(결과)과 다른 줄을 박마다 번갈아 짚는다. 치는 빠르기는 박아 둔다(명령 초당 36타·출력 90자) — 장면이 길다고 느리게 치지 않는다.
+ * 명령·코드 — 창 판 안에서 명령은 자모 단위로 쳐지고(블록 커서가 끝을 따라간다), 출력·코드 줄은 흘러 찍힌다. 지금 줄 뒤엔 짚는 칸이 글과 함께 늘어난다.
+ * 다 서면 줄이 둘 넘을 때 짚개가 마지막 줄(결과)부터 짚는다(머무는 테마는 목소리가 다른 줄을 말할 때만 그리로). 치는 빠르기는 박아 둔다(명령 초당 36타·출력 90자) — 장면이 길다고 느리게 치지 않는다.
  */
 const pattern: Pattern<CodeContent> = {
   id: "code.terminal",
   type: "code",
-  does: "창 판 안에서 명령이 쳐지고 출력이 흘러 찍히며 지금 줄이 짚이고, 다 서면 짚개가 결과 줄과 다른 줄을 번갈아 짚는다",
+  does: "창 판 안에서 명령이 쳐지고 출력이 흘러 찍히며 지금 줄이 짚이고, 다 서면 짚개가 결과 줄부터 짚는다",
   energy: ["mid"],
   family: "type",
   camera: ["none"],
@@ -72,7 +72,9 @@ const pattern: Pattern<CodeContent> = {
       const text = node(line, "display:inline");
       return { r, line, prompt, text };
     });
-    const cursor = node(body, `position:absolute;left:0;top:0;width:0.6em;height:1.2em;background:var(--kf-on-accent);visibility:hidden`);
+    const mark = markOf(kit, ctx);
+    // 블록 커서는 지금 줄 칸 위에 선다 — 테마 짚음 칸이 옅으면 칸 위 글색(onAccent)이 바탕에 묻혀 강조색으로
+    const cursor = node(body, `position:absolute;left:0;top:0;width:0.6em;height:1.2em;background:${mark ? "var(--kf-accent)" : "var(--kf-on-accent)"};visibility:hidden`);
 
     // 시각 — 명령은 초당 36타로 쳐지고, 출력·코드 줄은 초당 90자로 흘러 찍힌다. 줄 사이는 0.04초 — 박을 기다리면 그 사이가 멈춘 화면이다
     const cps = (r: Row) => (r.typed ? 36 : 90);
@@ -84,11 +86,16 @@ const pattern: Pattern<CodeContent> = {
     }
     const doneAt = at;
     const result = lines[lines.length - 1];
-    const point = glider(body, [result.line, ...lines.slice(0, -1).map((l) => l.line)], { hub: true, pad: 0.15 });
-    // 지금 줄 — 치거나 찍히는 줄 뒤에 강조색 칸이 붙어 글과 함께 늘어난다(작은 글 치기만으로는 화면이 바뀐 것으로 안 읽힌다)
-    const nowBar = node(body, "position:absolute;left:0;top:0;background:var(--kf-accent);z-index:-1;visibility:hidden");
+    const point = glider(body, [result, ...lines.slice(0, -1)].map((l) => ({ el: l.line, text: l.r.text })), { kit, ctx, from: doneAt, pad: 0.15 });
+    // 한 줄뿐이고 훑는 테마면 짚개 대신 다 친 그 줄을 박마다 다시 짚는다
+    const again = lines.length < 2 && !dwells(kit, ctx) ? readOver(result.line, `${result.r.typed ? "$ " : ""}${result.r.text}`, ctx) : null;
+    const againStops = again ? beatStops(kit.hits, doneAt, ctx.dur) : [];
+    // 지금 줄 — 치거나 찍히는 줄 뒤에 짚는 칸이 붙어 글과 함께 늘어난다(작은 글 치기만으로는 화면이 바뀐 것으로 안 읽힌다). 칸 모양·줄 옮김은 테마 짚음
+    const nowBar = node(body, `position:absolute;left:0;top:0;z-index:-1;visibility:hidden${mark ? "" : ";background:var(--kf-accent)"}`);
+    const nowMark = mark?.(nowBar) ?? null;
+    const nowInk = nowMark ? nowMark.ink : "var(--kf-on-accent)";
+    const lineBox = (l: HTMLElement, extra = 0) => ({ x: -px * 0.25, y: l.offsetTop - px * 0.1, w: l.offsetWidth + px * 0.5 + extra, h: l.offsetHeight + px * 0.2 });
     body.style.isolation = "isolate";
-    const stops = beatStops(kit.hits, doneAt, ctx.dur);
     const lands = lines.map((l, i) => slots.land(l.line, { ctx, at: starts[i], seed: `${kit.seed}:l${i}` }));
 
     return (t: number) => {
@@ -111,21 +118,23 @@ const pattern: Pattern<CodeContent> = {
       nowBar.style.visibility = live ? "visible" : "hidden";
       lines.forEach((l) => {
         const on = l === live;
-        l.text.style.color = on ? "var(--kf-on-accent)" : "";
-        if (l.prompt) l.prompt.style.color = on ? "var(--kf-on-accent)" : "var(--kf-accent-text, var(--kf-accent))";
+        l.text.style.color = on && nowInk ? nowInk : "";
+        if (l.prompt) l.prompt.style.color = on && nowInk ? nowInk : "var(--kf-accent-text, var(--kf-accent))";
       });
       if (live) {
-        const extra = live.r.typed && cur ? px * 0.7 : 0;
-        nowBar.style.transform = `translate(${(-px * 0.25).toFixed(1)}px, ${(live.line.offsetTop - px * 0.1).toFixed(1)}px)`;
-        nowBar.style.width = `${(live.line.offsetWidth + px * 0.5 + extra).toFixed(1)}px`;
-        nowBar.style.height = `${(live.line.offsetHeight + px * 0.2).toFixed(1)}px`;
+        const box = lineBox(live.line, live.r.typed && cur ? px * 0.7 : 0);
+        const b = nowMark ? nowMark.at(k > 0 ? lineBox(lines[k - 1].line) : null, box, clamp((t - starts[k]) / 0.3)) : box;
+        nowBar.style.transform = `translate(${b.x.toFixed(1)}px, ${b.y.toFixed(1)}px)`;
+        nowBar.style.width = `${b.w.toFixed(1)}px`;
+        nowBar.style.height = `${b.h.toFixed(1)}px`;
       }
       // 블록 커서는 치는 줄의 끝을 따라간다 — 다 치면 결과 줄 끝에서 짚개에 자리를 내준다
       const c2 = cur as { line: HTMLElement; chars: number } | null;
       cursor.style.visibility = c2 && t < doneAt ? "visible" : "hidden";
       // 접힌 줄은 몇째 줄 몇째 칸인지로 센다(고정폭이라 한 줄 = wrap 칸)
       if (c2) cursor.style.transform = `translate(${((c2.chars % wrap) * 0.6).toFixed(2)}em, ${(c2.line.offsetTop / px + Math.floor(c2.chars / wrap) * 1.45 + 0.12).toFixed(3)}em)`;
-      point(t, stops);
+      point(t);
+      again?.(reread(t, againStops));
     };
   },
 };

package/packages/patterns/src/end/lockup.ts

@@ -1,6 +1,6 @@
 import { applyStyle, clamp, combine, spring } from "@kasaframe/core";
 import { fitSize, textEm } from "@kasaframe/motion/moves";
-import { area, beatStops, fitOnce, glider, moving, node, riseName, slotsOf } from "../kit.ts";
+import { area, beatStops, dwells, fitOnce, followSpoken, glider, moving, node, reread, riseName, sayTimes, slotsOf } from "../kit.ts";
 import type { Pattern } from "../types.ts";
 
 export interface EndContent {
@@ -12,12 +12,12 @@ export interface EndContent {
 }
 
 /**
- * 끝 카드 — 로고가 앉고 이름이 글자마다 서고, 한 줄·주소가 찍히는 동안 짚개가 이름 → 한 줄 → 주소를 박마다 옮겨 다닌다.
+ * 끝 카드 — 로고가 앉고 이름이 글자마다 서고 한 줄·주소가 찍힌다. 한 줄·주소가 있으면 짚개가 이름부터 짚는다(머무는 테마는 목소리가 한 줄·주소를 말할 때만 그리로).
  */
 const pattern: Pattern<EndContent> = {
   id: "end.lockup",
   type: "end",
-  does: "로고가 앉고 이름이 서고 한 줄·주소가 찍히는 동안, 짚개가 이름·한 줄·주소를 박마다 옮겨 다닌다",
+  does: "로고가 앉고 이름이 서고 한 줄·주소가 찍히면, 짚개가 이름부터 짚는다",
   energy: ["low", "mid"],
   family: "mask",
   camera: ["none"],
@@ -57,14 +57,17 @@ const pattern: Pattern<EndContent> = {
     const logoAt = 0;
     const nameAt = logo ? 0.15 : kit.first ? -0.2 : 0;
     const nameEnd = nameAt + each * (count - 1) + 0.3;
-    const lineAt = nameEnd;
+    // 머무는 짚개 테마는 한 줄·주소를 목소리가 그것을 말할 때 찍는다(못 들으면 이름이 선 뒤부터 장면 끝 무렵까지 고르게). 찍힐 때마다(없으면
+    // 이름이 서면) 카메라가 그쪽으로 다가간다 — 끝 카드가 일찍 다 서고 남은 시간이 비지 않게. 훑는 테마는 이름이 서자마자 잇달아 찍는다
     const lineDur = line ? clamp([...c.line!].length * 0.03, 0.25, 0.6) : 0;
-    const urlAt = lineAt + lineDur;
     const urlDur = url ? clamp([...c.url!].length * 0.03, 0.25, 0.6) : 0;
-    // 짚개는 이름이 서자마자 이름 → 한 줄 → 주소를 박마다 옮겨 다닌다 — 장면이 길어도 빠르기는 박이 정해 화면이 서지 않는다
-    const point = glider(host, [name, line, url].filter((e): e is HTMLDivElement => !!e), { hub: true });
+    const [lineAt, urlWant] = dwells(kit, ctx) ? sayTimes(kit, [c.line, c.url], nameEnd, Math.max(nameEnd + 0.3, ctx.dur - 0.9)) : [nameEnd, nameEnd + lineDur];
+    const urlAt = Math.max(urlWant, lineAt + lineDur);
+    followSpoken(kit, ctx, line || url ? [...(line ? [{ at: lineAt, el: line }] : []), ...(url ? [{ at: urlAt, el: url }] : [])] : [{ at: nameEnd, el: name }]);
+    // 짚개는 이름이 서면 이름·한 줄·주소를 짚는다(짚기 방식은 테마 짚음). 한 줄·주소가 없고 훑는 테마면 이름 글자를 박마다 다시 짚는다
+    const point = glider(host, [{ el: name, text: c.title }, ...(line ? [{ el: line, text: c.line }] : []), ...(url ? [{ el: url, text: c.url }] : [])], { kit, ctx, from: nameEnd - 0.15 });
+    const again = !line && !url && !dwells(kit, ctx) ? beatStops(kit.hits, nameEnd - 0.15, ctx.dur) : null;
     const fit = fitOnce(name, w * 0.86, h * (vertical ? 0.18 : 0.3), c.title);
-    const stops = beatStops(kit.hits, nameEnd - 0.15, ctx.dur);
 
     const writeLine = line ? slots.write(line, { ctx, text: c.line!, at: lineAt, dur: lineDur, seed: `${kit.seed}:line` }) : null;
     const writeUrl = url ? slots.write(url, { ctx, text: c.url!, at: urlAt, dur: urlDur, seed: `${kit.seed}:url` }) : null;
@@ -74,8 +77,8 @@ const pattern: Pattern<EndContent> = {
       moving("end.lockup", ctx);
       if (logo && logoLand) applyStyle(logo, combine({ scale: spring(t - logoAt, { from: 0.6, to: 1, stiffness: 280, damping: 16 }) }, logoLand(t)));
       fit();
-      paintName(t, { riseAt: nameAt, each, fill: 0 });
-      point(t, stops);
+      paintName(t, { riseAt: nameAt, each, fill: 0, up: again ? reread(t, again) : undefined });
+      point(t);
       writeLine?.(t);
       writeUrl?.(t);
     };

package/packages/patterns/src/end/slam.ts

@@ -1,6 +1,6 @@
 import { applyStyle, clamp, combine, spring } from "@kasaframe/core";
 import { fitSize, textEm } from "@kasaframe/motion/moves";
-import { area, beatStops, cameraOk, fitOnce, glider, moving, node, sceneDrop, slam, slotsOf } from "../kit.ts";
+import { area, beatStops, cameraOk, dwells, fitOnce, glider, moving, node, readOver, reread, sceneDrop, slam, slotsOf } from "../kit.ts";
 import type { EndContent } from "./lockup.ts";
 import type { Pattern } from "../types.ts";
 
@@ -65,9 +65,10 @@ const pattern: Pattern<EndContent> = {
     const writeLine = lineEl ? slots.write(lineEl, { ctx, text: c.line!, at: lineAt, dur: 0.35, seed: `${kit.seed}:line` }) : null;
     const writeUrl = urlEl ? slots.write(urlEl, { ctx, text: c.url!, at: urlAt, dur: 0.3, seed: `${kit.seed}:url` }) : null;
     const landed = slots.land(name, { ctx, at, seed: `${kit.seed}:land` });
-    // 앉은 뒤엔 짚개가 이름 ↔ 한 줄·주소를 박마다 번갈아 짚는다
-    const point = glider(host, [stage, ...(lineEl ? [lineEl] : []), ...(urlEl ? [urlEl] : [])], { hub: true });
-    const stops = beatStops(kit.hits, at + 0.2, ctx.dur);
+    // 앉으면 짚개가 이름·한 줄·주소를 짚는다(짚기 방식은 테마 짚음). 한 줄·주소가 없고 훑는 테마면 이름 글을 박마다 다시 짚는다
+    const point = glider(host, [{ el: stage, text: c.title }, ...(lineEl ? [{ el: lineEl, text: c.line }] : []), ...(urlEl ? [{ el: urlEl, text: c.url }] : [])], { kit, ctx, from: at + 0.2 });
+    const again = line || dwells(kit, ctx) ? null : readOver(name, c.title, ctx);
+    const againStops = again ? beatStops(kit.hits, at + 0.2, ctx.dur) : [];
 
     return (t: number) => {
       moving("end.slam", ctx);
@@ -78,7 +79,8 @@ const pattern: Pattern<EndContent> = {
       // 쾅 전엔 외곽선 이름을 왼쪽부터 짚어 자리를 알린다 — 앉은 뒤엔 꽉 찬 이름을 마지막 프레임까지 짚는다
       ghost.style.opacity = t < at ? "0.16" : "0";
       ghost.style.clipPath = t < at ? `inset(0 ${((1 - clamp(t / Math.max(0.1, at - 0.16))) * 100).toFixed(2)}% 0 0)` : "";
-      point(t, stops);
+      point(t);
+      again?.(reread(t, againStops));
       if (line) line.style.visibility = t >= lineAt ? "visible" : "hidden";
       writeLine?.(t);
       writeUrl?.(t);

package/packages/patterns/src/hook-number/counter.ts

@@ -1,17 +1,18 @@
 import { applyStyle, clamp } from "@kasaframe/core";
 import { textEm } from "@kasaframe/motion/moves";
-import { area, beatStops, decimalsOf, fitOnce, glider, moving, node, odometer, slotsOf, timesSign } from "../kit.ts";
+import { area, decimalsOf, dwells, fitOnce, followSpoken, glider, moving, node, odometer, sayTimes, slotsOf, timesSign } from "../kit.ts";
 import type { HookNumber } from "./roll.ts";
+import { rollCues } from "../sfx.ts";
 import type { Pattern } from "../types.ts";
 
 /**
- * 계수기 — 숫자 자리마다 판이 서고 주행계 띠가 굴러 값에 앉는다(끝자리 띠가 연속으로 구르고 윗자리는 올림 때만). 굴림 2.2초로 박아 둔다.
- * 앉은 뒤엔 짚개가 숫자와 라벨을 박마다 번갈아 짚는다. 롤(roll)이 「값이 바뀐다」라면 이쪽은 「센다」.
+ * 계수기 — 숫자 자리마다 판이 서고 주행계 띠가 굴러 값에 앉는다(끝자리 띠가 연속으로 구르고 윗자리는 올림 때만). 목소리가 그 값을 말할 때(못 들으면 장면 끝 무렵) 앉는다.
+ * 앉으면 짚개가 숫자부터 짚는다(머무는 테마는 목소리가 라벨·단위를 말할 때만 그리로). 롤(roll)이 「값이 바뀐다」라면 이쪽은 「센다」.
  */
 const pattern: Pattern<HookNumber> = {
   id: "hook-number.counter",
   type: "hook-number",
-  does: "숫자 자리마다 판이 서고 주행계 띠가 굴러 값에 앉은 뒤, 짚개가 숫자와 라벨을 번갈아 짚는다",
+  does: "숫자 자리마다 판이 서고 주행계 띠가 굴러 값에 앉으면, 짚개가 숫자부터 짚는다",
   energy: ["low", "mid"],
   family: "flap",
   camera: ["none"],
@@ -69,11 +70,15 @@ const pattern: Pattern<HookNumber> = {
     // 라벨 폭은 글꼴마다 다르다(고정폭 테마는 빈칸까지 한 칸) — 글자 수 어림 대신 그 글꼴로 재서 안전 영역 폭 92% 안에
     const fitLabel = fitOnce(label, w * 0.92, labelPx, c.label);
 
-    const land = Math.min(2.4, ctx.dur - 0.6);
+    // 머무는 짚개 테마는 라벨을 목소리가 그것을 말할 때 세우고, 숫자는 그 값을 말할 때까지(못 들으면 장면 끝 무렵까지) 고른 빠르기로 센다 —
+    // 처음 2초에 다 서고 남은 시간이 비지 않게. 앉으면 카메라가 숫자 쪽으로 다가간다. 훑는 테마는 2.4초 안에 앉고 남은 시간을 짚개가 진다
+    const spread = dwells(kit, ctx);
+    const [labelAt, valueAt] = spread ? sayTimes(kit, [c.label, c.value.toFixed(dec)], 0, Math.max(1.2, ctx.dur - 0.9)) : [0, Math.min(2.4, ctx.dur - 0.6)];
+    const land = clamp(valueAt, Math.min(1.2, ctx.dur - 0.6), ctx.dur - 0.6);
+    followSpoken(kit, ctx, [{ at: land, el: board }]);
     // 배수 기호 하나를 칸으로 짚으면 색 네모 안 × — 닫기 단추로 읽힌다
-    const point = glider(host, [board, label, ...(unitEl && !times ? [unitEl] : [])], { hub: true });
-    const stops = beatStops(kit.hits, land + 0.15, ctx.dur);
-    const writeLabel = slots.write(label, { ctx, text: c.label, at: 0, dur: 0.35, seed: `${kit.seed}:l` });
+    const point = glider(host, [{ el: board, text: c.value.toFixed(dec) }, { el: label, text: c.label }, ...(unitEl && !times ? [{ el: unitEl, text: unit }] : [])], { kit, ctx, from: land + 0.15 });
+    const writeLabel = slots.write(label, { ctx, text: c.label, at: Math.min(labelAt, land - 0.2), dur: 0.35, seed: `${kit.seed}:l` });
     const landed = slots.land(board, { ctx, at: land, seed: `${kit.seed}:land` });
     // 출처는 앉은 뒤에 찍고 장면 끝 0.35초 전에 다 찍는다 — 테마 글 찍기가 마지막 글자를 앉힐 틈(끝 프레임에 덜 찍힌 글자가 안 남게)
     const srcDur = clamp([...srcText].length * 0.035, 0.3, 0.9);
@@ -87,13 +92,14 @@ const pattern: Pattern<HookNumber> = {
       writeSource?.(t);
       // 고른 빠르기로 센다 — 감속하면 끝자리 띠가 서서 그 사이가 멈춘 화면이 된다
       const p = clamp((t - 0.1) / (land - 0.1));
+      rollCues(t, { at: 0.1, dur: land - 0.1, p: (u) => u });
       const v = from + (c.value - from) * p;
       if (odo) odo(p >= 1 ? c.value : v);
       num.style.visibility = odo && t < land ? "visible" : "hidden";
       plain.style.visibility = !odo || t >= land ? "visible" : "hidden";
       if (!odo) plain.textContent = (p >= 1 ? c.value : v).toFixed(dec).padStart(template.length, " ");
       applyStyle(board, landed(t));
-      point(t, stops);
+      point(t);
     };
   },
 };

package/packages/patterns/src/hook-number/slam.ts

@@ -1,6 +1,6 @@
 import { applyStyle, clamp, combine } from "@kasaframe/core";
 import { textEm } from "@kasaframe/motion/moves";
-import { area, beatStops, cameraOk, decimalsOf, factRoll, fitOnce, glider, moving, node, sceneDrop, slam, slotsOf } from "../kit.ts";
+import { area, cameraOk, decimalsOf, factRoll, fitOnce, glider, moving, node, sceneDrop, slam, slotsOf } from "../kit.ts";
 import type { HookNumber } from "./roll.ts";
 import type { Pattern } from "../types.ts";
 
@@ -61,13 +61,11 @@ const pattern: Pattern<HookNumber> = {
     if (di === null && kit.stage && cameraOk(ctx)) kit.stage.camera.impact(at, { amount: 0.04 });
     const writeLabel = slots.write(label, { ctx, text: c.label, at: 0, dur: labelDur, seed: `${kit.seed}:l` });
     const landed = slots.land(row, { ctx, at, seed: `${kit.seed}:land` });
-    // 짚개 — 쾅 전엔 라벨 ↔ 외곽선 자리(무엇의 숫자가 어디 오나), 쾅 뒤엔 숫자 ↔ 라벨을 박마다 번갈아 짚는다
-    const before = glider(host, [labelBox, ghostRow], { hub: true });
-    const after = glider(host, [numBox, labelBox], { hub: true });
-    const preStops = beatStops(kit.hits, labelDur, at - 0.2);
+    // 짚개 — 쾅 전엔 라벨(무엇의 숫자인가)과 외곽선 자리, 쾅 뒤엔 숫자와 라벨. 짚기 방식(박마다 훑기·요점에 머묾)은 테마 짚음이 고른다
+    const before = glider(host, [{ el: labelBox, text: c.label }, { el: ghostRow }], { kit, ctx, from: labelDur, to: at - 0.2, until: at - 0.16 });
+    const after = glider(host, [{ el: numBox, text }, { el: labelBox, text: c.label }], { kit, ctx, from: at + 0.25 });
     // 라벨은 그 글꼴로 재서 안전 영역 폭 92% 안에
     const fitLabel = fitOnce(labelBox, w * 0.92, labelPx, c.label);
-    const postStops = beatStops(kit.hits, at + 0.25, ctx.dur);
 
     return (t: number) => {
       moving("hook-number.slam", ctx);
@@ -81,8 +79,8 @@ const pattern: Pattern<HookNumber> = {
         ghostRow.style.left = `${row.offsetLeft}px`;
         ghostRow.style.top = `${row.offsetTop}px`;
       }
-      before(t, preStops, at - 0.16);
-      after(t, postStops);
+      before(t);
+      after(t);
       if (s) applyStyle(host, s.shake);
     };
   },