kasaframe 0.1.1 → 0.1.4

package/packages/themes/src/vary.ts

@@ -0,0 +1,290 @@
+// 변주 — 세계 하나에서 겉모습만 바꾼 판을 데이터로 뽑는다(SPEC 9 변주). 코드는 세계 것을 그대로 쓰고, 여기서는 style 위에 덮을 판만 짓는다.
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { rand, randRange, type KfStyle } from "@kasaframe/core";
+import { hueDist, labOf, parseColor } from "./color.ts";
+import { lchOf, NEUTRAL_C, transformPalette } from "./palette.ts";
+import type { TextureKind, ThemeManifest, ThemeTags, ThemeVary, VariantManifest, VariantParams } from "./types.ts";
+
+export interface FontPair {
+  id: string;
+  name: string;
+  ko: string;
+  tags: string[];
+  sans: string;
+  display: string;
+  mono: string;
+  faces: NonNullable<KfStyle["fonts"]["faces"]>;
+  weightDisplay: number;
+  weightBody: number;
+  tracking: string;
+  monoAll?: boolean;
+}
+
+let pairs: FontPair[] | null = null;
+export const fontPairs = (): FontPair[] => (pairs ??= JSON.parse(readFileSync(fileURLToPath(new URL("../kit/fonts.json", import.meta.url)), "utf8")));
+
+/** 세계가 허락한 글꼴 짝 — 「base」는 세계 글꼴 그대로 */
+export function allowedFonts(vary: ThemeVary): string[] {
+  const all = fontPairs().filter((p) => !vary.monoAll || p.monoAll);
+  const want = vary.fonts ?? ["base"];
+  const ids = want.flatMap((w) => (w === "base" ? ["base"] : w.startsWith("tag:") ? all.filter((p) => p.tags.includes(w.slice(4))).map((p) => p.id) : all.some((p) => p.id === w) ? [w] : []));
+  return [...new Set(ids)];
+}
+
+// 질감마다 기본 세기 — 엔진이 깐 층의 불투명도
+const TEXTURE_AMOUNT: Record<TextureKind, number> = { none: 0, grain: 0.55, paper: 0.8, noise: 0.35, scan: 0.22, halftone: 0.16 };
+
+const BG_L = { light: [0.93, 0.99], dark: [0.12, 0.22] } as const;
+// 어두운 바탕은 같은 채도라도 빛깔이 덜 보인다 — 거기서는 무채색 빛깔을 더 얹는다
+const DARK_TINT = 1.7;
+const INK_L = { light: [0.14, 0.26], dark: [0.91, 0.97] } as const;
+
+/** 세계 자신 — 변주를 잴 때의 원점 */
+export function baseParams(style: KfStyle): VariantParams {
+  const bg = lchOf(style.colors.bg);
+  return {
+    scheme: style.scheme,
+    bgL: bg.l,
+    tint: { h: bg.h, c: bg.c },
+    inkL: lchOf(style.colors.ink).l,
+    hue: lchOf(style.colors.accent).h,
+    chroma: 1,
+    fonts: "base",
+    texture: style.look?.texture ?? { kind: "none", amount: 0 },
+    stroke: style.look?.stroke ?? 1,
+    radius: null,
+    tempo: style.look?.tempo ?? 1,
+    density: style.look?.density ?? 1,
+  };
+}
+
+const inRanges = (h: number, ranges: [number, number][]) => ranges.some(([a, b]) => (a <= b ? h >= a && h <= b : h >= a || h <= b));
+
+function sampleHue(seed: string, i: number, ranges: [number, number][]): number {
+  const span = ranges.map(([a, b]) => (a <= b ? b - a : 360 - a + b));
+  let x = rand(seed, i) * span.reduce((s, v) => s + v, 0);
+  for (const [k, [a]] of ranges.entries()) {
+    if (x <= span[k]) return (a + x) % 360;
+    x -= span[k];
+  }
+  return ranges[0][0];
+}
+
+/** 손잡이 값 하나 — 세계가 안 받는 축은 세계 값 */
+export function sampleParams(style: KfStyle, vary: ThemeVary, seed: string, n: number): VariantParams {
+  const base = baseParams(style);
+  const r = (k: number, lo: number, hi: number) => randRange(seed, n * 32 + k, lo, hi);
+  const pickOf = <T>(k: number, items: readonly T[]): T => items[Math.min(items.length - 1, Math.floor(rand(seed, n * 32 + k) * items.length))];
+  const scheme = pickOf(0, vary.scheme ?? [style.scheme]);
+  const bgR = vary.bg?.[scheme] ?? BG_L[scheme];
+  const hue = vary.hue ? sampleHue(seed, n * 32 + 1, vary.hue) : base.hue;
+  // 무채색 빛깔은 반쯤은 강조색 쪽(한 집안), 반쯤은 아무 쪽
+  const tintH = rand(seed, n * 32 + 2) < 0.5 ? (hue + r(3, -30, 30) + 360) % 360 : r(4, 0, 360);
+  const tex = pickOf(5, vary.texture ?? [base.texture.kind]);
+  const chroma = vary.chroma ? r(10, vary.chroma[0], vary.chroma[1]) : 1;
+  // 바탕이 색 잉크인 세계는 바탕이 강조색과 같은 각도로 돌아야 모눈·선과 한 벌로 남는다 — tint 축은 무채색 바탕 세계 것
+  const tint = base.tint.c >= NEUTRAL_C
+    ? { h: (base.tint.h + hue - base.hue + 360) % 360, c: base.tint.c * chroma }
+    : { h: tintH, c: vary.tint ? r(7, vary.tint[0], vary.tint[1]) * (scheme === "dark" ? DARK_TINT : 1) : base.tint.c };
+  const q = (v: number) => +v.toFixed(4);
+  return {
+    scheme,
+    bgL: q(r(6, bgR[0], bgR[1])),
+    tint: { h: q(tint.h), c: q(tint.c) },
+    inkL: q(scheme === style.scheme && rand(seed, n * 32 + 8) < 0.5 ? base.inkL : r(9, INK_L[scheme][0], INK_L[scheme][1])),
+    hue: q(hue),
+    chroma: q(chroma),
+    fonts: pickOf(11, allowedFonts(vary)),
+    texture: { kind: tex, amount: tex === base.texture.kind ? base.texture.amount || TEXTURE_AMOUNT[tex] : TEXTURE_AMOUNT[tex] },
+    stroke: vary.stroke ? +r(12, vary.stroke[0], vary.stroke[1]).toFixed(2) : base.stroke,
+    radius: vary.radius ? Math.round(r(13, vary.radius[0], vary.radius[1])) : null,
+    tempo: vary.tempo ? +r(14, vary.tempo[0], vary.tempo[1]).toFixed(2) : base.tempo,
+    density: vary.density ? +r(15, vary.density[0], vary.density[1]).toFixed(2) : base.density,
+  };
+}
+
+/** 손잡이 값 → 세계 style 위에 덮을 판. 색이 검사를 못 넘으면 bad 에 까닭 */
+export function overlayOf(style: KfStyle, manifest: Pick<ThemeManifest, "vary">, p: VariantParams): { style: VariantManifest["style"]; bad: string[]; measured: Record<string, number> } {
+  const vary = manifest.vary ?? {};
+  const pal = transformPalette(style.colors, p, { keep: vary.keep, fixedHue: vary.fixedHue });
+  const out: VariantManifest["style"] = { scheme: p.scheme, colors: pal.colors as KfStyle["colors"] };
+  if (p.fonts !== "base") {
+    const f = fontPairs().find((x) => x.id === p.fonts);
+    if (!f) return { style: out, bad: [`글꼴 짝 ${p.fonts} 이 없다`], measured: pal.measured };
+    out.fonts = vary.monoAll ? { sans: f.mono, display: f.mono, mono: f.mono, faces: f.faces } : { sans: f.sans, display: f.display, mono: f.mono, faces: f.faces };
+    out.type = { weightDisplay: f.weightDisplay, weightBody: f.weightBody, tracking: f.tracking };
+  }
+  if (p.radius !== null) {
+    const md0 = style.radius.md || 12;
+    const k = p.radius / md0;
+    out.radius = { sm: Math.round((style.radius.sm || md0 * 0.6) * k), md: p.radius, lg: Math.round((style.radius.lg || md0 * 1.6) * k), pill: style.radius.pill };
+  }
+  out.look = {
+    ...(p.texture.kind !== "none" ? { texture: p.texture } : {}),
+    ...(p.stroke !== 1 ? { stroke: p.stroke } : {}),
+    ...(p.tempo !== 1 ? { tempo: p.tempo } : {}),
+    ...(p.density !== 1 ? { density: p.density } : {}),
+  };
+  return { style: out, bad: pal.bad, measured: pal.measured };
+}
+
+/** 세계 style + 변주 판 → 프로젝트 style.json 으로 쓸 통째 */
+export function mergeVariant(style: KfStyle, v: Pick<VariantManifest, "id" | "world" | "name" | "style" | "params">): KfStyle {
+  const o = v.style;
+  const k = v.params.tempo || 1;
+  const durations = style.motion.durations && k !== 1 ? Object.fromEntries(Object.entries(style.motion.durations).map(([n, d]) => [n, +(d / k).toFixed(3)])) : style.motion.durations;
+  return {
+    ...structuredClone(style),
+    name: `${v.world}/${v.id}`,
+    label: `${style.label} · ${v.name}`,
+    ...(o.scheme ? { scheme: o.scheme } : {}),
+    ...(o.colors ? { colors: { ...o.colors } } : {}),
+    ...(o.fonts ? { fonts: structuredClone(o.fonts) } : {}),
+    type: { ...style.type, ...o.type },
+    ...(o.radius ? { radius: { ...o.radius } } : {}),
+    motion: { ...style.motion, ...(durations ? { durations: durations as KfStyle["motion"]["durations"] } : {}) },
+    look: { ...style.look, ...o.look },
+  };
+}
+
+// --- 서로 다름: 색이 먼저(바탕·강조), 글꼴·질감이 그다음, 선·모서리는 덤
+
+export interface Candidate {
+  params: VariantParams;
+  overlay: VariantManifest["style"];
+  measured: Record<string, number>;
+  /** 바탕·강조·잉크 OKLab — 거리 잴 때마다 다시 풀지 않게 */
+  lab: Record<"bg" | "accent" | "ink", [number, number, number]>;
+}
+
+const candidate = (params: VariantParams, overlay: VariantManifest["style"], measured: Record<string, number>): Candidate => {
+  const c = overlay.colors!;
+  return { params, overlay, measured, lab: { bg: labOf(parseColor(c.bg)), accent: labOf(parseColor(c.accent)), ink: labOf(parseColor(c.ink)) } };
+};
+
+export function distance(a: Candidate, b: Candidate): number {
+  const d = (k: "bg" | "accent" | "ink") => Math.hypot(a.lab[k][0] - b.lab[k][0], a.lab[k][1] - b.lab[k][1], a.lab[k][2] - b.lab[k][2]);
+  return (
+    1.6 * d("bg") +
+    1.4 * d("accent") +
+    0.5 * d("ink") +
+    (a.params.fonts !== b.params.fonts ? 0.12 : 0) +
+    (a.params.texture.kind !== b.params.texture.kind ? 0.08 : 0) +
+    0.06 * Math.abs(a.params.stroke - b.params.stroke) +
+    (a.params.radius !== null && b.params.radius !== null ? 0.004 * Math.abs(a.params.radius - b.params.radius) : 0)
+  );
+}
+
+/**
+ * 후보를 많이 굴려 색 검사를 넘은 것만 두고, 이미 고른 것들과 가장 먼 것부터 차례로 늘어놓는다(먼 점 고르기).
+ * 앞의 n 개가 뽑을 판이고 뒤는 굽기 검사에서 떨어진 판의 자리를 메울 예비다
+ */
+export function rankCandidates(style: KfStyle, manifest: Pick<ThemeManifest, "vary">, o: { seed: string; pool?: number; taken?: Candidate[] }): Candidate[] {
+  const vary = manifest.vary ?? {};
+  const base = baseParams(style);
+  const ok: Candidate[] = [];
+  for (let i = 0; i < (o.pool ?? 400); i++) {
+    const params = sampleParams(style, vary, o.seed, i);
+    const r = overlayOf(style, manifest, params);
+    if (!r.bad.length) ok.push(candidate(params, r.style, r.measured));
+  }
+  const near = ok.map((c) => Math.min(...[candidate(base, { colors: style.colors }, {}), ...(o.taken ?? [])].map((x) => distance(c, x))));
+  const out: Candidate[] = [];
+  const left = new Set(ok.keys());
+  while (left.size) {
+    let best = -1;
+    for (const i of left) if (best < 0 || near[i] > near[best]) best = i;
+    left.delete(best);
+    out.push(ok[best]);
+    for (const i of left) near[i] = Math.min(near[i], distance(ok[i], ok[best]));
+  }
+  return out;
+}
+
+// --- 이름: 바탕 낱말 + 강조 낱말(겹치면 글꼴·질감 낱말)
+
+const ACCENT_WORDS: [number, string, string][] = [
+  [15, "rose", "장밋빛"], [35, "coral", "산호색"], [55, "orange", "주황"], [78, "amber", "호박색"], [100, "gold", "금빛"],
+  [125, "lime", "라임색"], [150, "green", "초록"], [178, "jade", "옥색"], [200, "teal", "청록"], [222, "cyan", "하늘빛 청록"],
+  [242, "sky", "하늘색"], [262, "blue", "파랑"], [282, "indigo", "남색"], [305, "violet", "보라"], [330, "plum", "자두색"], [350, "magenta", "자홍"], [361, "pink", "분홍"],
+];
+
+function accentWord(h: number): [string, string] {
+  const w = ACCENT_WORDS.find(([max]) => h < max) ?? ACCENT_WORDS[0];
+  return [w[1], w[2]];
+}
+
+function bgWord(p: VariantParams): [string, string] {
+  const tinted = p.tint.c >= (p.scheme === "dark" ? 0.02 : 0.012);
+  const h = p.tint.h;
+  const fam = !tinted ? "neutral" : h < 40 || h >= 340 ? "pink" : h < 100 ? "warm" : h < 170 ? "green" : h < 280 ? "cool" : "violet";
+  const light: Record<string, [string, string]> = {
+    neutral: p.bgL > 0.975 ? ["snow", "새하얀"] : ["chalk", "분필빛"],
+    pink: ["blush", "연분홍"],
+    warm: p.bgL > 0.96 ? ["cream", "크림색"] : ["sand", "모래빛"],
+    green: ["sage", "세이지"],
+    cool: ["frost", "서리빛"],
+    violet: ["lilac", "연보라"],
+  };
+  const dark: Record<string, [string, string]> = {
+    neutral: p.bgL < 0.14 ? ["night", "검은"] : ["slate", "짙은 회색"],
+    pink: ["wine", "포도주빛"],
+    warm: ["cocoa", "코코아빛"],
+    green: ["forest", "짙은 숲빛"],
+    cool: p.tint.h < 230 ? ["deep", "깊은 청록"] : ["navy", "짙은 남색"],
+    violet: ["dusk", "해 질 녘 보랏빛"],
+  };
+  return (p.scheme === "dark" ? dark : light)[fam];
+}
+
+const TEXTURE_KO: Record<TextureKind, [string, string]> = {
+  none: ["", ""], grain: ["grain", "고운 필름 입자"], paper: ["paper", "종이 결"], noise: ["noise", "거친 잡음"], scan: ["scan", "주사선"], halftone: ["dots", "망점"],
+};
+
+const FONT_WORD = (p: FontPair | undefined): string => (!p ? "" : p.tags.includes("serif") ? "serif" : p.tags.includes("pixel") ? "pixel" : p.tags.includes("rounded") ? "round" : p.tags.includes("mono") ? "mono" : p.tags.includes("bold") ? "bold" : p.id.split("-")[0]);
+
+// 이름·태그는 손잡이가 아니라 화면에 실린 색으로 — 세계가 강조·바탕을 묶어 둔 판(회로 기판의 금 강조)은 hue 를 굴려도 그 색이 안 돈다
+function seen(p: VariantParams, colors?: Record<string, string>): VariantParams {
+  if (!colors?.bg || !colors.accent) return p;
+  const bg = lchOf(colors.bg);
+  return { ...p, bgL: bg.l, tint: { h: bg.h, c: bg.c }, hue: lchOf(colors.accent).h };
+}
+
+export function nameVariant(params: VariantParams, taken: Set<string>, colors?: Record<string, string>): { id: string; name: string; desc: string } {
+  const p = seen(params, colors);
+  const [bg, bgKo] = bgWord(p);
+  const [acc, accKo] = accentWord(p.hue);
+  const pair = fontPairs().find((x) => x.id === p.fonts);
+  const [tex, texKo] = TEXTURE_KO[p.texture.kind];
+  const tries = [`${bg}-${acc}`, ...(tex ? [`${bg}-${acc}-${tex}`] : []), ...(pair ? [`${bg}-${acc}-${FONT_WORD(pair)}`] : [])];
+  let id = tries.find((t) => !taken.has(t));
+  for (let i = 2; !id; i++) if (!taken.has(`${bg}-${acc}-${i}`)) id = `${bg}-${acc}-${i}`;
+  const name = id.split("-").map((w) => w[0].toUpperCase() + w.slice(1)).join(" ");
+  const desc = [`${bgKo} 바탕에 ${accKo} 강조`, pair ? pair.ko.split(/\s*—\s*/)[0] : "", texKo].filter(Boolean).join(" · ");
+  return { id, name, desc };
+}
+
+/** 변주 태그 — 세계 태그에 색·질감·글꼴이 주는 분위기를 더한다 */
+export function variantTags(world: ThemeTags, params: VariantParams, colors?: Record<string, string>): ThemeTags {
+  const p = seen(params, colors);
+  const mood = new Set(world.mood);
+  mood.add(p.scheme === "dark" ? "어두운" : "밝은");
+  if (inRanges(p.hue, [[20, 100]])) mood.add("따뜻한");
+  if (inRanges(p.hue, [[180, 290]])) mood.add("차가운");
+  if (p.chroma >= 1.12) mood.add("선명한");
+  if (p.chroma <= 0.85) mood.add("차분한");
+  if (["paper", "grain", "halftone", "noise"].includes(p.texture.kind)) mood.add("아날로그");
+  if (p.texture.kind === "scan") mood.add("레트로");
+  const tags = fontPairs().find((x) => x.id === p.fonts)?.tags ?? [];
+  if (tags.includes("serif")) mood.add("고전적");
+  if (tags.includes("rounded")) mood.add("귀여운");
+  if (tags.includes("pixel")) mood.add("레트로");
+  if (tags.includes("mono")) mood.add("기술적");
+  return { ...world, mood: [...mood], light: p.scheme };
+}
+
+export const candidateOf = candidate;
+
+export const hueOf = (colors: Record<string, string>): number => lchOf(colors.accent).h;
+export { hueDist };

package/series/og-shorts.json

@@ -0,0 +1,14 @@
+{
+  "id": "og-shorts",
+  "label": "OG 쇼츠",
+  "summary": "OpenGateway 기술 쇼츠 — 측정 테마·차분한 남성 내레이션·깊은 앰비언트 곡·화면 자막, 45–60초, 끝 카드 OpenGateway",
+  "match": ["OG 쇼츠", "OG 숏츠", "OG 숏폼", "OG shorts", "오픈게이트웨이 쇼츠", "OpenGateway 쇼츠", "OpenGateway shorts"],
+  "purpose": "shorts",
+  "theme": "og-measure",
+  "voice": "gemini:Charon",
+  "music": { "mood": "deep" },
+  "captions": "on",
+  "duration": { "min": 45, "max": 60, "default": 45 },
+  "end": { "title": "OpenGateway", "line": "opengateway.ai" },
+  "answers": { "image": "og-gpt-image-2.5-sunburst", "video": "none" }
+}

package/skills/kasaframe/SKILL.md

@@ -17,8 +17,8 @@ argument-hint: "[만들 영상 한 줄]"
    ```
    kf make "<사람이 한 말 그대로>"
    ```
-   결과 폴더는 지금 폴더 아래 생긴다(`--out` 으로 바꾼다). 용도(홍보·쇼츠·설명·공개·시연·광고·피드·뮤비)·테마(「~ 느낌·풍」으로 짚으면 그 테마, 아니면 내용에 맞는 승인 테마)·곡(`--music`, 없으면 곡 모음 `KF_MUSIC_DIR` 에서)을 알아서 고른다. **종료 코드 3** 이면 확신이 낮다는 뜻 — 찍힌 보기 중 맞는 것을 `--purpose` 로 다시(그래도 모르겠으면 그때 사람에게 묻는다).
-2. 찍힌 `<폴더>/MAKE.md`(장면 지시서 — 용도별 규칙·장면별 시각·할 일·박·테마 효과·만들 그림)를 읽고 `scenes/*.ts` 를 채운다. 무대 `lib/stage.ts` 를 겉에 씌우면 「0.1초도 쉬지 않기·같은 구도 오래 두지 않기(용도별 기준)·화면 채우기」가 처음부터 선다.
+   결과 폴더는 지금 폴더 아래 생긴다(`--out` 으로 바꾼다). 시리즈(「OG 쇼츠」처럼 `kf series list` 의 묶음을 짚으면 그 묶음이 다 정한다)·용도(홍보·쇼츠·설명·공개·시연·광고·피드·뮤비)·테마(「~ 느낌·풍」으로 짚으면 그 테마, 아니면 맨 위 질문으로 묻는다 — 답 전엔 내용에 맞는 승인 테마로 깔린다)·곡(`--music`, 없으면 곡 모음 `KF_MUSIC_DIR` 에서)을 알아서 고른다. **종료 코드 3** 이면 확신이 낮다는 뜻 — 찍힌 보기 중 맞는 것을 `--purpose` 로 다시(그래도 모르겠으면 그때 사람에게 묻는다).
+2. 찍힌 `<폴더>/MAKE.md`(장면 지시서 — 용도별 규칙·장면별 시각·할 일·박·테마 효과·만들 그림·주인공 3D 장면)를 읽는다. **맨 위에 「사용자에게 먼저 물을 것」이 있으면** 장면을 쓰기 전에 AskUserQuestion 한 번으로 묻고(적힌 header·보기 그대로, 첫째가 권장) 답을 `kf make --answer <폴더> --<플래그> <값> …` 로 넣는다 — 테마·목소리와 돈이 드는 생성·없는 능력이 올라온다(테마는 견본 그림 경로가 보기마다 붙는다 — 사람에게 보여 주고 묻는다). **없는 능력(「넣는 법·다른 엔진·빼기」 보기)은 네가 대신 고르지 말고 꼭 사람에게** 묻는다. `kf make` 가 종료 코드 3 으로 보기를 찍고 멈추면(박자·가사 도구처럼 뼈대 전에 필요한 것) 그 보기를 그대로 물어 플래그로 다시 부른다. **쇼츠·설명은 내레이션 먼저** — 지시서의 「내레이션 먼저」대로 `captions.json` 에 장면별 문장을 쓰고 `kf narrate <폴더>` 로 장면 길이를 목소리에 맞춘 뒤(곡이 있으면 박에) 장면을 쓴다. 그다음 고른 공급자로 그림(`kf gen img`)·3D 샷(`kf blender`)·영상 컷(`kf gen vid`)을 만들고 `scenes/*.ts` 를 채운다. 무대 `lib/stage.ts` 를 겉에 씌우면 「0.1초도 쉬지 않기·같은 구도 오래 두지 않기(용도별 기준)·화면 채우기」가 처음부터 선다.
 3. `kf look <폴더>` 가 찍는 장면 모음을 Read 로 직접 보고 장면별 확인표(`out/look.md`)대로 고친다. **그림이 안 보이면**(OG 로 붙인 모델 등)만 `kf look <폴더> --vision-model google/gemini-3.5-flash` — 그림 보는 모델이 장면마다 글로 알려 준다.
 4. `kf make --finish <폴더>` — 렌더·검사·표지·자막. 검사 오류가 0 이 될 때까지 장면을 고쳐 다시(렌더는 고칠 것을 모아 한 번에 — 한 기계에서 하나씩 돈다).
 5. 결과 `out/video.mp4`·`out/cover.png` 를 사람이 보는 공유 폴더에 넣어 보여 준다.
@@ -27,6 +27,7 @@ argument-hint: "[만들 영상 한 줄]"
 
 ## 하지 않는 것
 
-- 돈이 드는 그림·영상 생성을 묻지 않고 부르지 않는다 — 지시서의 「만들 그림」은 받은 자산·실제 화면·도형으로 안 될 때만 구체적인 프롬프트로 `kf gen img`. 영상 생성은 사람이 요청에 적었을 때만.
+- 돈이 드는 그림·영상 생성을 묻기 전에 부르지 않는다 — 사람이 고른 답(또는 `--yes`·`--allow`)이 있을 때만. 「만들 그림」은 받은 자산·실제 화면·도형으로 안 될 때만 구체적인 프롬프트로.
+- 지역 제한이 걸린 공급자(사내 H3)를 회사·바깥 결과물에 쓰지 않는다 — 보기의 경고를 그대로 사람에게 보인다.
 - 슬로건·감성 카피를 화면에 쓰지 않는다(홍보 틀). 이모지 금지.
 - 렌더·검사를 잠금 없이 여러 개 동시에 돌리지 않는다.

package/templates/_shared/project/lib/stage.ts

@@ -1,10 +1,14 @@
-import { applyStyle, ease, emit, lerp, progress, rand, type SceneCtx, type Style } from "@kasaframe/core";
+import { applyStyle, combine, ease, emit, lerp, progress, type SceneCtx, type Style } from "@kasaframe/core";
+import { enter, type MoveName } from "@kasaframe/motion";
+import { dressBg, dressText, dressWipe, type Dress } from "@kasaframe/motion/moves";
 
 // 장면 뼈대가 같이 쓰는 무대. 카메라는 가만히 있고 주인공은 안전 영역 가운데에 선다 — 이유 없이 화면 전체를 흔들면
 // 보는 사람이 주인공을 놓친다(카메라 드리프트·박마다 자세를 겹친 판이 쇼츠마다 기울고 가장자리로 밀렸다).
-// 「단 0.1초도 쉬지 않는다」는 화면 안 움직임이 맡는다 — 바탕 층의 빛 방울 흐름과, 박마다 모양을 바꾸는 바탕 판.
+// 「단 0.1초도 쉬지 않는다」는 내용의 움직임이 맡는다 — 글·숫자 수(dress.text)가 박마다 바뀌고, 글 뒤 강조 띠가 박마다 차오른다.
+// 바탕은 정지(still) — 뜻 없이 떠도는 빛 방울·옮겨 가는 판은 보는 사람이 무엇인지 묻게 만들어 걷었다.
 // 카메라는 장면이 이유를 댈 때만 움직인다: stage.camera.pushIn·pullOut·follow·impact. 움직이는 동안만 __kf.events 에 남아
 // kf check 의 camera.wander 가 「이유 없는 이동」과 가른다. 장면을 채울 때 그대로 써도, 지워도 된다.
+// 연출 수(dress)를 주면 바탕·글·경계 덮기를 수 메뉴(@kasaframe/motion/moves menu)에서 건다 — kf new 가 장면마다 시드로 골라 넣는다.
 
 export interface Stage {
   box: HTMLDivElement; // 바탕 층(장면 전체) — 늘 흐르는 것은 여기에만
@@ -15,7 +19,12 @@ export interface Stage {
   vertical: boolean;
   /** 주인공 표시 — kf check 의 layout.edge 가 이 상자가 안전 영역 가장자리에 붙는지 본다(bigWord 는 스스로 단다) */
   hero(el: HTMLElement): HTMLElement;
-  /** 바탕 흐름 + 카메라. 카메라가 요소를 겨누면(to·follow) 내용을 칠한 뒤 맨 끝에 부른다 — 그 프레임의 자리를 잰다 */
+  /**
+   * 낱말을 고른 글 수(dress.text)로 띄운다 — bigWord 면 큰 낱말 + 등장 움직임. paint 를 매 프레임 부른다(extra 는 그 위에 얹을 흔들림·펀치).
+   * ready 면 첫 프레임부터 글이 서 있다(훅·썸네일)
+   */
+  say(words: readonly string[], o?: { enter?: MoveName; color?: string; weight?: number; ready?: boolean }): { el: HTMLElement; paint: (t: number, extra?: Style) => void };
+  /** 경계 덮기 + 카메라(+ 이름으로 부른 움직이는 바탕). 카메라가 요소를 겨누면(to·follow) 내용을 칠한 뒤 맨 끝에 부른다 — 그 프레임의 자리를 잰다 */
   tick(t: number): void;
 }
 
@@ -175,17 +184,7 @@ export function cutTimes(ctx: SceneCtx): number[] {
   return out;
 }
 
-// 바탕 판의 꼴(안전 영역에 대한 비율) — 컷에서 컷까지 다음 꼴로 쉬지 않고 옮겨 가 같은 구도가 1.5초를 넘지 않고 0.1초도 멈추지 않는다.
-// 빛 방울만으로는 작은 그림의 멈춤 판정을 늘 넘지 못한다(방울 자리에 따라 장면마다 들쭉날쭉). 주인공은 그대로 선다
-const PANELS = [
-  { x: 0.07, y: 0.15, w: 0.86, h: 0.7, r: 0.12 },
-  { x: 0, y: 0.55, w: 1, h: 0.45, r: 0.04 },
-  { x: 0.18, y: 0.05, w: 0.64, h: 0.9, r: 0.5 },
-  { x: 0, y: 0, w: 0.5, h: 1, r: 0.04 },
-  { x: 0.05, y: 0.3, w: 0.9, h: 0.4, r: 0.2 },
-];
-
-export function makeStage(root: HTMLElement, ctx: SceneCtx, o: { panel?: boolean } = {}): Stage {
+export function makeStage(root: HTMLElement, ctx: SceneCtx, o: { panel?: boolean; dress?: Dress } = {}): Stage {
   const { top, right, bottom, left } = ctx.safe;
   const { width, height } = ctx.meta;
   // root 의 display 는 mountProject 가 장면을 켜고 끌 때 쓴다 — 배치는 안쪽 상자에
@@ -193,33 +192,30 @@ export function makeStage(root: HTMLElement, ctx: SceneCtx, o: { panel?: boolean
   box.style.cssText = "position:absolute;inset:0;overflow:hidden;background:var(--kf-bg)";
   const safeW = width - left - right;
   const safeH = height - top - bottom;
-  // 글 한 줄만 있는 화면도 비어 보이지 않게 — 안전 영역을 크게 채우는 판 하나. 바탕 층이라 카메라를 따라가지 않는다.
-  // 빛 방울은 판 위로 흐른다 — 판 밑에 깔리면 판이 덮은 만큼 흐림이 죽어 그 장면이 멈춘 프레임이 된다
-  let panel: HTMLDivElement | null = null;
-  if (o.panel !== false) {
-    panel = document.createElement("div");
-    panel.style.cssText = `position:absolute;left:${left}px;top:${top}px;width:${safeW}px;height:${safeH}px;transform-origin:0 0;background:var(--kf-accent-soft);opacity:.55`;
-    box.append(panel);
-  }
-  // 바탕 패럴랙스 — 큰 빛 방울 여럿이 서로 다른 빠르기로 흐른다. 카메라가 서 있으니 0.1초 멈춤 판정을 이 흐름이 넘겨야 한다 —
-  // 연한 accent-soft 만으로는 작은 그림에서 안 바뀐 것으로 읽혀 accent 를 섞는다. 잔무늬는 작은 그림에 안 잡혀 「멈춤」으로 읽힌다
-  const orbs = Array.from({ length: 9 }, (_, i) => {
-    const el = document.createElement("div");
-    const r = Math.round(Math.min(width, height) * (0.12 + 0.18 * rand(ctx.id, i)));
-    el.style.cssText = `position:absolute;left:0;top:0;width:${r * 2}px;height:${r * 2}px;border-radius:50%;background:radial-gradient(circle, color-mix(in srgb, var(--kf-accent) 30%, var(--kf-accent-soft)) 0%, transparent 70%);opacity:${(0.6 + 0.35 * rand(ctx.id, i + 20)).toFixed(2)}`;
-    box.append(el);
-    // 빠르기는 70–190px/초 — 거의 서 있는 방울이 섞이면 그 사이가 멈춘 프레임이 된다
-    const a = rand(ctx.id, i + 80) * Math.PI * 2;
-    const v = 70 + 120 * rand(ctx.id, i + 100);
-    return { el, r, x0: rand(ctx.id, i + 40) * width, y0: rand(ctx.id, i + 60) * height, vx: v * Math.cos(a), vy: v * Math.sin(a) * 0.7 };
-  });
+  // 바탕은 정지(still) — 패턴이 제 바탕을 그리면(panel: false) 바탕색만
+  const bgLayer = document.createElement("div");
+  bgLayer.style.cssText = "position:absolute;inset:0";
+  const bg = o.panel === false ? null : dressBg(o.dress?.bg ?? "still", bgLayer, ctx);
+  if (o.panel !== false) box.append(bgLayer);
   const cam = document.createElement("div");
   cam.style.cssText = `position:absolute;left:${left}px;top:${top}px;right:${right}px;bottom:${bottom}px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px`;
   box.append(cam);
+  // 경계 덮기는 맨 위 층 — 앞 장면 끝을 덮은 덮개가 다음 장면 첫 프레임에서 그대로 걷힌다
+  const wipes = (["in", "out"] as const)
+    .map((side) => {
+      const name = side === "in" ? o.dress?.wipeIn : o.dress?.wipeOut;
+      if (!name || name === "none") return null;
+      const layer = document.createElement("div");
+      layer.style.cssText = "position:absolute;inset:0;pointer-events:none;z-index:60";
+      const paint = dressWipe(name, layer, ctx, side);
+      if (paint) box.append(layer);
+      return paint;
+    })
+    .filter((p): p is (t: number) => void => !!p);
   root.append(box);
   const camera = makeCamera(cam, ctx, { frame: { x: 0, y: 0, w: safeW, h: safeH } });
   const cuts = cutTimes(ctx);
-  return {
+  const stage: Stage = {
     box,
     cam,
     camera,
@@ -230,26 +226,50 @@ export function makeStage(root: HTMLElement, ctx: SceneCtx, o: { panel?: boolean
       el.dataset.kfHero = "";
       return el;
     },
-    tick(t: number) {
-      for (const o of orbs) {
-        const x = ((o.x0 + o.vx * t) % (width + o.r * 2) + width + o.r * 2) % (width + o.r * 2) - o.r * 2;
-        const y = ((o.y0 + o.vy * t) % (height + o.r * 2) + height + o.r * 2) % (height + o.r * 2) - o.r * 2;
-        o.el.style.transform = `translate(${x.toFixed(1)}px, ${y.toFixed(1)}px)`;
-      }
-      if (panel) {
+    say(words, x = {}) {
+      // 글 뒤 강조 띠 — 컷(박)마다 글 폭만큼 왼쪽부터 차오른다(형광펜으로 지금 읽힐 자리를 칠하는 강조).
+      // 글 수가 박에 바뀐 뒤 다음 박까지 서 있는 사이에도 내용이 움직인다 — 0.1초 멈춤 규칙을 이 띠가 넘긴다
+      const mark = document.createElement("div");
+      mark.style.cssText = `position:absolute;left:${Math.round(safeW * 0.1)}px;top:${Math.round(safeH * 0.37)}px;width:${Math.round(safeW * 0.8)}px;height:${Math.round(safeH * 0.26)}px;border-radius:${Math.round(safeH * 0.03)}px;background:color-mix(in srgb, var(--kf-accent) 50%, transparent);transform-origin:0 50%`;
+      stage.cam.append(mark);
+      const sweep = (t: number) => {
         let k = 0;
-        while (k < cuts.length && cuts[k] <= t) k++;
-        const from = k > 0 ? cuts[k - 1] : 0;
-        const p = progress(t, from, Math.max(0.3, (cuts[k] ?? from + 1.2) - from));
-        const a = PANELS[Math.max(0, k - 2) % PANELS.length];
-        const b = PANELS[Math.max(0, k - 1) % PANELS.length];
-        const f = (key: "x" | "y" | "w" | "h" | "r") => lerp(a[key], b[key], p);
-        panel.style.transform = `translate(${(f("x") * safeW).toFixed(1)}px, ${(f("y") * safeH).toFixed(1)}px) scale(${f("w").toFixed(4)}, ${f("h").toFixed(4)})`;
-        panel.style.borderRadius = `${(f("r") * Math.min(safeW, safeH)) / f("w")}px / ${(f("r") * Math.min(safeW, safeH)) / f("h")}px`;
+        while (k + 1 < cuts.length && cuts[k + 1] <= t) k++;
+        const a = cuts[k] ?? 0;
+        const b = cuts[k + 1] ?? ctx.dur;
+        mark.style.transform = `scaleX(${progress(t, a, Math.max(0.05, b - a)).toFixed(4)})`;
+      };
+      const host = document.createElement("div");
+      host.style.cssText = "position:absolute;inset:0";
+      const move = o.dress ? dressText(o.dress.text, host, ctx, { words, w: safeW, h: safeH, ready: x.ready }) : null;
+      if (move) {
+        // 수가 안전 영역 전체를 쓰니 그 상자를 주인공으로 짚으면 늘 가장자리에 붙은 것으로 잡힌다 — 글은 수가 가운데에 세운다
+        stage.cam.append(host);
+        return {
+          el: host,
+          paint(t, extra) {
+            sweep(t);
+            move(t);
+            if (extra) applyStyle(host, extra);
+          },
+        };
       }
+      const word = bigWord(words[0] ?? "", stage, { color: x.color, weight: x.weight });
+      return {
+        el: word,
+        paint(t, extra) {
+          sweep(t);
+          applyStyle(word, combine(x.enter ? enter(x.enter, t, { at: 0, scene: ctx.id }) : {}, extra));
+        },
+      };
+    },
+    tick(t: number) {
+      bg?.(t);
+      for (const w of wipes) w(t);
       camera.apply(t);
     },
   };
+  return stage;
 }
 
 // 렌더가 마지막으로 찍는 장면 안 시각 — 되돌이(끝 화면이 첫 화면으로 이어지는 쇼츠·피드)는 ctx.dur 이 아니라 여기서 움직임을 끝낸다

package/templates/_shared/scenes/default.ts

@@ -1,18 +1,21 @@
-import { applyStyle, type SceneCtx } from "@kasaframe/core";
-import { enter, type MoveName } from "@kasaframe/motion";
-import { bigWord, makeStage } from "../lib/stage.ts";
+import type { SceneCtx } from "@kasaframe/core";
+import type { MoveName } from "@kasaframe/motion";
+import type { Dress } from "@kasaframe/motion/moves";
+import { makeStage } from "../lib/stage.ts";
 
-const WORD = "{{word}}";
+const WORDS = ["{{word}}", "{{title}}"];
 // 이어지는 두 장면이 같은 등장을 쓰면 검사가 잡는다(repeatSameMove) — kf new 가 장면 순번으로 돌려 넣는다
 const MOVE: MoveName = "{{move}}";
+// 연출 수 — kf new 가 용도·테마 묶음에서 시드로 골랐다(같은 요청이면 같은 수). 바꾸려면 MAKE.md 「연출 수」 메뉴의 이름으로
+const DRESS: Dress = { bg: "{{bg}}", text: "{{text}}", wipeIn: "{{wipeIn}}", wipeOut: "{{wipeOut}}" };
 
 export default {
   build(root: HTMLElement, ctx: SceneCtx) {
-    const stage = makeStage(root, ctx);
-    const word = bigWord(WORD, stage);
+    const stage = makeStage(root, ctx, { dress: DRESS });
+    const words = stage.say(WORDS, { enter: MOVE });
     return (t: number) => {
+      words.paint(t);
       stage.tick(t);
-      applyStyle(word, enter(MOVE, t, { at: 0, scene: ctx.id }));
     };
   },
 };

package/templates/_shared/scenes/drop.ts

@@ -1,30 +1,33 @@
 import { applyStyle, combine, type SceneCtx } from "@kasaframe/core";
-import { beatPulse, dropBurst, enter, type MoveName } from "@kasaframe/motion";
-import { bigWord, makeStage } from "../lib/stage.ts";
+import { beatPulse, dropBurst, type MoveName } from "@kasaframe/motion";
+import type { Dress } from "@kasaframe/motion/moves";
+import { makeStage } from "../lib/stage.ts";
 
-const WORD = "{{word}}";
+const WORDS = ["{{word}}", "{{title}}"];
 const MOVE: MoveName = "{{move}}";
+const DRESS: Dress = { bg: "{{bg}}", text: "{{text}}", wipeIn: "{{wipeIn}}", wipeOut: "{{wipeOut}}" };
 
 // 장면 시작이 드롭에 붙어 있다(template anchor drop:k). 섬광·충격파·흔들림은 dropBurst 가 style.json 규칙(드롭 전용·maxPx)대로 내고
 // window.__kf.events 에 남겨 검사가 센다 — 손으로 짜면 규칙 위반을 못 잡는다
 export default {
   build(root: HTMLElement, ctx: SceneCtx) {
-    const stage = makeStage(root, ctx);
+    const stage = makeStage(root, ctx, { dress: DRESS });
     const ring = document.createElement("div");
     ring.style.cssText = "position:absolute;left:50%;top:50%;width:600px;height:600px;margin:-300px 0 0 -300px;border-radius:50%;border:12px solid var(--kf-accent)";
     stage.box.insertBefore(ring, stage.cam);
-    const word = bigWord(WORD, stage, { weight: 900 });
+    const words = stage.say(WORDS, { enter: MOVE, weight: 900, ready: true });
     const flash = document.createElement("div");
     flash.style.cssText = "position:absolute;inset:0;background:var(--kf-accent)";
     stage.box.append(flash);
     const drop = ctx.beats.drops.findIndex((d) => d >= -0.05 && d < ctx.dur);
     return (t: number) => {
-      stage.tick(t);
       const b = drop >= 0 ? dropBurst(t, { beats: ctx.beats, drop, rules: ctx.style.motion, scene: ctx.id }) : null;
       flash.style.opacity = String((b?.flash ?? 0) * 0.85);
       applyStyle(ring, b ? { scale: b.ring.scale, opacity: b.ring.opacity } : { opacity: 0 });
-      const pulse = beatPulse(t, { beats: ctx.beats, rules: ctx.style.motion, scene: ctx.id, source: "drop-word" });
-      applyStyle(word, combine(enter(MOVE, t, { at: 0.02, scene: ctx.id }), b?.shake, b?.punch, pulse));
+      // 박 펄스는 큰 낱말에만 — 글 수는 스스로 박에 터지고, 수가 깐 판 전체를 박마다 키우면 가장자리가 깜빡여 섬광 검사에 걸린다
+      const pulse = DRESS.text === "bigWord" ? beatPulse(t, { beats: ctx.beats, rules: ctx.style.motion, scene: ctx.id, source: "drop-word" }) : undefined;
+      words.paint(t, combine(b?.shake, b?.punch, pulse));
+      stage.tick(t);
     };
   },
 };

package/templates/_shared/scenes/end.ts

@@ -1,23 +1,26 @@
 import { applyStyle, type SceneCtx } from "@kasaframe/core";
 import { enter, type MoveName } from "@kasaframe/motion";
-import { bigWord, fitPx, makeStage } from "../lib/stage.ts";
+import type { Dress } from "@kasaframe/motion/moves";
+import { fitPx, makeStage } from "../lib/stage.ts";
 
 const NAME = "{{title}}";
 const LINE = "{{line}}";
 const MOVE: MoveName = "{{move}}";
+const DRESS: Dress = { bg: "{{bg}}", text: "{{text}}", wipeIn: "{{wipeIn}}", wipeOut: "{{wipeOut}}" };
 
 export default {
   build(root: HTMLElement, ctx: SceneCtx) {
-    const stage = makeStage(root, ctx);
-    const name = bigWord(NAME, stage);
+    const stage = makeStage(root, ctx, { dress: DRESS });
+    const name = stage.say([NAME], { enter: MOVE });
     const line = document.createElement("div");
     line.textContent = LINE;
-    line.style.cssText = `position:relative;font-family:var(--kf-font-sans);font-size:${fitPx(LINE, stage.safeW, { share: 0.6, max: 64, min: 40 })}px;color:var(--kf-dim);word-break:keep-all;text-align:center`;
+    // 이름 수가 안전 영역을 다 쓰니 한 줄은 아래 띠에 — 이름과 겹치지 않는다
+    line.style.cssText = `position:absolute;left:0;right:0;bottom:4%;z-index:5;font-family:var(--kf-font-sans);font-size:${fitPx(LINE, stage.safeW, { share: 0.6, max: 64, min: 40 })}px;color:var(--kf-dim);word-break:keep-all;text-align:center`;
     if (LINE) stage.cam.append(line);
     return (t: number) => {
-      stage.tick(t);
-      applyStyle(name, enter(MOVE, t, { at: 0, scene: ctx.id }));
+      name.paint(t);
       applyStyle(line, enter("fade", t, { at: 0.25, scene: ctx.id }));
+      stage.tick(t);
     };
   },
 };

package/templates/_shared/scenes/hook.ts

@@ -1,16 +1,18 @@
-import { applyStyle, clip, ease, type SceneCtx } from "@kasaframe/core";
-import { bigWord, makeStage } from "../lib/stage.ts";
+import { clip, ease, type SceneCtx } from "@kasaframe/core";
+import type { Dress } from "@kasaframe/motion/moves";
+import { makeStage } from "../lib/stage.ts";
 
-const WORD = "{{word}}";
+const WORDS = ["{{word}}", "{{title}}"];
+const DRESS: Dress = { bg: "{{bg}}", text: "{{text}}", wipeIn: "{{wipeIn}}", wipeOut: "{{wipeOut}}" };
 
 // 훅은 첫 프레임부터 내용이 있어야 한다 — 페이드로 시작하면 썸네일·첫 화면이 빈다
 export default {
   build(root: HTMLElement, ctx: SceneCtx) {
-    const stage = makeStage(root, ctx);
-    const word = bigWord(WORD, stage, { color: "var(--kf-accent)", weight: 900 });
+    const stage = makeStage(root, ctx, { dress: DRESS });
+    const words = stage.say(WORDS, { color: "var(--kf-accent)", weight: 900, ready: true });
     return (t: number) => {
+      words.paint(t, { scale: 1.12 - 0.12 * ease.outBack(clip(t, 0, 0.5).p) });
       stage.tick(t);
-      applyStyle(word, { scale: 1.12 - 0.12 * ease.outBack(clip(t, 0, 0.5).p) });
     };
   },
 };