kasaframe 0.0.0-stage → 0.1.3

package/templates/demo/template.json

@@ -0,0 +1,141 @@
+{
+  "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"
+  },
+  "moves": {
+    "text": [
+      "bigWord",
+      "ghostStack",
+      "splitFlap"
+    ],
+    "wipe": [
+      "irisBlades",
+      "none"
+    ]
+  },
+  "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,193 @@
+{
+  "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": "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": 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"
+  },
+  "moves": {
+    "text": [
+      "bigWord",
+      "ghostStack",
+      "splitFlap"
+    ],
+    "wipe": [
+      "irisBlades",
+      "flood",
+      "none"
+    ],
+    "roles": {
+      "hook": {
+        "text": [
+          "slamWords"
+        ]
+      }
+    }
+  },
+  "scenes": [
+    {
+      "id": "hook",
+      "role": "hook",
+      "sec": 3,
+      "anchor": "start",
+      "idea": "결과 그림 먼저 — 다 설명하고 나면 보일 화면을 3초 안에 보여 준다"
+    },
+    {
+      "id": "question",
+      "role": "setup",
+      "weight": 1,
+      "snap": "beat",
+      "idea": "질문 하나 — 왜 그런가. 낱말 하나와 도식의 빈자리"
+    },
+    {
+      "id": "turn",
+      "role": "seam",
+      "sec": 1.5,
+      "snap": "beat",
+      "transition": "portal",
+      "idea": "이음매 — question 의 빈자리가 문이 되어 mechanism 도식 안으로 들어간다(3D 전환, 틀이 맡는다 — 장면 파일은 그대로 둔다)"
+    },
+    {
+      "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": [],
+    "shot3d": "mechanism",
+    "act": "example"
+  },
+  "deliverables": [
+    "mp4",
+    "cover",
+    "srt",
+    "vtt"
+  ],
+  "detect": {
+    "words": [
+      "설명",
+      "설명영상",
+      "해설",
+      "원리",
+      "가 뭔지",
+      "이 뭔지",
+      "란 무엇",
+      "어떻게 동작",
+      "어떻게 작동",
+      "explainer",
+      "explain",
+      "how it works",
+      "what is"
+    ],
+    "hints": [
+      "도식",
+      "다이어그램",
+      "3D",
+      "개념",
+      "왜",
+      "2분",
+      "90초"
+    ],
+    "aspect": "16:9"
+  }
+}

package/templates/launch/template.json

@@ -0,0 +1,163 @@
+{
+  "id": "launch",
+  "label": "공개",
+  "summary": "제품 공개 — 감추고, 드러내고, 기능 셋, 이름",
+  "aspect": "16:9",
+  "width": 1920,
+  "height": 1080,
+  "fps": 60,
+  "duration": {
+    "min": 30,
+    "max": 90,
+    "default": 45
+  },
+  "music": "required",
+  "captions": "none",
+  "loop": false,
+  "style": "neutral-dark",
+  "safeArea": {
+    "top": 60,
+    "bottom": 60,
+    "left": 80,
+    "right": 80
+  },
+  "text": {
+    "policy": "none",
+    "maxOnScreen": 2,
+    "minPx": 64
+  },
+  "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"
+  },
+  "moves": {
+    "text": [
+      "ghostStack",
+      "splitFlap",
+      "slamWords",
+      "echoStack"
+    ],
+    "wipe": [
+      "irisBlades",
+      "flood",
+      "brushWipe"
+    ],
+    "roles": {
+      "tease": {
+        "text": [
+          "ghostStack"
+        ]
+      },
+      "reveal": {
+        "text": [
+          "slamWords"
+        ]
+      },
+      "end": {
+        "text": [
+          "neonSign",
+          "splitFlap"
+        ]
+      }
+    }
+  },
+  "scenes": [
+    {
+      "id": "tease",
+      "role": "tease",
+      "weight": 2,
+      "anchor": "start",
+      "snap": "bar",
+      "idea": "감춘다 — 빛·실루엣·가장자리만. 무엇인지 아직 모른다"
+    },
+    {
+      "id": "reveal",
+      "role": "reveal",
+      "weight": 2,
+      "anchor": "drop:0",
+      "snap": "bar",
+      "idea": "드러낸다 — 제품 전체가 처음 보인다. 영상에서 가장 큰 순간"
+    },
+    {
+      "id": "feature1",
+      "role": "feature",
+      "weight": 1,
+      "snap": "bar",
+      "idea": "기능 하나 — 낱말 하나 + 그 기능이 실제로 움직이는 화면"
+    },
+    {
+      "id": "feature2",
+      "role": "feature",
+      "weight": 1,
+      "snap": "bar",
+      "idea": "기능 둘 — feature1 과 다른 움직임"
+    },
+    {
+      "id": "feature3",
+      "role": "feature",
+      "weight": 1,
+      "snap": "bar",
+      "idea": "기능 셋 — 앞 둘과 다른 움직임"
+    },
+    {
+      "id": "name",
+      "role": "end",
+      "sec": 5,
+      "anchor": "end",
+      "idea": "이름 — Introducing 뒤에 제품 이름, 날짜나 주소 한 줄"
+    }
+  ],
+  "assets": {
+    "need": [
+      "logo"
+    ],
+    "want": [
+      "product-shots",
+      "screens"
+    ],
+    "gen": [
+      "img:reveal-hero"
+    ],
+    "shot3d": "reveal",
+    "act": "tease"
+  },
+  "deliverables": [
+    "mp4",
+    "cover"
+  ],
+  "detect": {
+    "words": [
+      "공개",
+      "출시",
+      "런칭",
+      "론칭",
+      "발표 영상",
+      "신제품",
+      "처음 선보",
+      "introducing",
+      "launch",
+      "release",
+      "announce"
+    ],
+    "hints": [
+      "티저",
+      "teaser",
+      "새로 나온",
+      "새 버전",
+      "keynote"
+    ],
+    "aspect": "16:9"
+  }
+}

package/templates/mv/scenes/default.ts

@@ -0,0 +1,98 @@
+import { onSeek } from "@kasaframe/adapters";
+import { applyStyle, combine, type SceneCtx } from "@kasaframe/core";
+import { jizuraLayer, jizuraPlans, jizuraReady, wordsOf, type LyricLine } from "@kasaframe/jizura";
+import { beatPulse, enter } from "@kasaframe/motion";
+import { makeStage } from "../lib/stage.ts";
+
+const WORD = "{{word}}";
+
+// 가사 낱말 시각(영상 전체 기준 초). lyrics.json 이 없으면 빈 목록 — 장면은 구간 이름만 띄운다
+const lyrics = Object.values(import.meta.glob("../lyrics.json", { eager: true, import: "default" }))[0] as { lines?: LyricLine[] } | undefined;
+
+// 가사 층 플랜 둘 — 벌스는 차분하게, 드롭부터 크게(큰 움직임은 후렴·드롭에만). 밝은 테마면 밝은 바탕 위 어두운 글.
+// 거부 목록·seed 를 바꾸면 컷이 다시 굴려진다 — 스틸을 다시 본다
+function plans(ctx: SceneCtx) {
+  const schemes = ctx.style.scheme === "dark" ? "dark" : "light";
+  jizuraPlans({
+    calm: { style: schemes === "light" ? "ocean" : "gold", schemes, moods: ["calm", "emotional", "editorial"], fx: { motion: 0.55, glitch: 0.1, chroma: 0.3, decor: 0.35 } },
+    drop: { style: schemes === "light" ? "sakura" : "mono", schemes, moods: ["pop", "graphic", "emotional", "glitch"], fx: { motion: 0.9, glitch: 0.3, chroma: 0.6, decor: 0.5 } },
+  });
+}
+
+// 뮤비 한 구간 — 바탕은 잰 마디마다(드롭 구간은 박마다) 색·자리를 바꾸고, 가사는 JIZURA 층이 부른 시각에 그린다.
+// lyrics.json 이 없거나 사람이 낱말로를 골랐으면(kf lyrics use <폴더> words) 부른 낱말을 DOM 으로 띄운다
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    // 「쉬지 않기」는 가사가 진다 — 가사 층, 없으면 부르는 낱말이 왼쪽부터 차오른다. 바탕은 정지(마디마다 색만 바뀐다)
+    const st = makeStage(root, ctx);
+    const stage = document.createElement("div");
+    stage.style.cssText = "position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;padding:8% 10%;box-sizing:border-box;container-type:size";
+    st.cam.append(stage);
+
+    plans(ctx);
+    const calm = jizuraLayer(root, { ctx, plan: "calm" });
+    const big = jizuraLayer(root, { ctx, plan: "drop" });
+    let jz: boolean | null = null;
+    const decided = jizuraReady().then((ok) => (jz = ok));
+
+    const lines = (lyrics?.lines ?? []).filter((l) => l.end > ctx.from && l.start < ctx.from + ctx.dur).map((l) => ({ ...l, ws: wordsOf(l) }));
+    const tones = ["var(--kf-bg)", "var(--kf-surface)", "var(--kf-raised)"];
+    const spots = ["center", "flex-start", "flex-end"];
+    let shown = "";
+    let spans: HTMLSpanElement[] = [];
+
+    function words(t: number) {
+      const T = ctx.from + t;
+      const line = lines.find((l) => T >= l.start && T < l.end + 0.4);
+      const ws = line ? line.ws : [{ w: WORD, start: ctx.from, end: ctx.from + ctx.dur }];
+      const key = line ? line.text : WORD;
+      if (key !== shown) {
+        shown = key;
+        stage.replaceChildren();
+        spans = ws.map((w) => {
+          const s = document.createElement("span");
+          s.textContent = w.w;
+          s.style.cssText = "display:inline-block;margin:0 .16em;font-family:var(--kf-font-display);font-size:min(var(--kf-size-hero), 11cqw);font-weight:800;line-height:1.15;color:var(--kf-ink);letter-spacing:var(--kf-tracking)";
+          stage.append(s);
+          return s;
+        });
+      }
+      const pulse = beatPulse(t, { beats: ctx.beats, rules: ctx.style.motion, scene: ctx.id, source: "lyric" });
+      spans.forEach((s, i) => {
+        applyStyle(s, combine(enter("pop", T, { at: ws[i]?.start ?? 0, scene: ctx.id }), pulse));
+        // 부르는 동안 왼쪽부터 강조색이 찬다 — 부른 데까지가 보인다
+        const w = ws[i];
+        const p = w ? Math.min(1, Math.max(0, (T - w.start) / Math.max(0.05, w.end - w.start))) : 1;
+        s.style.backgroundImage = `linear-gradient(90deg, var(--kf-accent) ${(p * 100).toFixed(2)}%, var(--kf-ink) ${(p * 100).toFixed(2)}%)`;
+        s.style.backgroundClip = "text";
+        s.style.color = "transparent";
+      });
+    }
+
+    let last = 0;
+    let undecided = false;
+    const draw = (t: number) => {
+      last = t;
+      undecided = jz === null;
+      const inDrop = ctx.beats.inDrop(t);
+      const grid = inDrop ? ctx.beats.beats : ctx.beats.bars;
+      const cut = Math.max(0, grid.filter((g) => g <= t).length - 1);
+      st.box.style.background = tones[cut % tones.length];
+      stage.style.justifyContent = spots[cut % spots.length];
+      stage.style.display = jz === false ? "flex" : "none";
+      calm.canvas.style.display = jz && !inDrop ? "block" : "none";
+      big.canvas.style.display = jz && inDrop ? "block" : "none";
+      // 아직 모를 때도 층에 시각을 넘긴다 — 층이 플랜을 기다렸다 그 프레임을 칠한다
+      if (jz === false) words(t);
+      else (inDrop ? big : calm)(t);
+      st.tick(t);
+    };
+    // 가사 층을 쓸지는 엔진·가사를 받아 봐야 안다 — 정하기 전에 그린 프레임은 정한 뒤 다시 그린다(층이 플랜을 기다리는 사이에 정해질 수도 있다)
+    onSeek(async () => {
+      if (!undecided) return;
+      await decided;
+      if (!root.hidden) draw(last);
+    });
+    return draw;
+  },
+};