kasaframe 0.0.0-stage → 0.1.3

package/templates/mv/template.json

@@ -0,0 +1,178 @@
+{
+  "id": "mv",
+  "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": 360,
+    "default": 240
+  },
+  "music": "required",
+  "captions": "off",
+  "lyrics": {
+    "mode": "kinetic",
+    "align": "kf lyrics align <곡> --text 공식가사.txt --lang ko — 보컬 분리 + whisper 강제 정렬로 줄·어절 시각 → lyrics.json(공식 가사가 글자 정본, MMS 는 비상업 가중치라 안 씀)",
+    "layer": "JIZURA 가사 층(@kasaframe/jizura jizuraLayer) — 엔진·자주 쓰는 한글 글꼴은 실려 있다, lyrics.json 이 없으면 DOM 낱말",
+    "lipsync": "rhubarb — 캐릭터 입 모양을 보컬에 맞출 자리(선택)"
+  },
+  "loop": false,
+  "style": "kawaii-pastel",
+  "safeArea": {
+    "top": 60,
+    "bottom": 140,
+    "left": 80,
+    "right": 80
+  },
+  "text": {
+    "policy": "lyrics",
+    "maxOnScreen": 8,
+    "minPx": 56
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 10
+    },
+    "cameraMove": "once-per-phrase",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "staticSec": {
+      "warn": 5,
+      "error": 8
+    },
+    "beatMove": "drop-sections"
+  },
+  "layout": "sections",
+  "sectionIdeas": {
+    "intro": "인트로 — 세계와 주인공을 조용히 소개한다.. 컷은 마디마다(드롭은 박마다), 시각은 잰 박 목록(ctx.beats)을 그대로 — 템포가 흔들려도 BPM 으로 곱하지 않는다. 부른 낱말은 그 시각에 뜨고 뜻을 그림으로 받친다.",
+    "verse": "벌스 — 주인공의 일상·이야기 한 토막.. 컷은 마디마다(드롭은 박마다), 시각은 잰 박 목록(ctx.beats)을 그대로 — 템포가 흔들려도 BPM 으로 곱하지 않는다. 부른 낱말은 그 시각에 뜨고 뜻을 그림으로 받친다.",
+    "main": "본 구간 — 이야기를 밀고 간다.. 컷은 마디마다(드롭은 박마다), 시각은 잰 박 목록(ctx.beats)을 그대로 — 템포가 흔들려도 BPM 으로 곱하지 않는다. 부른 낱말은 그 시각에 뜨고 뜻을 그림으로 받친다.",
+    "build": "빌드업 — 후렴을 향해 모아 올린다. 컷 간격을 점점 줄인다. 컷은 마디마다(드롭은 박마다), 시각은 잰 박 목록(ctx.beats)을 그대로 — 템포가 흔들려도 BPM 으로 곱하지 않는다. 부른 낱말은 그 시각에 뜨고 뜻을 그림으로 받친다.",
+    "chorus": "후렴 — 가장 큰 그림.. 컷은 마디마다(드롭은 박마다), 시각은 잰 박 목록(ctx.beats)을 그대로 — 템포가 흔들려도 BPM 으로 곱하지 않는다. 부른 낱말은 그 시각에 뜨고 뜻을 그림으로 받친다.",
+    "drop": "드롭·후렴 — 영상에서 가장 크고 화려하게.. 컷은 마디마다(드롭은 박마다), 시각은 잰 박 목록(ctx.beats)을 그대로 — 템포가 흔들려도 BPM 으로 곱하지 않는다. 부른 낱말은 그 시각에 뜨고 뜻을 그림으로 받친다.",
+    "break": "브리지·쉬는 구간 — 한 장면을 길게, 색·빛이 바뀐다. 컷은 마디마다(드롭은 박마다), 시각은 잰 박 목록(ctx.beats)을 그대로 — 템포가 흔들려도 BPM 으로 곱하지 않는다. 부른 낱말은 그 시각에 뜨고 뜻을 그림으로 받친다.",
+    "outro": "아웃트로 — 처음 장면으로 돌아오며 맺는다. 마지막은 카메라가 서고 바탕·낱말이 흘러 멈추지 않는다. 컷은 마디마다(드롭은 박마다), 시각은 잰 박 목록(ctx.beats)을 그대로 — 템포가 흔들려도 BPM 으로 곱하지 않는다. 부른 낱말은 그 시각에 뜨고 뜻을 그림으로 받친다."
+  },
+  "scenes": [
+    {
+      "id": "intro",
+      "role": "intro",
+      "weight": 1,
+      "anchor": "start",
+      "snap": "bar",
+      "idea": "인트로 — 세계와 주인공을 조용히 소개한다"
+    },
+    {
+      "id": "verse1",
+      "role": "verse",
+      "weight": 2,
+      "snap": "bar",
+      "idea": "벌스 — 주인공의 일상·이야기 한 토막"
+    },
+    {
+      "id": "chorus1",
+      "role": "chorus",
+      "weight": 2,
+      "anchor": "drop:0",
+      "snap": "bar",
+      "idea": "후렴 — 가장 큰 그림"
+    },
+    {
+      "id": "verse2",
+      "role": "verse",
+      "weight": 2,
+      "snap": "bar",
+      "idea": "벌스 2 — 이야기가 한 걸음 나간다"
+    },
+    {
+      "id": "chorus2",
+      "role": "chorus",
+      "weight": 2,
+      "snap": "bar",
+      "idea": "후렴 2 — 첫 후렴과 다른 자리·색"
+    },
+    {
+      "id": "bridge",
+      "role": "break",
+      "weight": 1,
+      "snap": "bar",
+      "idea": "브리지 — 한 장면을 길게"
+    },
+    {
+      "id": "chorus3",
+      "role": "chorus",
+      "weight": 2,
+      "anchor": "drop:last",
+      "snap": "bar",
+      "idea": "마지막 후렴 — 가장 크게"
+    },
+    {
+      "id": "outro",
+      "role": "outro",
+      "sec": 6,
+      "anchor": "end",
+      "idea": "아웃트로 — 처음 장면으로 돌아오며 맺는다"
+    }
+  ],
+  "assets": {
+    "need": [],
+    "want": [
+      "character",
+      "lyrics"
+    ],
+    "gen": [
+      "img:character",
+      "img:world-bg"
+    ],
+    "genVideo": [],
+    "shot3d": "drop",
+    "act": "main"
+  },
+  "deliverables": [
+    "mp4",
+    "cover",
+    "srt",
+    "vtt"
+  ],
+  "detect": {
+    "words": [
+      "뮤비",
+      "뮤직비디오",
+      "뮤직 비디오",
+      "MV",
+      "가사",
+      "music video",
+      "lyric video",
+      "lyrics"
+    ],
+    "hints": [
+      "곡 전체",
+      "노래",
+      "보컬",
+      "가수",
+      "앨범",
+      "song"
+    ],
+    "aspect": "16:9"
+  }
+}

package/templates/promo/template.json

@@ -0,0 +1,185 @@
+{
+  "id": "promo",
+  "label": "홍보",
+  "summary": "곡이 끌고 가는 홍보 — 드롭에서 가장 크게, 문구 없이 기능 낱말과 끝 카드만",
+  "aspect": "16:9",
+  "width": 1920,
+  "height": 1080,
+  "fps": 60,
+  "duration": {
+    "min": 30,
+    "max": 60,
+    "default": 60
+  },
+  "music": "required",
+  "captions": "none",
+  "loop": false,
+  "style": "kasaterm",
+  "safeArea": {
+    "top": 60,
+    "bottom": 60,
+    "left": 80,
+    "right": 80
+  },
+  "text": {
+    "policy": "none",
+    "maxOnScreen": 3,
+    "minPx": 56
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 12
+    },
+    "cameraMove": "once-per-phrase",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "staticSec": {
+      "warn": 1.5,
+      "error": 3
+    },
+    "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",
+      "role": "intro",
+      "weight": 2,
+      "anchor": "start",
+      "snap": "bar",
+      "idea": "곡 첫 구간 — 제품의 세계를 조용히 연다. 킥이 들어오기 전이라 큰 움직임은 아끼고, 화면 하나를 천천히 민다"
+    },
+    {
+      "id": "build",
+      "role": "build",
+      "weight": 2,
+      "snap": "bar",
+      "idea": "제품을 쓰는 손 하나 — 실제 화면·부품이 한 동작을 해낸다. 드롭 직전 마디에서 모아 올린다"
+    },
+    {
+      "id": "seam",
+      "role": "seam",
+      "weight": 1,
+      "snap": "bar",
+      "idea": "이음매 — build 의 마지막 화면 속으로 다이브해 드롭의 세계로 넘어간다(3D 전환, 틀이 맡는다 — 장면 파일은 그대로 둔다)",
+      "transition": "dive"
+    },
+    {
+      "id": "drop1",
+      "role": "drop",
+      "weight": 2,
+      "anchor": "drop:0",
+      "snap": "bar",
+      "idea": "첫 드롭 — 섬광·충격파·흔들림 중 하나로 크게 한 번, 그다음 기능 낱말 하나"
+    },
+    {
+      "id": "features",
+      "role": "features",
+      "weight": 3,
+      "snap": "bar",
+      "idea": "기능 낱말 셋 — 한 낱말에 한 동작, 같은 움직임을 되풀이하지 않는다"
+    },
+    {
+      "id": "drop2",
+      "role": "drop",
+      "weight": 2,
+      "anchor": "drop:last",
+      "snap": "bar",
+      "idea": "메인 드롭 — 영상에서 가장 크게. 지금까지 나온 부품이 한 화면에 모인다"
+    },
+    {
+      "id": "end",
+      "role": "end",
+      "sec": 4,
+      "anchor": "end",
+      "idea": "끝 카드 — 이름·한 줄·주소. 카메라는 서고, 멈춘 화면이 되지 않게 글자·밑줄·바탕이 흐른다"
+    }
+  ],
+  "assets": {
+    "need": [
+      "logo"
+    ],
+    "want": [
+      "screens",
+      "components"
+    ],
+    "gen": [],
+    "genVideo": [
+      "vid:seam"
+    ],
+    "shot3d": "drop1",
+    "act": "intro"
+  },
+  "deliverables": [
+    "mp4",
+    "cover"
+  ],
+  "detect": {
+    "words": [
+      "홍보",
+      "프로모",
+      "프로모션",
+      "홍보영상",
+      "브랜드 영상",
+      "하이라이트 영상",
+      "promo",
+      "promotion",
+      "sizzle",
+      "hype"
+    ],
+    "hints": [
+      "퓨처베이스",
+      "뮤비",
+      "음악에 맞춰",
+      "곡에 맞춰",
+      "1분",
+      "소개 영상",
+      "브랜드",
+      "music video"
+    ],
+    "aspect": "16:9"
+  }
+}

package/templates/shorts/scenes/hook.ts

@@ -0,0 +1,37 @@
+import { applyStyle, clip, ease, type SceneCtx } from "@kasaframe/core";
+import type { Dress } from "@kasaframe/motion/moves";
+import { makeStage } from "../lib/stage.ts";
+
+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 {
+  const x = new XMLHttpRequest();
+  x.open("HEAD", url, false);
+  try {
+    x.send();
+  } catch {
+    return false;
+  }
+  return x.status === 200 && (x.getResponseHeader("content-type") ?? "").startsWith("image/");
+}
+
+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, 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 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(img, { scale: 1 + 0.06 * (t / ctx.dur) });
+    };
+  },
+};

package/templates/shorts/template.json

@@ -0,0 +1,196 @@
+{
+  "id": "shorts",
+  "label": "쇼츠",
+  "summary": "세로 쇼츠 — 첫 1.5초에 결과, 화면 글은 전문 낱말만, 말은 차분한 내레이션과 자막 트랙으로, 깊은 앰비언트 곡을 아래 깔고, 끝이 처음으로 이어진다",
+  "aspect": "9:16",
+  "width": 1080,
+  "height": 1920,
+  "fps": 60,
+  "duration": {
+    "min": 15,
+    "max": 60,
+    "default": 45
+  },
+  "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",
+  "safeArea": {
+    "top": 230,
+    "bottom": 460,
+    "left": 40,
+    "right": 40
+  },
+  "text": {
+    "policy": "terms-only",
+    "maxOnScreen": 3,
+    "minPx": 48
+  },
+  "motion": {
+    "beatPulse": "off",
+    "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": [
+      "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",
+      "role": "hook",
+      "sec": 1.5,
+      "anchor": "start",
+      "idea": "결과 먼저 — 가장 센 숫자나 그림 하나가 첫 프레임부터 화면에 있다"
+    },
+    {
+      "id": "setup",
+      "role": "setup",
+      "weight": 2,
+      "snap": "beat",
+      "idea": "조건 하나로 문제를 재현한다 — 보는 사람이 예상하는 쪽을 먼저 보여 준다"
+    },
+    {
+      "id": "turn",
+      "role": "seam",
+      "sec": 1.2,
+      "snap": "beat",
+      "transition": "dive",
+      "idea": "이음매 — setup 의 마지막 화면 속으로 다이브해 explain 의 무대로 넘어간다(3D 전환, 틀이 맡는다 — 장면 파일은 그대로 둔다)"
+    },
+    {
+      "id": "explain",
+      "role": "explain",
+      "weight": 4,
+      "snap": "beat",
+      "idea": "원리 — 큰 대상 하나를 끝까지 변신시킨다. 장면을 자르지 말고, 드러낼 때 다가가고 비교할 때 물러난다(stage.camera — 이유 없는 이동은 안 된다). 화면 글은 전문 낱말·숫자만"
+    },
+    {
+      "id": "reveal",
+      "role": "reveal",
+      "weight": 2,
+      "snap": "beat",
+      "idea": "이름 공개 — 지금까지 본 것의 이름과 숫자 하나"
+    },
+    {
+      "id": "limit",
+      "role": "limit",
+      "weight": 1,
+      "snap": "beat",
+      "idea": "남는 한계 한 가지 — 숫자나 낱말 하나로"
+    },
+    {
+      "id": "end",
+      "role": "end",
+      "sec": 2,
+      "anchor": "end",
+      "idea": "로고 — 되돌이 — 마지막으로 찍히는 프레임(lib/stage.ts 의 lastT = dur - 1/fps)에서 hook 첫 화면과 똑같아지게 움직임을 끝낸다"
+    }
+  ],
+  "assets": {
+    "need": [],
+    "want": [
+      "logo",
+      "data"
+    ],
+    "gen": [
+      "img:hook-bg"
+    ],
+    "shot3d": "explain",
+    "act": "setup"
+  },
+  "deliverables": [
+    "mp4",
+    "cover",
+    "srt",
+    "vtt"
+  ],
+  "detect": {
+    "words": [
+      "쇼츠",
+      "숏츠",
+      "숏폼",
+      "릴스",
+      "틱톡",
+      "세로 영상",
+      "shorts",
+      "short-form",
+      "reels",
+      "tiktok"
+    ],
+    "hints": [
+      "세로",
+      "9:16",
+      "vertical",
+      "45초",
+      "30초"
+    ],
+    "aspect": "9:16"
+  }
+}