kasaframe 0.1.5 → 0.1.7

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, followSpoken, glider, moving, node, readOver, reread, sayTimes, sceneDrop, slam, slotsOf } from "../kit.ts";
 import type { EndContent } from "./lockup.ts";
 import type { Pattern } from "../types.ts";
 
@@ -60,14 +60,19 @@ const pattern: Pattern<EndContent> = {
     const at = di !== null ? ctx.beats.drop(di) : (hits.find((b) => b >= 0.1) ?? 0.12);
     const dropPaint = di !== null && slots.drop ? slots.drop(burst, { ctx, drop: di }) : null;
     if (di === null && kit.stage && cameraOk(ctx)) kit.stage.camera.impact(at, { amount: 0.04 });
-    const lineAt = at + 0.2;
-    const urlAt = lineAt + (c.line ? 0.35 : 0);
+    // 머무는 짚개 테마는 한 줄·주소를 자막·목소리가 말하는 순간에 붙이고, 카메라가 이름에서 그쪽으로 서지 않고 다가간다 — 쾅 뒤 다 선 끝 카드가 3초 넘게 섰다
+    const dwell = dwells(kit, ctx);
+    const [lineAt, urlAt] = dwell
+      ? sayTimes(kit, [c.line, c.url], at + 0.2, Math.max(at + 0.2, ctx.dur - 1))
+      : [at + 0.2, at + 0.2 + (c.line ? 0.35 : 0)];
+    if (dwell) followSpoken(kit, ctx, [{ at, el: stage }, ...(lineEl ? [{ at: lineAt, el: lineEl }] : []), ...(urlEl ? [{ at: urlAt, el: urlEl }] : [])], { reach: 0.25, zoom: 1.05 });
     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 || dwell ? 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,8 +83,9 @@ 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);
-      if (line) line.style.visibility = t >= lineAt ? "visible" : "hidden";
+      point(t);
+      again?.(reread(t, againStops));
+      if (line) line.style.visibility = t >= Math.min(lineAt, urlAt) ? "visible" : "hidden";
       writeLine?.(t);
       writeUrl?.(t);
       if (urlEl) applyStyle(urlEl, t >= urlAt ? { scale: spring(t - urlAt, { from: 0.5, to: 1, stiffness: 320, damping: 14 }) } : { opacity: 0 });

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);
     };
   },