kasaframe 0.1.1 → 0.1.3

package/templates/promo/template.json

@@ -44,6 +44,45 @@
     },
     "beatMove": "every-beat"
   },
+  "moves": {
+    "text": [
+      "slamWords",
+      "echoStack",
+      "ghostStack",
+      "splitFlap",
+      "ransomLetters"
+    ],
+    "wipe": [
+      "brushWipe",
+      "irisBlades",
+      "flood"
+    ],
+    "roles": {
+      "intro": {
+        "text": [
+          "ghostStack",
+          "splitFlap"
+        ]
+      },
+      "drop": {
+        "text": [
+          "slamWords",
+          "echoStack"
+        ]
+      },
+      "end": {
+        "text": [
+          "splitFlap",
+          "neonSign",
+          "ledBoard"
+        ]
+      }
+    }
+  },
+  "render": {
+    "motionBlur": 6,
+    "shutter": 180
+  },
   "scenes": [
     {
       "id": "intro",
@@ -110,7 +149,9 @@
     "gen": [],
     "genVideo": [
       "vid:seam"
-    ]
+    ],
+    "shot3d": "drop1",
+    "act": "intro"
   },
   "deliverables": [
     "mp4",

package/templates/shorts/scenes/hook.ts

@@ -1,7 +1,9 @@
 import { applyStyle, clip, ease, type SceneCtx } from "@kasaframe/core";
-import { bigWord, makeStage } from "../lib/stage.ts";
+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}}" };
 
 // 쇼츠 훅 — 첫 프레임부터 결과가 보여야 한다. 생성 바탕(assets/gen/hook-bg.png)이 있으면 어둡게 깔고 그 위에 숫자·낱말 하나
 function exists(url: string): boolean {
@@ -19,14 +21,15 @@ export default {
   build(root: HTMLElement, ctx: SceneCtx) {
     const bg = ctx.asset("gen/hook-bg.png");
     const hasBg = exists(bg);
-    const stage = makeStage(root, ctx, { panel: !hasBg });
+    // 생성 바탕이 있으면 그게 바탕이다 — 바탕 수는 걷고 글 수만
+    const stage = makeStage(root, ctx, { panel: !hasBg, dress: hasBg ? { ...DRESS, bg: "orbs" } : DRESS });
     const img = document.createElement("div");
     img.style.cssText = `position:absolute;inset:-4%;background-size:cover;background-position:center;background-image:linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.55)), url("${bg}")`;
     if (hasBg) stage.box.insertBefore(img, stage.cam);
-    const word = bigWord(WORD, stage, { color: hasBg ? "#fff" : "var(--kf-accent)", weight: 900 });
+    const words = stage.say(WORDS, { color: hasBg ? "#fff" : "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) });
       // 바탕은 장면 내내 천천히 다가간다 — 멈춘 화면으로 잡히지 않게
       applyStyle(img, { scale: 1 + 0.06 * (t / ctx.dur) });
     };

package/templates/shorts/template.json

@@ -1,7 +1,7 @@
 {
   "id": "shorts",
   "label": "쇼츠",
-  "summary": "세로 쇼츠 — 첫 1.5초에 결과, 화면 글은 전문 낱말만, 말은 자막 트랙으로, 끝이 처음으로 이어진다",
+  "summary": "세로 쇼츠 — 첫 1.5초에 결과, 화면 글은 전문 낱말만, 말은 차분한 내레이션과 자막 트랙으로, 깊은 앰비언트 곡을 아래 깔고, 끝이 처음으로 이어진다",
   "aspect": "9:16",
   "width": 1080,
   "height": 1920,
@@ -11,7 +11,29 @@
     "max": 60,
     "default": 45
   },
-  "music": "optional",
+  "music": "required",
+  "mood": "deep",
+  "narration": {
+    "on": true,
+    "lang": "ko",
+    "style": "차분하고 낮은 다큐멘터리 내레이션. 서두르지 않고 문장 끝을 내려 놓는다",
+    "voice": "elevenlabs:George",
+    "voices": {
+      "elevenlabs": "George",
+      "gemini": "Charon",
+      "dashscope": "Neil",
+      "local": "Sohee"
+    },
+    "lead": 0.25,
+    "tail": 0.5
+  },
+  "audio": {
+    "musicDb": -20,
+    "duck": true,
+    "lufs": -14,
+    "truePeak": -1.5,
+    "fadeOut": 1.5
+  },
   "captions": "off",
   "loop": true,
   "style": "og",
@@ -42,6 +64,43 @@
     },
     "beatMove": "every-beat"
   },
+  "moves": {
+    "text": [
+      "slamWords",
+      "echoStack",
+      "splitFlap",
+      "ghostStack",
+      "ransomLetters"
+    ],
+    "wipe": [
+      "brushWipe",
+      "flood",
+      "irisBlades"
+    ],
+    "roles": {
+      "hook": {
+        "text": [
+          "slamWords"
+        ]
+      },
+      "reveal": {
+        "text": [
+          "slamWords",
+          "echoStack"
+        ]
+      },
+      "end": {
+        "text": [
+          "splitFlap",
+          "slamWords"
+        ]
+      }
+    }
+  },
+  "render": {
+    "motionBlur": 6,
+    "shutter": 180
+  },
   "scenes": [
     {
       "id": "hook",
@@ -57,6 +116,14 @@
       "snap": "beat",
       "idea": "조건 하나로 문제를 재현한다 — 보는 사람이 예상하는 쪽을 먼저 보여 준다"
     },
+    {
+      "id": "turn",
+      "role": "seam",
+      "sec": 1.2,
+      "snap": "beat",
+      "transition": "dive",
+      "idea": "이음매 — setup 의 마지막 화면 속으로 다이브해 explain 의 무대로 넘어간다(3D 전환, 틀이 맡는다 — 장면 파일은 그대로 둔다)"
+    },
     {
       "id": "explain",
       "role": "explain",
@@ -94,7 +161,9 @@
     ],
     "gen": [
       "img:hook-bg"
-    ]
+    ],
+    "shot3d": "explain",
+    "act": "setup"
   },
   "deliverables": [
     "mp4",

package/templates/square/template.json

@@ -42,6 +42,25 @@
     },
     "beatMove": "every-beat"
   },
+  "moves": {
+    "text": [
+      "slamWords",
+      "splitFlap",
+      "echoStack",
+      "ransomLetters"
+    ],
+    "wipe": [
+      "brushWipe",
+      "flood"
+    ],
+    "roles": {
+      "hook": {
+        "text": [
+          "slamWords"
+        ]
+      }
+    }
+  },
   "scenes": [
     {
       "id": "hook",
@@ -84,7 +103,8 @@
     "want": [
       "logo"
     ],
-    "gen": []
+    "gen": [],
+    "act": "hook"
   },
   "deliverables": [
     "mp4",

package/themes/debug-hud/slots.ts

@@ -0,0 +1,99 @@
+import { clamp, ease, type Style } from "@kasaframe/core";
+import type { ThemeSlots } from "@kasaframe/themes/slots";
+import { layer, letters, partial, shownCount, strokePath, traceCanvas } from "@kasaframe/themes/slotkit";
+import { dropTrigger } from "./effects.ts";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 재는 순간 상자가 서고 값이 찍히는 계측 화면의 결로.
+// 움직임은 미끄러지지 않고 잡고 멈춘다(outExpo 0.18초 한 가지) — effects.ts 와 같은 손
+const SNAP = 0.18;
+const snap = (t: number, at: number, dur = SNAP): number => ease.outExpo(clamp((t - at) / dur));
+const NOISE = "0123456789ABCDEF#%";
+
+export const slots: ThemeSlots = {
+  // 서 있는 계측판 눈금 — 흐르는 눈금·지나가는 커서는 뜻이 없어 뺐다. 움직이는 것은 재는 상자·값뿐
+  surface(el) {
+    layer(
+      el,
+      "inset:0;background:var(--kf-bg);background-image:linear-gradient(var(--kf-line) 2px,transparent 2px),linear-gradient(90deg,var(--kf-line) 2px,transparent 2px);background-size:60px 60px;opacity:.7",
+    );
+    return () => {};
+  },
+
+  // 와이어 상자 — 모서리 꺾쇠가 먼저 서고 변이 가운데로 뻗는다. 크기를 재지 않게 % 로
+  panel(el, { at, tone }) {
+    const box = layer(el, `inset:0;background:${tone === "accent" ? "color-mix(in srgb, var(--kf-accent) 18%, transparent)" : "var(--kf-raised)"}`, true);
+    const corners = (["top:0;left:0;border-top", "top:0;right:0;border-top", "bottom:0;left:0;border-bottom", "bottom:0;right:0;border-bottom"] as const).map((pos, i) =>
+      layer(box, `${pos}:3px solid var(--kf-ink);border-${i % 2 ? "right" : "left"}:3px solid var(--kf-ink);width:0;height:0`),
+    );
+    const edges = layer(box, "inset:0;border:1px solid var(--kf-dim)");
+    return (t) => {
+      const p = snap(t, at, 0.3);
+      box.style.visibility = t >= at ? "visible" : "hidden";
+      box.style.opacity = String(clamp(p * 1.4));
+      corners.forEach((c) => {
+        c.style.width = `${(22 * p).toFixed(2)}%`;
+        c.style.height = `${(22 * p).toFixed(2)}%`;
+      });
+      const q = snap(t, at + 0.15, 0.3);
+      edges.style.clipPath = `inset(0 ${((1 - q) * 50).toFixed(2)}%)`;
+    };
+  },
+
+  // 잡는 순간 두 프레임 밝게 튀고 한 번에 선다 — 미끄러지는 스프링 없이
+  land(_el, { at }) {
+    return (t): Style => {
+      const local = t - at;
+      if (local < 0 || local > 0.3) return {};
+      return { brightness: local < 2 / 60 ? 1.8 : 1, scale: 1 + 0.06 * (1 - snap(t, at, 0.2)) };
+    };
+  },
+
+  // 글자 칸이 16진수로 굴다가 앞에서부터 잡힌다
+  write(el, { text, at, dur, seed }) {
+    const spans = letters(el, text);
+    const chars = Array.from(text);
+    return (t) => {
+      const fixed = shownCount(spans.length, t, at, dur);
+      const roll = Math.floor(t * 30);
+      spans.forEach((s, i) => {
+        if (i < fixed || chars[i] === " " || t >= at + dur) {
+          s.textContent = chars[i];
+          s.style.visibility = t >= at ? "visible" : "hidden";
+          return;
+        }
+        s.style.visibility = t >= at && i < fixed + 3 ? "visible" : "hidden";
+        s.textContent = /[가-힯]/.test(chars[i]) ? chars[i] : NOISE[(roll * 7 + i * 13 + seed.length) % NOISE.length];
+      });
+    };
+  },
+
+  // 계측 선 — 끝에 십자 커서가 앞서 가고, 다 그은 뒤에도 측정점 하나가 선을 따라 돈다
+  trace(el, { points, at, dur, tone }) {
+    const { g, clear } = traceCanvas(el, points);
+    const css = getComputedStyle(el);
+    const color = (tone === "accent" ? css.getPropertyValue("--kf-accent") : css.getPropertyValue("--kf-ink")).trim() || "#C8FF2E";
+    return (t) => {
+      clear();
+      const p = clamp((t - at) / Math.max(0.05, dur));
+      if (p <= 0) return;
+      g.strokeStyle = color;
+      g.lineWidth = 4;
+      g.lineJoin = "miter";
+      const drawn = partial(points, p);
+      strokePath(g, drawn);
+      const [hx, hy] = p < 1 ? drawn[drawn.length - 1] : partial(points, ((t - at - dur) * 0.4) % 1).at(-1)!;
+      g.lineWidth = 2;
+      g.strokeRect(hx - 10, hy - 10, 20, 20);
+      g.beginPath();
+      g.moveTo(hx - 22, hy);
+      g.lineTo(hx + 22, hy);
+      g.moveTo(hx, hy - 22);
+      g.lineTo(hx, hy + 22);
+      g.stroke();
+    };
+  },
+
+  drop(el, { ctx, drop }) {
+    return dropTrigger(el, { ctx, drop, label: `DROP ${drop + 1}` });
+  },
+};

package/themes/og-measure/slots.ts

@@ -0,0 +1,88 @@
+import { clamp, ease, progress, type Style } from "@kasaframe/core";
+import { dropBurst } from "@kasaframe/motion";
+import type { ThemeSlots } from "@kasaframe/themes/slots";
+import { layer, letters, partial, shownCount, strokePath, traceCanvas } from "@kasaframe/themes/slotkit";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 계측기 화면의 결. 바탕은 서 있는 모눈(뜻 없는 흐름을 두지 않는다),
+// 움직임은 값이 찍히고 막대가 서는 쪽만. 감속은 effects.ts 와 같은 snappy
+const snappy = ease.snappy;
+
+export const slots: ThemeSlots = {
+  surface(el) {
+    layer(
+      el,
+      "inset:0;background:var(--kf-bg);background-image:linear-gradient(rgba(203,213,225,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(203,213,225,.55) 1px,transparent 1px);background-size:56px 56px",
+    );
+    return () => {};
+  },
+
+  // 흰 카드 — 회색 1px 테두리·12px 모서리, 강조 판은 OG 파랑. 위에서 짧게 내려와 선다
+  panel(el, { at, tone }) {
+    const card = layer(
+      el,
+      `inset:0;border-radius:var(--kf-radius-md);border:1px solid var(--kf-line);box-shadow:0 1px 2px rgba(2,8,23,.06),0 8px 24px rgba(2,8,23,.06);background:${tone === "accent" ? "var(--kf-accent)" : "var(--kf-bg)"}`,
+      true,
+    );
+    return (t) => {
+      const p = snappy(progress(t, at, 0.22));
+      card.style.visibility = t >= at ? "visible" : "hidden";
+      card.style.opacity = String(p);
+      card.style.transform = `translateY(${((1 - p) * -14).toFixed(2)}px)`;
+    };
+  },
+
+  // 값이 잡히는 순간 — 넘침 없이 한 번 조이고 선다(계측은 출렁이지 않는다)
+  land(_el, { at }) {
+    return (t): Style => (t < at || t > at + 0.3 ? {} : { scale: 1 + 0.05 * (1 - snappy(progress(t, at, 0.24))) });
+  },
+
+  // 계기판처럼 — 글자는 앞에서부터 서고, 숫자 칸은 서기 전까지 돌고 있다(meter 와 같은 결)
+  write(el, { text, at, dur }) {
+    const spans = letters(el, text);
+    const chars = Array.from(text);
+    return (t) => {
+      const n = shownCount(spans.length, t, at, dur);
+      spans.forEach((s, i) => {
+        const on = t >= at && i < Math.min(spans.length, n + 2);
+        s.style.visibility = on ? "visible" : "hidden";
+        s.textContent = i < n || !/\d/.test(chars[i]) ? chars[i] : String(Math.floor(t * 26 + i * 3.7) % 10);
+      });
+    };
+  },
+
+  // 표본 선 — 파랑 3px 선이 그어지고 꺾이는 점마다 표본 점이 선다
+  trace(el, { points, at, dur, tone }) {
+    const { g, clear } = traceCanvas(el, points);
+    const css = getComputedStyle(el);
+    const color = (tone === "accent" ? css.getPropertyValue("--kf-accent") : css.getPropertyValue("--kf-ink")).trim() || "#006FD6";
+    return (t) => {
+      clear();
+      const p = clamp((t - at) / Math.max(0.05, dur));
+      if (p <= 0) return;
+      const drawn = partial(points, p);
+      g.strokeStyle = color;
+      g.lineWidth = 3;
+      g.lineJoin = "round";
+      strokePath(g, drawn);
+      g.fillStyle = color;
+      for (const [x, y] of drawn.slice(0, -1)) {
+        g.beginPath();
+        g.arc(x, y, 6, 0, Math.PI * 2);
+        g.fill();
+      }
+    };
+  },
+
+  // 드롭 — 파랑 판이 한 번 덮였다 걷히고 고리가 퍼진다(흰 바탕이라 흰 섬광은 안 보인다)
+  drop(el, { ctx, drop }) {
+    const flood = layer(el, "inset:0;background:var(--kf-accent);opacity:0");
+    const ring = layer(el, "left:50%;top:50%;width:40vmin;height:40vmin;margin:-20vmin 0 0 -20vmin;border-radius:50%;border:6px solid var(--kf-accent);opacity:0");
+    return (t) => {
+      const s = dropBurst(t, { beats: ctx.beats, drop, rules: ctx.style.motion, scene: ctx.id, source: "og-drop" });
+      flood.style.opacity = String(Math.round(s.flash * 0.85 * 100) / 100);
+      ring.style.opacity = String(s.ring.opacity);
+      ring.style.transform = `scale(${s.ring.scale.toFixed(3)})`;
+      return s;
+    };
+  },
+};

package/themes/riso-zine/slots.ts

@@ -0,0 +1,81 @@
+import { clamp, randRange, spring, type Style } from "@kasaframe/core";
+import type { ThemeSlots } from "@kasaframe/themes/slots";
+import { layer, letters, partial, shownCount, strokePath, traceCanvas } from "@kasaframe/themes/slotkit";
+import { dropPlate, misregister, paperGrain, printFrames } from "./effects.ts";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 잉크 판을 한 장씩 찍는 결로. 움직임은 printFrames 로 초당 12장에 끊는다
+export const slots: ThemeSlots = {
+  surface(el, { ctx, seed }) {
+    return paperGrain(el, { ctx, seed });
+  },
+
+  // 판 두 장 — 블루 테두리 판이 먼저, 핑크 면 판이 한 장 늦게 어긋나 찍힌다. 둘 다 곱하기라 겹친 곳이 보라
+  panel(el, { at, seed, tone }) {
+    const box = layer(el, "inset:0", true);
+    const face = layer(box, `inset:0;mix-blend-mode:multiply;background:${tone === "accent" ? "var(--kf-accent)" : "color-mix(in srgb, var(--kf-accent) 22%, transparent)"}`);
+    const edge = layer(box, "inset:0;mix-blend-mode:multiply;border:6px solid var(--kf-ink)");
+    const late = at + 1 / 12;
+    return (t) => {
+      box.style.visibility = t >= at ? "visible" : "hidden";
+      edge.style.transform = toTransform(misregister(t, { seed: `${seed}:edge`, px: 3, at }));
+      face.style.visibility = t >= late ? "visible" : "hidden";
+      face.style.transform = toTransform(misregister(t, { seed: `${seed}:face`, px: 7, at: late }));
+    };
+  },
+
+  // 판이 크게 어긋나 찍혔다가 두 장 만에 제자리 — 배율도 초당 12장으로 끊어 내려앉는다
+  land(_el, { at, seed }) {
+    return (t): Style => {
+      if (t < at) return {};
+      const q = printFrames(t - at);
+      if (q > 0.5) return {};
+      const m = misregister(t, { seed, px: 10, at, boil: 0 });
+      const k = 1 - clamp(q / 0.5);
+      return { x: (m.x ?? 0) * k, y: (m.y ?? 0) * k, scale: spring(q, { from: 1.12, to: 1, stiffness: 300, damping: 18 }) };
+    };
+  },
+
+  // 글자가 한 장씩 찍히고, 핑크 판 그림자가 어긋나 비친다(앉은 뒤에도 인쇄 결로 끓는다)
+  write(el, { text, at, dur, seed }) {
+    const spans = letters(el, text);
+    return (t) => {
+      const n = shownCount(spans.length, printFrames(t), at, dur);
+      spans.forEach((s, i) => (s.style.visibility = i < n ? "visible" : "hidden"));
+      const m = misregister(t, { seed, px: 3, at });
+      el.style.textShadow = `${(m.x ?? 0).toFixed(1)}px ${(m.y ?? 0).toFixed(1)}px 0 color-mix(in srgb, var(--kf-accent) 75%, transparent)`;
+    };
+  },
+
+  // 블루 선이 드럼처럼 끊어 그어지고, 핑크 판 선이 어긋나 뒤따른다
+  trace(el, { points, at, dur, seed, tone }) {
+    const { g, clear } = traceCanvas(el, points);
+    const blue = getComputedStyle(el).getPropertyValue("--kf-ink").trim() || "#3255A4";
+    const pink = getComputedStyle(el).getPropertyValue("--kf-accent").trim() || "#FF48B0";
+    const dx = randRange(seed, 0, -5, 5);
+    const dy = randRange(seed, 1, -5, 5);
+    return (t) => {
+      clear();
+      const p = clamp(printFrames(t - at) / Math.max(0.05, dur));
+      if (p <= 0) return;
+      g.lineCap = "round";
+      g.lineJoin = "round";
+      g.globalCompositeOperation = "multiply";
+      g.lineWidth = 10;
+      g.strokeStyle = tone === "accent" ? pink : blue;
+      strokePath(g, partial(points, p));
+      g.save();
+      g.translate(dx, dy);
+      g.strokeStyle = tone === "accent" ? blue : pink;
+      g.globalAlpha = 0.7;
+      strokePath(g, partial(points, clamp(p - 0.08)));
+      g.restore();
+      g.globalAlpha = 1;
+    };
+  },
+
+  drop(el, { ctx, drop }) {
+    return dropPlate(el, { ctx, drop });
+  },
+};
+
+const toTransform = (s: Style): string => `translate(${(s.x ?? 0).toFixed(2)}px, ${(s.y ?? 0).toFixed(2)}px)`;