kasaframe 0.0.0-stage → 0.1.1

package/templates/_shared/scenes/drop.ts

@@ -0,0 +1,30 @@
+import { applyStyle, combine, type SceneCtx } from "@kasaframe/core";
+import { beatPulse, dropBurst, enter, type MoveName } from "@kasaframe/motion";
+import { bigWord, makeStage } from "../lib/stage.ts";
+
+const WORD = "{{word}}";
+const MOVE: MoveName = "{{move}}";
+
+// 장면 시작이 드롭에 붙어 있다(template anchor drop:k). 섬광·충격파·흔들림은 dropBurst 가 style.json 규칙(드롭 전용·maxPx)대로 내고
+// window.__kf.events 에 남겨 검사가 센다 — 손으로 짜면 규칙 위반을 못 잡는다
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const stage = makeStage(root, ctx);
+    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 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));
+    };
+  },
+};

package/templates/_shared/scenes/end.ts

@@ -0,0 +1,23 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { enter, type MoveName } from "@kasaframe/motion";
+import { bigWord, fitPx, makeStage } from "../lib/stage.ts";
+
+const NAME = "{{title}}";
+const LINE = "{{line}}";
+const MOVE: MoveName = "{{move}}";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const stage = makeStage(root, ctx);
+    const name = bigWord(NAME, stage);
+    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`;
+    if (LINE) stage.cam.append(line);
+    return (t: number) => {
+      stage.tick(t);
+      applyStyle(name, enter(MOVE, t, { at: 0, scene: ctx.id }));
+      applyStyle(line, enter("fade", t, { at: 0.25, scene: ctx.id }));
+    };
+  },
+};

package/templates/_shared/scenes/hook.ts

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

package/templates/_shared/scenes/seam.ts

@@ -0,0 +1,41 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { transition3d, type Transition3dName } from "@kasaframe/motion/transition3d";
+import kf from "../kf.json";
+
+// 앞·뒤 장면을 살아 있는 화면으로 넘긴다(전환 중에도 앞 장면이 계속 돈다). 그걸 못 하는 브라우저면 assets/seam 정지 그림
+const scenes = import.meta.glob("./*.ts", { eager: true });
+
+// 이음매 — 앞 장면 마지막 화면에서 뒤 장면 첫 화면으로 잇는 모션그래픽 전환. 앞뒤 화면 두 장(assets/seam/<id>-from·to.png)은
+// kf make 가 장면을 다 쓴 뒤 찍어 넣고, 없으면 style 색 대체 화면으로 돈다. 종류: dive·portal·cards·shatter·zoomOut·fold
+const KIND = "{{transition}}" as Transition3dName;
+
+// 요청에 「영상 생성」을 적어 생성 영상(assets/gen/<id>.mp4)이 만들어졌으면 그걸 깐다 —
+// 없는 <video> 를 넣으면 페이지 ready 가 loadeddata 를 끝없이 기다려서 먼저 있는지 본다
+function exists(url: string): boolean {
+  const x = new XMLHttpRequest();
+  x.open("HEAD", url, false);
+  try {
+    x.send();
+  } catch {
+    return false;
+  }
+  return x.status === 200 && (x.getResponseHeader("content-type") ?? "").startsWith("video/");
+}
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const url = ctx.asset(`gen/${ctx.id}.mp4`);
+    if (exists(url)) {
+      const video = document.createElement("video");
+      video.src = url;
+      video.muted = true;
+      video.playsInline = true;
+      video.preload = "auto";
+      video.dataset.kfFrom = String(ctx.from);
+      video.style.cssText = "position:absolute;inset:0;width:100%;height:100%;object-fit:cover";
+      root.append(video);
+      return () => {};
+    }
+    return transition3d(root, ctx, { kind: KIND, live: { kf, scenes } });
+  },
+};

package/templates/_shared/scenes/step.ts

@@ -0,0 +1,40 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { cursor, enter, terminal, type MoveName } from "@kasaframe/motion";
+import { makeStage } from "../lib/stage.ts";
+
+const STEP = "{{word}}";
+const MOVE: MoveName = "{{move}}";
+const COMMANDS = [{ cmd: "kf new demo --template demo", out: ["장면 6개 · 60초"] }];
+
+// 시연 한 단계 — 창(터미널) 하나 + 누를 자리로 다가가는 카메라 + 커서 + 단계 번호. 화면 녹화가 있으면 창 안을 <video data-kf-from> 로 바꾼다
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    // 흐르는 바탕·컷마다 바뀌는 판이 「쉬지 않기」를 진다 — 창은 가만히 서고, 카메라는 누른 뒤 한 번만 다가간다
+    const stage = makeStage(root, ctx);
+    const cam = document.createElement("div");
+    // 창이 바탕을 다 덮으면 흐르는 바탕이 안 보여 멈춘 화면이 된다 — 둘레를 남긴다
+    cam.style.cssText = "position:relative;width:min(1100px, 70%)";
+    const win = document.createElement("div");
+    win.style.cssText = "background:var(--kf-surface);border:1px solid var(--kf-line);border-radius:var(--kf-radius-lg);box-shadow:var(--kf-shadow-lift);padding:40px 48px;min-height:520px;font-family:var(--kf-font-mono);font-size:46px;line-height:1.6;color:var(--kf-ink)";
+    const badge = document.createElement("div");
+    badge.textContent = STEP;
+    badge.style.cssText = "position:absolute;left:-24px;top:-36px;background:var(--kf-accent);color:var(--kf-on-accent);font-family:var(--kf-font-display);font-weight:800;font-size:max(44px, var(--kf-size-body));padding:10px 22px;border-radius:var(--kf-radius-pill)";
+    const pointer = document.createElement("div");
+    pointer.innerHTML = '<svg width="44" height="44" viewBox="0 0 24 24"><path d="M4 2 L4 20 L9 15 L12.5 22 L15.5 20.5 L12 13.8 L19 13.8 Z" fill="currentColor" stroke="white" stroke-width="1.4" stroke-linejoin="round"/></svg>';
+    pointer.style.cssText = "position:absolute;left:0;top:0;color:var(--kf-ink);filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))";
+    cam.append(win, badge, pointer);
+    stage.cam.append(cam);
+    const click = Math.min(1.2, ctx.dur * 0.3);
+    stage.camera.pushIn(click, { to: () => ({ x: cam.offsetLeft + 0.42 * cam.offsetWidth, y: cam.offsetTop + 0.45 * cam.offsetHeight }), scale: 1.12, dur: 1.2 });
+    return (t: number) => {
+      const st = terminal(t, COMMANDS, { at: 0.5, cps: 16 });
+      win.innerHTML = st.lines
+        .map((l) => `<div>${l.kind === "cmd" ? `<span style="color:var(--kf-accent)">${l.prompt} </span>` : ""}${l.text.replace(/</g, "&lt;")}${l.caret ? '<span style="display:inline-block;width:.55em;height:1.1em;vertical-align:-.2em;background:var(--kf-accent)"></span>' : ""}</div>`)
+        .join("");
+      const c = cursor(t, [{ t: 0, x: 900, y: 520 }, { t: click, x: 300, y: 120, click: true }, { t: ctx.dur, x: 360, y: 160 }]);
+      applyStyle(pointer, { x: c.x, y: c.y, scale: c.pressed ? 0.9 : 1 });
+      applyStyle(cam, enter(MOVE, t, { at: 0, scene: ctx.id }));
+      stage.tick(t);
+    };
+  },
+};

package/templates/ad/template.json

@@ -0,0 +1,132 @@
+{
+  "id": "ad",
+  "label": "광고",
+  "summary": "광고 — 6·15·30초 고정, 브랜드는 첫 2초 안",
+  "aspect": "16:9",
+  "width": 1920,
+  "height": 1080,
+  "fps": 60,
+  "variants": {
+    "9:16": {
+      "width": 1080,
+      "height": 1920,
+      "safeArea": {
+        "top": 230,
+        "bottom": 460,
+        "left": 40,
+        "right": 40
+      }
+    },
+    "1:1": {
+      "width": 1080,
+      "height": 1080,
+      "safeArea": {
+        "top": 60,
+        "bottom": 60,
+        "left": 60,
+        "right": 60
+      }
+    }
+  },
+  "duration": {
+    "min": 6,
+    "max": 30,
+    "default": 15,
+    "allowed": [
+      6,
+      15,
+      30
+    ]
+  },
+  "music": "optional",
+  "captions": "on",
+  "loop": false,
+  "style": "kasaterm",
+  "safeArea": {
+    "top": 60,
+    "bottom": 60,
+    "left": 80,
+    "right": 80
+  },
+  "text": {
+    "policy": "captions",
+    "maxOnScreen": 6,
+    "minPx": 56
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [],
+      "maxPerPhrase": 0,
+      "maxPx": 0
+    },
+    "cameraMove": "once-per-phrase",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "staticSec": {
+      "warn": 1.5,
+      "error": 3
+    },
+    "beatMove": "every-beat"
+  },
+  "scenes": [
+    {
+      "id": "brand",
+      "role": "brand",
+      "sec": 2,
+      "anchor": "start",
+      "idea": "브랜드 — 로고나 이름이 첫 2초 안에 또렷하게"
+    },
+    {
+      "id": "message",
+      "role": "message",
+      "weight": 1,
+      "snap": "beat",
+      "idea": "한 가지 약속 — 문장 하나, 그걸 보여 주는 그림 하나"
+    },
+    {
+      "id": "cta",
+      "role": "end",
+      "sec": 2,
+      "anchor": "end",
+      "idea": "행동 한 줄 — 주소·버튼·날짜. 로고 다시"
+    }
+  ],
+  "assets": {
+    "need": [
+      "logo"
+    ],
+    "want": [
+      "product-shots"
+    ],
+    "gen": [
+      "img:message-hero"
+    ]
+  },
+  "deliverables": [
+    "mp4",
+    "cover"
+  ],
+  "detect": {
+    "words": [
+      "광고",
+      "범퍼",
+      "범퍼 광고",
+      "CF",
+      "광고 영상",
+      "ad",
+      "advert",
+      "commercial",
+      "bumper"
+    ],
+    "hints": [
+      "6초",
+      "15초",
+      "30초",
+      "캠페인",
+      "campaign",
+      "cta"
+    ],
+    "aspect": "16:9"
+  }
+}

package/templates/demo/template.json

@@ -0,0 +1,130 @@
+{
+  "id": "demo",
+  "label": "시연",
+  "summary": "시연 — 화면 녹화(또는 창)에 확대·커서·단계 번호",
+  "aspect": "16:9",
+  "width": 1920,
+  "height": 1080,
+  "fps": 60,
+  "duration": {
+    "min": 30,
+    "max": 180,
+    "default": 60
+  },
+  "music": "optional",
+  "captions": "off",
+  "loop": false,
+  "style": "neutral-dark",
+  "safeArea": {
+    "top": 60,
+    "bottom": 120,
+    "left": 80,
+    "right": 80
+  },
+  "text": {
+    "policy": "terms-only",
+    "maxOnScreen": 3,
+    "minPx": 40
+  },
+  "motion": {
+    "beatPulse": "off",
+    "shake": {
+      "on": [],
+      "maxPerPhrase": 0,
+      "maxPx": 0
+    },
+    "cameraMove": "free",
+    "repeatSameMove": true,
+    "maxFreezeSec": 0.1,
+    "staticSec": {
+      "warn": 5,
+      "error": 8
+    },
+    "beatMove": "drop-sections"
+  },
+  "scenes": [
+    {
+      "id": "intro",
+      "role": "intro",
+      "sec": 3,
+      "anchor": "start",
+      "idea": "무엇을 해낼지 한 줄 — 결과 화면을 먼저 잠깐"
+    },
+    {
+      "id": "step1",
+      "role": "step",
+      "weight": 2,
+      "snap": "none",
+      "idea": "1단계 — 화면 녹화(또는 터미널·창 부품) + 누를 곳으로 확대 + 커서 + 단계 번호"
+    },
+    {
+      "id": "step2",
+      "role": "step",
+      "weight": 2,
+      "snap": "none",
+      "idea": "2단계 — 같은 틀, 다른 자리 확대"
+    },
+    {
+      "id": "step3",
+      "role": "step",
+      "weight": 2,
+      "snap": "none",
+      "idea": "3단계 — 같은 틀, 결과가 나오는 순간을 확대"
+    },
+    {
+      "id": "result",
+      "role": "result",
+      "weight": 1,
+      "snap": "none",
+      "idea": "결과 — 확대를 풀어 전체 화면, 걸린 시간·숫자 하나"
+    },
+    {
+      "id": "end",
+      "role": "end",
+      "sec": 3,
+      "anchor": "end",
+      "idea": "이름과 주소"
+    }
+  ],
+  "assets": {
+    "need": [],
+    "want": [
+      "screen-recording",
+      "screens",
+      "logo"
+    ],
+    "gen": []
+  },
+  "deliverables": [
+    "mp4",
+    "cover",
+    "srt",
+    "vtt"
+  ],
+  "detect": {
+    "words": [
+      "시연",
+      "데모",
+      "사용법",
+      "따라하기",
+      "화면 녹화",
+      "튜토리얼",
+      "walkthrough",
+      "demo",
+      "tutorial",
+      "how to use",
+      "screencast"
+    ],
+    "hints": [
+      "단계",
+      "클릭",
+      "설치",
+      "step",
+      "녹화"
+    ],
+    "aspect": "16:9",
+    "assetKinds": [
+      "video"
+    ]
+  }
+}

package/templates/explainer/template.json

@@ -0,0 +1,142 @@
+{
+  "id": "explainer",
+  "label": "설명",
+  "summary": "원리 설명 — 도식 하나를 단계마다 키워 가며, 화면 글은 전문 낱말만, 자막 트랙",
+  "aspect": "16:9",
+  "width": 1920,
+  "height": 1080,
+  "fps": 60,
+  "variants": {
+    "9:16": {
+      "width": 1080,
+      "height": 1920,
+      "safeArea": {
+        "top": 230,
+        "bottom": 460,
+        "left": 40,
+        "right": 40
+      }
+    }
+  },
+  "duration": {
+    "min": 60,
+    "max": 120,
+    "default": 90
+  },
+  "music": "optional",
+  "captions": "off",
+  "loop": false,
+  "style": "og",
+  "safeArea": {
+    "top": 60,
+    "bottom": 160,
+    "left": 80,
+    "right": 80
+  },
+  "text": {
+    "policy": "terms-only",
+    "maxOnScreen": 3,
+    "minPx": 44
+  },
+  "motion": {
+    "beatPulse": "off",
+    "shake": {
+      "on": [],
+      "maxPerPhrase": 0,
+      "maxPx": 0
+    },
+    "cameraMove": "once-per-phrase",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "staticSec": {
+      "warn": 5,
+      "error": 8
+    },
+    "beatMove": "drop-sections"
+  },
+  "scenes": [
+    {
+      "id": "hook",
+      "role": "hook",
+      "sec": 3,
+      "anchor": "start",
+      "idea": "결과 그림 먼저 — 다 설명하고 나면 보일 화면을 3초 안에 보여 준다"
+    },
+    {
+      "id": "question",
+      "role": "setup",
+      "weight": 1,
+      "snap": "beat",
+      "idea": "질문 하나 — 왜 그런가. 낱말 하나와 도식의 빈자리"
+    },
+    {
+      "id": "mechanism",
+      "role": "explain",
+      "weight": 4,
+      "snap": "beat",
+      "idea": "원리 — 도식 하나(또는 3D 물체 하나)를 단계마다 자라게 한다. 새 도식으로 갈아 끼우지 말고 같은 도식을 변신"
+    },
+    {
+      "id": "example",
+      "role": "example",
+      "weight": 2,
+      "snap": "beat",
+      "idea": "실제 예 하나 — 숫자가 움직이며 원리를 확인시킨다"
+    },
+    {
+      "id": "recap",
+      "role": "recap",
+      "weight": 1,
+      "snap": "beat",
+      "idea": "정리 — hook 의 그림으로 돌아와 이제 읽히게"
+    },
+    {
+      "id": "end",
+      "role": "end",
+      "sec": 3,
+      "anchor": "end",
+      "idea": "로고와 출처 한 줄"
+    }
+  ],
+  "assets": {
+    "need": [],
+    "want": [
+      "data",
+      "logo"
+    ],
+    "gen": []
+  },
+  "deliverables": [
+    "mp4",
+    "cover",
+    "srt",
+    "vtt"
+  ],
+  "detect": {
+    "words": [
+      "설명",
+      "설명영상",
+      "해설",
+      "원리",
+      "가 뭔지",
+      "이 뭔지",
+      "란 무엇",
+      "어떻게 동작",
+      "어떻게 작동",
+      "explainer",
+      "explain",
+      "how it works",
+      "what is"
+    ],
+    "hints": [
+      "도식",
+      "다이어그램",
+      "3D",
+      "개념",
+      "왜",
+      "2분",
+      "90초"
+    ],
+    "aspect": "16:9"
+  }
+}