kasaframe 0.1.1 → 0.1.3

package/packages/motion/src/moves/karaokeLine.ts

@@ -1,4 +1,4 @@
-import { clamp, ease, safeTime } from "@kasaframe/core";
+import { clamp, ease, lerp, safeTime } from "@kasaframe/core";
 import { div, mark } from "./fit.ts";
 
 export interface KaraokeLine {
@@ -53,17 +53,22 @@ export function karaokeLine(el: HTMLElement, o: KaraokeLineOpts): (t: number) =>
     const band = div(
       doc,
       `position:absolute;left:50%;top:${y}px;display:flex;gap:.3em;white-space:nowrap;padding:.22em .6em;border-radius:.5em;` +
-        `background:rgba(10,10,14,.72);font-family:var(--kf-font-display);font-weight:800;font-size:${size}px;line-height:1.1;color:rgba(242,243,245,.55)`,
+        `background:rgba(10,10,14,.72);font-family:var(--kf-font-display);font-weight:800;font-size:${size}px;line-height:1.1;color:rgba(242,243,245,.42)`,
     );
+    // 지금 부르는 낱말 뒤 알약 — 낱말에서 낱말로 옮겨 가며 부르는 자리를 짚는다. 안 부른 글은 흐리게 둬 차오름이 밝기로도 보인다
+    const pill = div(doc, "position:absolute;left:0;top:.12em;height:1.3em;border-radius:.4em;background:color-mix(in srgb, var(--kf-accent) 30%, transparent)");
+    band.append(pill);
+    const spans: HTMLDivElement[] = [];
     const words = l.words.map((w) => {
       const span = div(doc, "position:relative;display:inline-block", w);
       const fill = div(doc, "position:absolute;left:0;top:0;color:var(--kf-accent)", w);
       span.append(fill);
       band.append(span);
+      spans.push(span);
       return fill;
     });
     layer.append(band);
-    return { band, words };
+    return { band, words, pill, spans };
   });
 
   return (t: number) => {
@@ -81,13 +86,22 @@ export function karaokeLine(el: HTMLElement, o: KaraokeLineOpts): (t: number) =>
       if (inP < 1 || outP > 0) moving = true;
       r.band.style.opacity = (inP * (1 - outP)).toFixed(3);
       r.band.style.transform = `translate(-50%, ${(-50 + 40 * (1 - inP) - 60 * outP).toFixed(1)}%)`;
+      let k = 0;
       r.words.forEach((f, j) => {
         const a = l.times[j];
         const b = Math.min(l.times[j + 1] ?? l.end, a + 0.6);
         const p = clamp((t - a) / Math.max(0.05, b - a));
         if (p > 0 && p < 1) moving = true;
+        if (t >= a) k = j;
         f.style.clipPath = `inset(0 ${((1 - p) * 100).toFixed(2)}% 0 0)`;
       });
+      // 알약은 부르는 낱말 자리로 미끄러져 간다 — 앞 낱말 자리에서 0.18초에 걸쳐
+      const cur = r.spans[k];
+      const prev = r.spans[Math.max(0, k - 1)];
+      const m = k > 0 ? ease.outCubic(clamp((t - l.times[k]) / 0.18)) : 1;
+      const pad = size * 0.18;
+      r.pill.style.transform = `translateX(${(lerp(prev.offsetLeft, cur.offsetLeft, m) - pad).toFixed(1)}px)`;
+      r.pill.style.width = `${(lerp(prev.offsetWidth, cur.offsetWidth, m) + pad * 2).toFixed(1)}px`;
     });
     mark("karaokeLine", o.scene, moving);
   };

package/packages/motion/src/moves/menu.ts

@@ -0,0 +1,138 @@
+import { rand } from "@kasaframe/core";
+
+// 뼈대 장면이 바로 거는 연출 수 메뉴. 「대충 한 요청」에서도 좋은 수가 나오게 kf new 가 장면마다 고르고(같은 요청이면 같은 수),
+// 지시서(MAKE.md)가 같은 메뉴를 보여 준다. DOM 을 안 만져 Node(계획·지시서)에서도 읽는다 — 실제로 거는 것은 dress.ts.
+
+export type DressKind = "bg" | "text" | "wipe";
+
+export interface MenuItem {
+  name: string;
+  kind: DressKind;
+  does: string;
+  /** examples/moves/<example>/ — 수만 따로 본 3–5초 예시 */
+  example?: string;
+}
+
+// 바탕(bg)은 장면 전체 뒤 — 정지만 둔다. 뜻 없이 떠도는 장식(빛 방울·도는 줄무늬·흐르는 모눈)은 보는 사람이 무엇인지 묻게 만든다.
+// 움직이는 바탕 수(sunburst·speedLines·gridFloor·truchet)는 장면이 이름으로 부를 때만 dressBg 가 건다.
+// 글(text)은 안전 영역 안, 덮기(wipe)는 장면 경계를 걸쳐 앞 장면 끝을 덮고 뒤 장면 처음에 걷힌다
+export const MENU: readonly MenuItem[] = [
+  { name: "still", kind: "bg", does: "정지 바탕 — 바탕색 위 아주 옅은 점 질감. 쉬지 않기는 글·숫자 수가 진다" },
+  { name: "bigWord", kind: "text", does: "큰 낱말 하나 + 등장 움직임(무대 기본)" },
+  { name: "slamWords", kind: "text", does: "박마다 낱말이 화면을 꽉 채우며 쾅 — 판과 글색이 뒤집힌다", example: "slamWords" },
+  { name: "echoStack", kind: "text", does: "같은 낱말이 박마다 한 벌씩 메아리치며 쌓인다", example: "echoStack" },
+  { name: "splitFlap", kind: "text", does: "판 넘김 글자판 — 칸마다 접히며 글자가 넘어가 앉는다", example: "splitFlap" },
+  { name: "ghostStack", kind: "text", does: "외곽선 유령 줄이 먼저 깔리고 박에 채워지며 위로 밀린다", example: "ghostStack" },
+  { name: "ransomLetters", kind: "text", does: "오려 붙인 글자 — 박마다 글자 모양을 다시 뽑는다", example: "ransomLetters" },
+  { name: "neonSign", kind: "text", does: "네온 관 글자가 시동 걸리듯 깜빡이다 켜진다", example: "neonSign" },
+  { name: "ledBoard", kind: "text", does: "LED 점 글판에 한 칸씩 찍힌다", example: "ledBoard" },
+  { name: "none", kind: "wipe", does: "덮지 않고 바로 컷" },
+  { name: "brushWipe", kind: "wipe", does: "붓 획 띠가 번갈아 덮었다가 꼬리가 빠지며 걷힌다", example: "brushWipe" },
+  { name: "irisBlades", kind: "wipe", does: "여섯 날 조리개가 닫혔다 열린다", example: "irisBlades" },
+  { name: "flood", kind: "wipe", does: "가운데 점이 화면을 넘치게 덮었다가 오므라든다", example: "flood" },
+];
+
+export const menuItem = (name: string): MenuItem | undefined => MENU.find((m) => m.name === name);
+
+export interface Pool {
+  bg?: string[];
+  text?: string[];
+  wipe?: string[];
+}
+
+/** 용도 틀(template.json moves)·테마가 주는 추천 묶음. roles 는 장면 역할(hook·drop·end …)마다 덮어쓴다 */
+export interface Bundle extends Pool {
+  roles?: Record<string, Pool>;
+}
+
+// 틀에 moves 가 없을 때 — 어느 용도에도 무난한 묶음
+const BASE: Required<Pool> = { bg: ["still"], text: ["bigWord", "echoStack", "splitFlap", "ghostStack"], wipe: ["brushWipe", "irisBlades", "flood"] };
+
+// 테마마다 비유에 맞는 수 — 테마를 고르면 용도 묶음보다 앞에 둔다(테마 효과와 결이 같은 것만)
+export const THEME_POOLS: Readonly<Record<string, Pool>> = {
+  "debug-hud": { text: ["splitFlap", "ledBoard", "ghostStack"], wipe: ["irisBlades", "flood"] },
+  "og-measure": { text: ["splitFlap", "ghostStack", "echoStack"], wipe: ["irisBlades", "flood"] },
+  "kasaterm-cells": { text: ["ledBoard", "splitFlap", "slamWords"], wipe: ["flood", "irisBlades"] },
+  "kawaii-sticker": { text: ["ransomLetters", "slamWords", "echoStack"], wipe: ["brushWipe", "flood"] },
+  "riso-zine": { text: ["ransomLetters", "echoStack", "slamWords"], wipe: ["brushWipe", "flood"] },
+  "depth-flight": { text: ["neonSign", "ghostStack", "splitFlap"], wipe: ["irisBlades", "flood"] },
+  "iso-diorama": { text: ["splitFlap", "echoStack", "ghostStack"], wipe: ["irisBlades", "brushWipe"] },
+  "glass-light": { text: ["ghostStack", "echoStack", "splitFlap"], wipe: ["irisBlades", "flood"] },
+};
+
+const known = (kind: DressKind) => (n: string) => menuItem(n)?.kind === kind;
+
+/** 틀 묶음 + 테마 묶음 → 한 벌. 테마 수를 앞에, 메뉴에 없는 이름은 버린다 */
+export function bundleFor(tpl?: Bundle, theme?: string): Required<Bundle> {
+  const th = theme ? THEME_POOLS[theme] : undefined;
+  const merge = (kind: DressKind, ...lists: (string[] | undefined)[]) => [...new Set(lists.flatMap((l) => l ?? []))].filter(known(kind));
+  const roles: Record<string, Pool> = {};
+  for (const [role, p] of Object.entries(tpl?.roles ?? {})) {
+    // 역할 몫은 틀이 이유를 대고 고른 것(훅은 첫 프레임부터 꽉 차는 글) — 테마 수는 그 뒤에 섞지 않는다
+    roles[role] = { bg: p.bg?.filter(known("bg")), text: p.text?.filter(known("text")), wipe: p.wipe?.filter(known("wipe")) };
+  }
+  const bg = merge("bg", th?.bg, tpl?.bg ?? BASE.bg);
+  return {
+    bg: bg.length ? bg : BASE.bg,
+    text: merge("text", th?.text, tpl?.text ?? BASE.text),
+    wipe: merge("wipe", th?.wipe, tpl?.wipe ?? BASE.wipe),
+    roles,
+  };
+}
+
+export interface Dress {
+  bg: string;
+  text: string;
+  /** 앞 장면 경계에서 걷히는 덮기 — 앞 장면의 wipeOut 과 같은 이름이라 이어진다 */
+  wipeIn: string;
+  wipeOut: string;
+}
+
+export const NO_DRESS: Dress = { bg: "still", text: "bigWord", wipeIn: "none", wipeOut: "none" };
+
+/** 같은 요청·용도·테마면 같은 글이 나오게 공백만 고른다 */
+export const dressSeed = (...parts: (string | undefined | null)[]): string =>
+  parts
+    .map((p) => (p ?? "").trim().replace(/\s+/g, " "))
+    .join("|");
+
+// 이어지는 장면이 같은 수를 쓰지 않게 — 고를 게 하나뿐이면 그대로
+function choose(seed: string, i: number, list: readonly string[], avoid: string | undefined): string {
+  const pool = list.length > 1 && avoid ? list.filter((x) => x !== avoid) : list;
+  return pool[Math.min(pool.length - 1, Math.floor(rand(seed, i) * pool.length))];
+}
+
+/**
+ * 장면마다 바탕·글·경계 덮기를 고른다. 시드(요청 글·용도·테마)가 같으면 늘 같은 고름이다.
+ * - 이음매(seam)는 3D 전환이 맡아 아무것도 걸지 않고, 그 앞뒤 경계도 덮지 않는다(전환이 앞뒤 화면을 그대로 잡아야 한다).
+ * - 드롭으로 들어가는 경계는 덮지 않는다 — 드롭 첫 박은 맨 화면으로 터져야 한다. 첫 장면은 첫 프레임부터 내용이 있어야 해서 덮고 시작하지 않는다.
+ * - 되돌이(loop)면 마지막 장면 끝도 덮지 않는다(끝 화면이 첫 화면으로 이어진다).
+ */
+export function pickDress(seed: string, scenes: readonly { id: string; role: string; dur: number }[], bundle: Required<Bundle>): Dress[] {
+  const out: Dress[] = [];
+  for (const [i, s] of scenes.entries()) {
+    if (s.role === "seam") {
+      out.push({ ...NO_DRESS });
+      continue;
+    }
+    const role = bundle.roles[s.role] ?? {};
+    const prev = out[i - 1];
+    const bg = choose(seed, i * 4, role.bg?.length ? role.bg : bundle.bg, prev?.bg);
+    const text = choose(seed, i * 4 + 1, role.text?.length ? role.text : bundle.text, prev?.text);
+    out.push({ bg, text, wipeIn: "none", wipeOut: "none" });
+  }
+  let last = "";
+  for (let i = 0; i + 1 < scenes.length; i++) {
+    const a = scenes[i];
+    const b = scenes[i + 1];
+    if (a.role === "seam" || b.role === "seam" || b.role === "drop" || a.dur < 1.2 || b.dur < 1.2) continue;
+    const list = (bundle.roles[b.role]?.wipe?.length ? bundle.roles[b.role].wipe : bundle.wipe) ?? [];
+    if (!list.length) continue;
+    const w = choose(seed, i * 4 + 2, list, last);
+    if (w === "none") continue;
+    out[i].wipeOut = w;
+    out[i + 1].wipeIn = w;
+    last = w;
+  }
+  return out;
+}

package/packages/motion/src/moves/neonSign.ts

@@ -64,7 +64,8 @@ export function neonSign(el: HTMLElement, o: NeonSignOpts): (t: number) => void
         if (cyc > 0.9 && cyc < 0.98) on = false;
       }
       if (on) lit++;
-      l.s.style.color = on ? "#FFF3F6" : "rgba(120,60,80,.55)";
+      // 꺼진 관도 읽혀야 한다 — 어두운 벽 위 3:1 넘는 흐린 유리색(검사 text.contrast)
+      l.s.style.color = on ? "#FFF3F6" : "#9A6478";
       l.s.style.textShadow = on ? glow : "none";
     });
     // 벽 번짐은 켜진 관 수만큼, 미세하게 웅웅거린다

package/packages/motion/src/moves/slamWords.ts

@@ -13,13 +13,14 @@ export interface SlamWordsOpts {
   scene?: string;
 }
 
+// 바탕 밝기는 거의 그대로 두고 글색만 뒤집는다 — 박마다 화면 전체가 강조색 바탕으로 번쩍이면 1초에 섬광 세 번을 넘는다(frame.flash)
 const PALETTES: [string, string][] = [
   ["var(--kf-bg)", "var(--kf-ink)"],
-  ["var(--kf-accent)", "var(--kf-on-accent)"],
+  ["var(--kf-raised)", "var(--kf-accent)"],
 ];
 
 /**
- * 박마다 낱말 하나가 화면을 꽉 채우며 쾅 — 1.22배에서 내려앉고, 글자는 바닥에서 꼬리를 끌며 차례로 솟고, 바탕색이 뒤집힌다.
+ * 박마다 낱말 하나가 화면을 꽉 채우며 쾅 — 1.22배에서 내려앉고, 글자는 바닥에서 꼬리를 끌며 차례로 솟고, 판과 글색이 뒤집힌다.
  * 다음 박까지는 다가가며 옆으로 흘러 멈추지 않는다. (mexicat 「I'm Upping My P(doom)」 59–60초의 훅)
  */
 export function slamWords(el: HTMLElement, o: SlamWordsOpts): (t: number) => void {
@@ -30,7 +31,8 @@ export function slamWords(el: HTMLElement, o: SlamWordsOpts): (t: number) => voi
   const layer = div(doc, "position:absolute;inset:0;overflow:hidden");
   el.append(layer);
   const words = o.words.slice(0, o.hits.length).map((text) => {
-    const px = fitSize(text, W, H, { share: 0.9, hShare: 0.72 });
+    // 폭 80% — 1.22배로 내려앉는 순간에도 화면 안(글자가 화면 끝을 넘나들면 잘림·섬광 검사에 걸린다)
+    const px = fitSize(text, W, H, { share: 0.8, hShare: 0.72 });
     const box = div(
       doc,
       `position:absolute;left:50%;top:50%;display:flex;white-space:nowrap;font-family:var(--kf-font-display);font-size:${px}px;` +
@@ -70,9 +72,13 @@ export function slamWords(el: HTMLElement, o: SlamWordsOpts): (t: number) => voi
       wd.box.style.color = ink;
       const land = ease.outCubic(clamp(local / 0.2));
       const after = Math.max(0, local - 0.2);
-      // 박 사이에도 다가가며 옆으로 흘러야 0.1초 멈춤에 안 걸린다(짧은 낱말일수록 움직임이 작게 보인다)
-      const scale = (1.22 - 0.22 * land) * (1 + 0.16 * after);
-      const dx = (i % 2 ? -1 : 1) * W * 0.05 * after;
+      // 박 사이에도 다가가며 옆으로 흘러야 0.1초 멈춤에 안 걸린다. 얼마나 다가가나는 다음 쾅까지의 몫으로 —
+      // 쾅 사이가 길어도 낱말이 화면 밖으로 커지지 않는다(마지막 낱말은 1초 몫, 그 뒤로는 아주 천천히)
+      const hold = Math.max(0.3, (o.hits[i + 1] ?? o.hits[i] + 1) - o.hits[i] - 0.2);
+      const q = after / hold;
+      const grow = 0.12 * Math.min(q, 1) + 0.03 * Math.max(0, q - 1);
+      const scale = (1.22 - 0.22 * land) * (1 + grow);
+      const dx = (i % 2 ? -1 : 1) * W * 0.035 * Math.min(q, 1.3);
       wd.box.style.transform = `translate(calc(-50% + ${dx.toFixed(1)}px),-50%) scale(${scale.toFixed(4)})`;
       const each = Math.min(0.035, 0.12 / wd.letters.length);
       wd.letters.forEach((l, j) => {
@@ -81,7 +87,8 @@ export function slamWords(el: HTMLElement, o: SlamWordsOpts): (t: number) => voi
         l.span.style.opacity = p > 0 ? "1" : "0";
         l.span.style.transform = `translateY(${((1 - e) * wd.px * 0.7).toFixed(1)}px)`;
         l.tail.style.transform = `scaleY(${(1 - e).toFixed(3)})`;
-        l.tail.style.opacity = (0.8 * (1 - e)).toFixed(3);
+        // 꼬리 줄무늬는 옅게 — 진한 줄무늬가 솟으며 칸마다 밝음·어둠을 오가 섬광 검사(frame.flash)에 걸렸다
+        l.tail.style.opacity = (0.35 * (1 - e)).toFixed(3);
       });
       mark("slamWords", o.scene, local < 0.25);
     });

package/packages/motion/src/moves/sparkTrail.ts

@@ -14,6 +14,8 @@ export interface SparkTrailOpts {
   color?: string;
   width?: number;
   sparks?: number;
+  /** 선 아래(이 y 까지)를 옅게 채운다 — 값의 흐름을 그린 선이면 그래프 면적이 머리를 따라 차오른다 */
+  area?: { to: number; color?: string };
   w?: number;
   h?: number;
   seed?: string | number;
@@ -53,6 +55,20 @@ export function sparkTrail(el: HTMLElement, o: SparkTrailOpts): (t: number) => v
     if (!color) color = getComputedStyle(el.ownerDocument.documentElement).getPropertyValue("--kf-accent").trim() || "#ff6b2c";
     const head = sAt(t);
     const from = o.tail !== undefined ? Math.max(0, sAt(t - o.tail)) : 0;
+    if (o.area && head > 0) {
+      g.beginPath();
+      const p0 = pointAt(pts, cum, 0);
+      g.moveTo(p0.x, o.area.to);
+      g.lineTo(p0.x, p0.y);
+      for (let i = 0; i < pts.length && cum[i] < head; i++) g.lineTo(pts[i][0], pts[i][1]);
+      const ph = pointAt(pts, cum, head);
+      g.lineTo(ph.x, ph.y);
+      g.lineTo(ph.x, o.area.to);
+      g.closePath();
+      g.globalAlpha = 1;
+      g.fillStyle = o.area.color ?? `color-mix(in srgb, ${color} 22%, transparent)`;
+      g.fill();
+    }
     g.lineCap = "round";
     g.lineJoin = "round";
     g.strokeStyle = color;

package/packages/motion/src/moves/splitFlap.ts

@@ -139,9 +139,11 @@ export function splitFlap(el: HTMLElement, o: SplitFlapOpts): (t: number) => voi
       flapBottom.box.style.transform = `rotateX(${(90 * (1 - b)).toFixed(2)}deg)`;
       flapBottom.box.style.filter = `brightness(${(0.6 + 0.4 * b).toFixed(3)})`;
     });
-    // 판 위로 빛이 늘 지나가고 판이 조금씩 다가가 — 글자가 다 앉은 뒤에도 멈추지 않는다
+    // 판 위로 빛이 늘 지나가고, 넘김 사이에는 판이 다가가다 다음 넘김에 제자리로 — 글자가 다 앉은 뒤에도 멈추지 않는다.
+    // 밝은 바탕에서 판 넘김·빛만으로는 160px 썸네일의 평균 밝기 차 0.35 를 못 넘어 멈춤(frame.freeze)으로 잡혔다
     gloss.style.backgroundPosition = `${(100 - ((t * 45) % 200)).toFixed(1)}% 0`;
-    board.style.transform = `scale(${(1 + 0.02 * t).toFixed(4)})`;
+    const since = k < 0 ? t : t - o.times[k];
+    board.style.transform = `scale(${(1 + 0.06 * Math.min(since, 1.5)).toFixed(4)})`;
     mark("splitFlap", o.scene, moving);
   };
 }

package/packages/motion/src/moves/stepWords.ts

@@ -99,19 +99,30 @@ export function stepWords(el: HTMLElement, o: StepWordsOpts): (t: number) => voi
     const hp = pointAt(corners, cum, reach);
     dot.setAttribute("cx", hp.x.toFixed(1));
     dot.setAttribute("cy", hp.y.toFixed(1));
-    tags.forEach((g, i) => {
-      const local = t - o.steps[i].at;
-      const p = clamp(local / 0.22);
-      const [cx, cy] = corners[ends[i]];
-      g.tag.style.opacity = local >= 0 ? "1" : "0";
-      g.tag.style.transform = `translate(${(cx + 28).toFixed(1)}px,${(cy - size * 0.62).toFixed(1)}px) rotate(${g.tilt.toFixed(2)}deg) scale(${ease.outBack(p).toFixed(4)})`;
-    });
     // 카메라: 그리는 머리를 화면 가운데 쪽으로 천천히 따라간다
     const fx = W * 0.5 - hp.x;
     const fy = H * 0.5 - hp.y;
     const follow = 0.85;
     // 마지막 칸 뒤에도 떠다녀 멈추지 않는다
-    cam.style.transform = `translate(${(fx * follow + 24 * Math.sin(t * 1.4)).toFixed(1)}px,${(fy * follow + 14 * Math.sin(t * 1.9)).toFixed(1)}px) scale(${(1 + 0.03 * t).toFixed(4)})`;
+    const camX = fx * follow + 24 * Math.sin(t * 1.4);
+    const camY = fy * follow + 14 * Math.sin(t * 1.9);
+    const zoom = 1 + 0.03 * t;
+    cam.style.transform = `translate(${camX.toFixed(1)}px,${camY.toFixed(1)}px) scale(${zoom.toFixed(4)})`;
+    const toX = (x: number) => W / 2 + (x - W / 2) * zoom + camX;
+    const toY = (y: number) => H / 2 + (y - H / 2) * zoom + camY;
+    tags.forEach((g, i) => {
+      const local = t - o.steps[i].at;
+      const p = clamp(local / 0.22);
+      const [cx, cy] = corners[ends[i]];
+      const x = cx + 28;
+      const y = cy - size * 0.62;
+      // 카메라가 앞으로 가면 지난 칸은 화면 밖으로 빠진다 — 끝에 걸리기 전에 흐려진다(잘린 글이 남지 않게)
+      const tw = g.tag.offsetWidth || size * 3;
+      const th = g.tag.offsetHeight || size * 1.2;
+      const edge = Math.min(toX(x), toY(y), W - toX(x + tw), H - toY(y + th));
+      g.tag.style.opacity = local >= 0 ? clamp(edge / (size * 0.5)).toFixed(3) : "0";
+      g.tag.style.transform = `translate(${x.toFixed(1)}px,${y.toFixed(1)}px) rotate(${g.tilt.toFixed(2)}deg) scale(${ease.outBack(p).toFixed(4)})`;
+    });
     mark("stepWords", o.scene, k < n - 1 || t - (times[n - 1] ?? 0) < 0.22);
   };
 }

package/packages/motion/src/moves/tickerRows.ts

@@ -1,5 +1,5 @@
 import { clamp, ease, safeTime } from "@kasaframe/core";
-import { div, mark, textEm } from "./fit.ts";
+import { div, mark, strip, textEm } from "./fit.ts";
 
 export interface TickerRow {
   text: string;
@@ -24,7 +24,6 @@ export interface TickerRowsOpts {
   at?: number;
   w?: number;
   h?: number;
-  dur?: number;
   scene?: string;
 }
 
@@ -40,7 +39,6 @@ export function tickerRows(el: HTMLElement, o: TickerRowsOpts): (t: number) => v
   const gap = o.gap ?? 22;
   const top = o.top ?? (H - o.rows.length * (rowH + gap) + gap) / 2;
   const at = o.at ?? 0;
-  const dur = o.dur ?? 30;
   const fs = rowH * 0.46;
   const layer = div(doc, "position:absolute;inset:0;overflow:hidden");
   el.append(layer);
@@ -48,14 +46,16 @@ export function tickerRows(el: HTMLElement, o: TickerRowsOpts): (t: number) => v
     const speed = r.speed ?? (i % 2 ? -1 : 1) * (150 + 40 * i);
     const unit = `${r.text}\u00a0\u00a0\u2022\u00a0\u00a0`;
     const unitW = textEm(unit) * fs;
-    const reps = Math.ceil((W * 1.6 + Math.abs(speed) * dur) / unitW) + 2;
     const band = div(
       doc,
       `position:absolute;left:${-W * 0.1}px;width:${W * 1.2}px;top:${top + i * (rowH + gap)}px;height:${rowH}px;overflow:hidden;` +
         `background:${r.band ?? "var(--kf-surface)"};color:${r.ink ?? "var(--kf-ink)"};border-top:3px solid var(--kf-ink);border-bottom:3px solid var(--kf-ink);transform-origin:50% 50%`,
     );
-    const strip = div(doc, `position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;white-space:nowrap;font-family:var(--kf-font-mono);font-weight:600;font-size:${fs}px`, unit.repeat(reps));
-    band.append(strip);
+    const line = div(doc, `position:absolute;left:0;top:0;width:100%;height:100%;font-family:var(--kf-font-mono);font-weight:600;font-size:${fs}px`);
+    band.append(line);
+    // 낱말마다 조각 — 띠 끝에서 낱말 하나씩 흐려진다
+    const pieces = unit.split(/(?<=\s)(?=\S)/);
+    const flow = strip(line, pieces, Math.ceil((W * 1.2) / unitW) + 2, (x) => textEm(x) * fs);
     let chip: HTMLDivElement | null = null;
     if (r.label) {
       chip = div(
@@ -66,9 +66,13 @@ export function tickerRows(el: HTMLElement, o: TickerRowsOpts): (t: number) => v
       band.append(chip);
     }
     layer.append(band);
-    return { band, strip, speed, reps, unitW, angle: r.angle ?? 0 };
+    return { band, flow, chip, speed, angle: r.angle ?? 0 };
   });
 
+  // 칩이 덮은 띠 머리 — 그 밑으로 지나는 조각도 화면 끝처럼 흐린다(칩 뒤에 반쯤 가린 글이 남지 않게)
+  const chipEnd = (i: number) => (o.rows[i].label ? Math.max(0, chips[i]?.offsetWidth ?? 0) : 0);
+  const chips = rows.map((r) => r.chip);
+
   return (t: number) => {
     t = safeTime(t);
     let moving = false;
@@ -79,8 +83,8 @@ export function tickerRows(el: HTMLElement, o: TickerRowsOpts): (t: number) => v
       // 띠 전체가 옆에서 밀려 들어오고, 안의 글은 그 뒤로도 늘 흐른다
       const enterX = (1 - p) * (i % 2 ? W : -W) * 1.2;
       r.band.style.transform = `translateX(${enterX.toFixed(1)}px) rotate(${r.angle}deg)`;
-      const x = -(r.reps * r.unitW) / 2 + r.speed * t;
-      r.strip.style.transform = `translateX(${x.toFixed(1)}px)`;
+      // 띠는 화면보다 양옆 10% 넓다 — 띠 안 x 를 화면 x 로 옮겨 화면 끝에 걸친 조각을 흐린다(칩에 가린 왼쪽 끝도)
+      r.flow(r.speed * t, (x) => x - W * 0.1 + enterX, [chipEnd(i), W], fs * 1.6);
     });
     mark("tickerRows", o.scene, moving);
   };

package/packages/motion/src/moves/tokenPicker.ts

@@ -80,14 +80,15 @@ export function tokenPicker(el: HTMLElement, o: TokenPickerOpts): (t: number) =>
     const text = o.steps.slice(0, k + 1).map((s) => s.token).join("");
     typed.textContent = text;
     caret.style.opacity = Math.floor(t * 2.2) % 2 === 0 || t - (o.times[k] ?? -9) < 0.4 ? "1" : "0.15";
-    // 다음 토큰 — 붙기 0.32초 전부터 후보가 끓고, 0.08초 전에 하나가 켜진다
+    // 다음 토큰 — 앞 토큰이 붙은 뒤부터 다음 토큰까지 후보 확률이 끓고(모델이 고르는 동안 숫자가 구른다), 0.08초 전에 하나가 켜진다
     const j = k + 1 < n ? k + 1 : -1;
-    const local = j >= 0 ? t - (o.times[j] - 0.32) : -1;
+    const from = j >= 0 ? Math.min(o.times[j] - 0.32, k >= 0 ? o.times[k] + 0.12 : o.times[j] - 0.6) : 0;
+    const local = j >= 0 ? t - from : -1;
     const show = j >= 0 && local >= 0;
     panel.style.display = show ? "block" : "none";
     if (show) {
       const step = o.steps[j];
-      const pick = ease.outCubic(clamp((local - 0.24) / 0.08));
+      const pick = ease.outCubic(clamp((t - (o.times[j] - 0.08)) / 0.08));
       const x = Math.min(W - size * 7.6, Math.max(W * 0.04, caretX(text) - size * 1.2));
       panel.style.left = `${x.toFixed(1)}px`;
       panel.style.transform = `translateY(${((1 - ease.outCubic(clamp(local / 0.1))) * 18).toFixed(1)}px)`;

package/packages/motion/src/moves/wordWall.ts

@@ -1,5 +1,5 @@
 import { clamp, ease, lerp, safeTime } from "@kasaframe/core";
-import { div, lastIndex, mark, textEm } from "./fit.ts";
+import { div, lastIndex, mark, strip, textEm } from "./fit.ts";
 
 export interface WordWallOpts {
   word: string;
@@ -13,8 +13,6 @@ export interface WordWallOpts {
   speed?: number;
   w?: number;
   h?: number;
-  /** 장면 길이 — 띠가 끝까지 모자라지 않게 */
-  dur?: number;
   scene?: string;
 }
 
@@ -31,23 +29,23 @@ export function wordWall(el: HTMLElement, o: WordWallOpts): (t: number) => void
   const base = H / counts[0];
   const F0 = base * 0.84;
   const speed = (o.speed ?? 90) * (H / 1080);
-  const dur = o.dur ?? 30;
   const unit = `${o.word}\u00a0\u00a0`;
   const minScale = counts[0] / maxRows;
-  const reps = Math.ceil((W / minScale + speed * dur * 2) / (textEm(unit) * F0)) + 2;
+  const unitGuess = textEm(unit) * F0;
+  // 가장 작아졌을 때(줄 수가 가장 많을 때)도 화면 폭을 덮는 조각 수
+  const count = Math.ceil(W / minScale / unitGuess) + 2;
+  const guess = (x: string) => textEm(x) * F0;
   const layer = div(doc, "position:absolute;inset:0;overflow:hidden;color:var(--kf-ink)");
   el.append(layer);
-  const strips = Array.from({ length: maxRows }, (_, i) => {
-    const s = div(
-      doc,
-      `position:absolute;left:0;top:0;white-space:nowrap;font-family:var(--kf-font-display);font-weight:900;font-size:${F0}px;line-height:1;letter-spacing:-.03em;transform-origin:0 50%`,
-      unit.repeat(reps),
-    );
+  const rowCss = `position:absolute;left:0;top:0;height:${F0}px;font-family:var(--kf-font-display);font-weight:900;font-size:${F0}px;line-height:1;letter-spacing:-.03em;transform-origin:0 50%`;
+  const strips = Array.from({ length: maxRows }, () => {
+    const s = div(doc, rowCss);
     layer.append(s);
-    return s;
+    return { s, flow: strip(s, [unit], count, guess) };
   });
-  const hotStrip = div(doc, `position:absolute;left:0;top:0;white-space:nowrap;font-family:var(--kf-font-display);font-weight:900;font-size:${F0}px;line-height:1;letter-spacing:-.03em;transform-origin:0 50%;color:var(--kf-accent)`, `${o.hot ?? o.word}\u00a0\u00a0`.repeat(reps));
-  layer.append(hotStrip);
+  const hot = div(doc, `${rowCss};color:var(--kf-accent)`);
+  layer.append(hot);
+  const hotFlow = strip(hot, [`${o.hot ?? o.word}\u00a0\u00a0`], count, guess);
   const yOf = (i: number, n: number) => (i + 0.5) * (H / n);
 
   return (t: number) => {
@@ -58,18 +56,22 @@ export function wordWall(el: HTMLElement, o: WordWallOpts): (t: number) => void
     const p = k > 0 || t >= (o.hits[0] ?? 0) ? ease.outCubic(clamp((t - (o.hits[k] ?? 0)) / 0.28)) : 1;
     const scale = lerp(n0 > 0 ? counts[0] / n0 : 1, counts[0] / n1, p);
     const hotRow = Math.floor(n1 / 2);
-    strips.forEach((s, i) => {
+    const toScreen = (x: number) => x * scale;
+    const fade = W * 0.06;
+    strips.forEach(({ s, flow }, i) => {
       const y = i < n0 ? lerp(yOf(i, n0), yOf(i, n1), p) : yOf(i, n1);
       const show = i < n1 ? (i < n0 ? 1 : p) : 0;
       const dir = i % 2 ? 1 : -1;
-      // 시작 자리를 줄마다 어긋나게 — 흐름이 띠 끝에 닿지 않도록 가운데쯤에서 시작
-      const x = -(reps * textEm(unit) * F0 * scale) / 2 + dir * speed * t + i * 137;
-      s.style.transform = `translate(${x.toFixed(1)}px,${(y - (F0 * scale) / 2).toFixed(1)}px) scale(${scale.toFixed(4)})`;
+      // 시작 자리를 줄마다 어긋나게
+      const offset = (dir * speed * t + i * 137) / scale;
+      // 크기 기준점이 줄 판의 세로 가운데(transform-origin 0 50%)라 판 높이 절반만 빼면 줄 가운데가 y 에 선다
+      s.style.transform = `translate(0px,${(y - F0 / 2).toFixed(1)}px) scale(${scale.toFixed(4)})`;
+      s.style.display = show > 0 || i === hotRow ? "block" : "none";
       s.style.opacity = (i === hotRow ? 0 : show * 0.32).toFixed(3);
       if (i === hotRow) {
-        hotStrip.style.transform = s.style.transform;
-        hotStrip.style.opacity = "1";
-      }
+        hot.style.transform = s.style.transform;
+        hotFlow(offset, toScreen, [0, W], fade);
+      } else if (show > 0) flow(offset, toScreen, [0, W], fade);
     });
     mark("wordWall", o.scene, p < 1);
   };

package/packages/motion/src/moves/worldRoll.ts

@@ -24,7 +24,8 @@ export function worldRoll(t: number, o: WorldRollOpts): Style {
     if (local <= 0) continue;
     rotate += turn * spring(local, { from: 0, to: 1, stiffness: 120, damping: 13 });
     dip = Math.max(dip, Math.sin(Math.PI * clamp(local / 0.45)));
-    if (local < 0.6) moving = true;
+    // 스프링 꼬리(넘쳤다 돌아오기)까지 굴림이다 — 그동안도 카메라 이벤트를 남겨 이유 없는 이동(camera.wander)으로 안 센다
+    if (local < 1.1) moving = true;
   }
   if (moving) emit({ kind: "camera", source: "worldRoll", scene: o.scene, value: 1 });
   return { rotate, scale: 1 - 0.16 * dip };

package/packages/motion/src/transition3d/index.ts

@@ -11,6 +11,7 @@ import { portal } from "./portal.ts";
 import { shatter } from "./shatter.ts";
 import { zoomOut } from "./zoomOut.ts";
 import { whip } from "./whip.ts";
+import { land, rise, type HeroRect } from "./space.ts";
 import { GL_NAMES, SMOOTH_NAMES, glKind, smoothKind, type GlValue } from "./gl.ts";
 
 export { TRANSITIONS_3D, DUR_3D, FIT, FOV, CHAIN_GAP, durOf, resolveTiming, rawProgress, arrivalsOn } from "./rig.ts";
@@ -22,6 +23,7 @@ export type { Painter, Source, Palette, LiveDom, VideoSource } from "./world.ts"
 export { elementTextures } from "./world.ts";
 export { sceneSource, liveNeighbors } from "./live.ts";
 export type { LiveProject } from "./live.ts";
+export type { HeroRect } from "./space.ts";
 
 export interface Transition3dOpts extends TimingOpts {
   /** 기본 dive */
@@ -46,6 +48,8 @@ export interface Transition3dOpts extends TimingOpts {
   window?: WindowRect;
   /** fold — accordion 접기 · roll 말기 */
   fold?: FoldStyle;
+  /** rise·land — 3D 로 서거나 내려앉을 주인공 상자(화면 비율, 왼쪽 위 0). 안 주면 살아 있는 장면의 [data-kf-hero] 를 프레임마다 잰다 */
+  hero?: HeroRect;
   /** gl:<이름> — 셰이더 매개변수 덮기(uniform 이름 → 값) */
   params?: Record<string, GlValue>;
   /** 빠르기 곡선 — ramp(기본): 천천히 들어가다 확 빨라진다 · linear: 종류가 정한 그대로 */
@@ -64,7 +68,7 @@ export interface Transition3dOpts extends TimingOpts {
 export type Transition3dDraw = ((t: number) => void) & { timing: Timing; kind: Transition3dName; dispose(): void };
 
 type Build = (k: Kit, o: Transition3dOpts & { arrivals: number[] }) => KindRun & { visible?(t: number): boolean[] };
-const KINDS: Record<(typeof TRANSITIONS_3D)[number], Build> = { dive, portal, cards, shatter, zoomOut, fold, diveChain: chain, whip };
+const KINDS: Record<(typeof TRANSITIONS_3D)[number], Build> = { dive, portal, cards, shatter, zoomOut, fold, diveChain: chain, whip, rise, land };
 
 function builderOf(kind: Transition3dName): Build | undefined {
   if (kind.startsWith("gl:")) return glKind(kind.slice(3));
@@ -155,20 +159,23 @@ export function transition3d(root: HTMLElement, ctxOrOpts?: SceneCtx | Transitio
     fx.dolly = land && inside ? 0.07 * FIT * Math.sin(Math.PI * s) ** 2 * (1 - s) : 0;
     let sx = 0;
     let sy = 0;
+    let amp = 0;
     let punch = 0;
     for (const [i, h] of hits.entries()) {
       const dt = t - h;
       if (!inside || dt < 0 || dt > 0.5) continue;
       const env = Math.exp(-dt / 0.11);
+      amp += 0.01 * env;
       sx += 0.01 * env * Math.sin(2 * Math.PI * 17 * dt + rand(seed, 40 + i) * 6.283);
       sy += 0.01 * env * Math.sin(2 * Math.PI * 13 * dt + rand(seed, 50 + i) * 6.283);
       punch -= 7 * Math.exp(-dt / 0.16) * (1 - Math.exp(-dt / 0.02));
     }
     fx.shake = [sx, sy];
     fx.fov = punch;
-    // 화면 높이 1 = 꽉 찬 화면이라 흔들림 0.01 은 높이의 1% — 검사가 px 로 센다
+    // 화면 높이 1 = 꽉 찬 화면이라 흔들림 0.01 은 높이의 1% — 검사가 px 로 센다. 흔들림이 0 을 지나는 프레임에도 남겨야
+    // 한 번 친 흔들림이 끊긴 여러 번으로 세이지 않는다 — 잦아드는 폭(amp)이 0.5px 넘는 동안 이어서 남긴다
     const px = Math.hypot(sx, sy) * h;
-    if (px > 0.5 && o.emit !== false) emit({ kind: "shake", source: `${source}:hit`, scene, value: Math.round(px * 10) / 10 });
+    if (amp * h > 0.5 && o.emit !== false) emit({ kind: "shake", source: `${source}:hit`, scene, value: Math.round(px * 10) / 10 });
     const smp = frameSample();
     if (aperture > 0 && inside && smp.count > 1) {
       // 황금각 나선 — 하위 프레임들이 조리개 원판을 고르게 덮는다