kasaframe 0.1.1 → 0.1.4

package/templates/_shared/scenes/step.ts

@@ -1,16 +1,19 @@
 import { applyStyle, type SceneCtx } from "@kasaframe/core";
 import { cursor, enter, terminal, type MoveName } from "@kasaframe/motion";
+import type { Dress } from "@kasaframe/motion/moves";
 import { makeStage } from "../lib/stage.ts";
 
 const STEP = "{{word}}";
 const MOVE: MoveName = "{{move}}";
 const COMMANDS = [{ cmd: "kf new demo --template demo", out: ["장면 6개 · 60초"] }];
+// 창이 주인공이라 글 수는 안 쓰고 바탕·경계 덮기만 건다
+const DRESS: Dress = { bg: "{{bg}}", text: "bigWord", wipeIn: "{{wipeIn}}", wipeOut: "{{wipeOut}}" };
 
 // 시연 한 단계 — 창(터미널) 하나 + 누를 자리로 다가가는 카메라 + 커서 + 단계 번호. 화면 녹화가 있으면 창 안을 <video data-kf-from> 로 바꾼다
 export default {
   build(root: HTMLElement, ctx: SceneCtx) {
     // 흐르는 바탕·컷마다 바뀌는 판이 「쉬지 않기」를 진다 — 창은 가만히 서고, 카메라는 누른 뒤 한 번만 다가간다
-    const stage = makeStage(root, ctx);
+    const stage = makeStage(root, ctx, { dress: DRESS });
     const cam = document.createElement("div");
     // 창이 바탕을 다 덮으면 흐르는 바탕이 안 보여 멈춘 화면이 된다 — 둘레를 남긴다
     cam.style.cssText = "position:relative;width:min(1100px, 70%)";
@@ -25,12 +28,18 @@ export default {
     cam.append(win, badge, pointer);
     stage.cam.append(cam);
     const click = Math.min(1.2, ctx.dur * 0.3);
+    const typed = 0.5 + COMMANDS[0].cmd.length / 16 + 0.3;
+    const FRAMES = Math.round(ctx.dur * ctx.meta.fps);
     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 done = Math.round(FRAMES * Math.min(1, Math.max(0, (t - typed) / Math.max(0.5, ctx.dur - typed))));
+      const run = t > typed ? `<div style="color:var(--kf-dim)">프레임 ${String(done).padStart(4, " ")} / ${FRAMES}</div>` : "";
+      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("") + run;
       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 }));

package/templates/ad/template.json

@@ -69,6 +69,24 @@
     },
     "beatMove": "every-beat"
   },
+  "moves": {
+    "text": [
+      "slamWords",
+      "splitFlap",
+      "ransomLetters"
+    ],
+    "wipe": [
+      "brushWipe",
+      "flood"
+    ],
+    "roles": {
+      "brand": {
+        "text": [
+          "slamWords"
+        ]
+      }
+    }
+  },
   "scenes": [
     {
       "id": "brand",
@@ -101,7 +119,8 @@
     ],
     "gen": [
       "img:message-hero"
-    ]
+    ],
+    "act": "message"
   },
   "deliverables": [
     "mp4",

package/templates/demo/template.json

@@ -42,6 +42,17 @@
     },
     "beatMove": "drop-sections"
   },
+  "moves": {
+    "text": [
+      "bigWord",
+      "ghostStack",
+      "splitFlap"
+    ],
+    "wipe": [
+      "irisBlades",
+      "none"
+    ]
+  },
   "scenes": [
     {
       "id": "intro",

package/templates/explainer/template.json

@@ -1,7 +1,7 @@
 {
   "id": "explainer",
   "label": "설명",
-  "summary": "원리 설명 — 도식 하나를 단계마다 키워 가며, 화면 글은 전문 낱말만, 자막 트랙",
+  "summary": "원리 설명 — 도식 하나를 단계마다 키워 가며, 화면 글은 전문 낱말만, 차분한 내레이션·자막 트랙·깊은 앰비언트 곡",
   "aspect": "16:9",
   "width": 1920,
   "height": 1080,
@@ -23,7 +23,29 @@
     "max": 120,
     "default": 90
   },
-  "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": false,
   "style": "og",
@@ -54,6 +76,25 @@
     },
     "beatMove": "drop-sections"
   },
+  "moves": {
+    "text": [
+      "bigWord",
+      "ghostStack",
+      "splitFlap"
+    ],
+    "wipe": [
+      "irisBlades",
+      "flood",
+      "none"
+    ],
+    "roles": {
+      "hook": {
+        "text": [
+          "slamWords"
+        ]
+      }
+    }
+  },
   "scenes": [
     {
       "id": "hook",
@@ -69,6 +110,14 @@
       "snap": "beat",
       "idea": "질문 하나 — 왜 그런가. 낱말 하나와 도식의 빈자리"
     },
+    {
+      "id": "turn",
+      "role": "seam",
+      "sec": 1.5,
+      "snap": "beat",
+      "transition": "portal",
+      "idea": "이음매 — question 의 빈자리가 문이 되어 mechanism 도식 안으로 들어간다(3D 전환, 틀이 맡는다 — 장면 파일은 그대로 둔다)"
+    },
     {
       "id": "mechanism",
       "role": "explain",
@@ -104,7 +153,9 @@
       "data",
       "logo"
     ],
-    "gen": []
+    "gen": [],
+    "shot3d": "mechanism",
+    "act": "example"
   },
   "deliverables": [
     "mp4",

package/templates/launch/template.json

@@ -42,6 +42,37 @@
     },
     "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",
@@ -98,7 +129,9 @@
     ],
     "gen": [
       "img:reveal-hero"
-    ]
+    ],
+    "shot3d": "reveal",
+    "act": "tease"
   },
   "deliverables": [
     "mp4",

package/templates/mv/scenes/default.ts

@@ -20,14 +20,11 @@ function plans(ctx: SceneCtx) {
 }
 
 // 뮤비 한 구간 — 바탕은 잰 마디마다(드롭 구간은 박마다) 색·자리를 바꾸고, 가사는 JIZURA 층이 부른 시각에 그린다.
-// JIZURA 가 안 깔렸거나(kf setup jizura) lyrics.json 이 없으면 부른 낱말을 DOM 으로 띄운다
+// lyrics.json 이 없거나 사람이 낱말로를 골랐으면(kf lyrics use <폴더> words) 부른 낱말을 DOM 으로 띄운다
 export default {
   build(root: HTMLElement, ctx: SceneCtx) {
-    // 흐르는 빛 방울·컷마다 바뀌는 판(makeStage 바탕)이 「쉬지 않기」를 진다 — 가사 층은 흔들지 않는다
+    // 「쉬지 않기」는 가사가 진다 — 가사 층, 없으면 부르는 낱말이 왼쪽부터 차오른다. 바탕은 정지(마디마다 색만 바뀐다)
     const st = makeStage(root, ctx);
-    const dots = document.createElement("div");
-    dots.style.cssText = "position:absolute;inset:-120px;background-image:radial-gradient(circle, var(--kf-line) 3px, transparent 3.6px);background-size:60px 60px";
-    st.box.insertBefore(dots, st.box.firstChild);
     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);
@@ -39,7 +36,6 @@ export default {
     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) }));
-    // accent-soft 바탕에는 같은 계열인 빛 방울(늘 흐르는 몫)이 묻혀 가사가 서 있는 동안 0.1초 멈춤이 된다 — 빼 둔다
     const tones = ["var(--kf-bg)", "var(--kf-surface)", "var(--kf-raised)"];
     const spots = ["center", "flex-start", "flex-end"];
     let shown = "";
@@ -62,7 +58,15 @@ export default {
         });
       }
       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)));
+      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;
@@ -70,7 +74,6 @@ export default {
     const draw = (t: number) => {
       last = t;
       undecided = jz === null;
-      dots.style.transform = `translate(${((t * 24) % 60).toFixed(2)}px, ${((t * 36) % 60).toFixed(2)}px)`;
       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);

package/templates/mv/template.json

@@ -28,7 +28,7 @@
   "lyrics": {
     "mode": "kinetic",
     "align": "kf lyrics align <곡> --text 공식가사.txt --lang ko — 보컬 분리 + whisper 강제 정렬로 줄·어절 시각 → lyrics.json(공식 가사가 글자 정본, MMS 는 비상업 가중치라 안 씀)",
-    "layer": "JIZURA 가사 층(@kasaframe/jizura jizuraLayer) — kf setup jizura, 없으면 DOM 낱말",
+    "layer": "JIZURA 가사 층(@kasaframe/jizura jizuraLayer) — 엔진·자주 쓰는 한글 글꼴은 실려 있다, lyrics.json 이 없으면 DOM 낱말",
     "lipsync": "rhubarb — 캐릭터 입 모양을 보컬에 맞출 자리(선택)"
   },
   "loop": false,
@@ -144,7 +144,9 @@
       "img:character",
       "img:world-bg"
     ],
-    "genVideo": []
+    "genVideo": [],
+    "shot3d": "drop",
+    "act": "main"
   },
   "deliverables": [
     "mp4",

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/blueprint/THEME.md

@@ -0,0 +1,64 @@
+# 청사진 도면 `blueprint`
+
+**비유: 정보가 청사진 도면으로 제도된다 — 펜이 외형을 긋고, 치수선이 숫자를 재고, 절단선이 지나가며 속이 단면으로 드러난다.** 1925 미 해군 공창 시안타입 도면처럼 프러시안 블루 종이에 흰 선. 숫자는 늘 치수로 앉는다(보조선 · 화살촉 치수선 · 그 위 수). 선 종류가 곧 뜻이고, 드롭은 청사진을 찍는 노광 한 번이다.
+
+## 기술 낱말이 이 세계에서 되는 것
+
+| 기술 | 도면 | 화면에서 |
+|---|---|---|
+| 게이트웨이 한 주소 | 기준면 A — 모든 치수를 재는 한 기준 | `balloon` kind datum + 그 면에서 잰 `dimension` |
+| 공급자(회사) | 부품 — 품번 풍선이 붙은 판 | `penLine`(외형) + `balloon` |
+| 모델 | 부품의 치수 · 단면 길이 | 단면 A–A 에서 `hatch` 길이 = 모델 수, `dimension` 이 잰다 |
+| 요청 | 조립선(중심선)을 따라 들어와 붙는 부품 | `penLine` center + 부품이 그 선을 따라 옮겨 간다 |
+| 라우팅 | 같은 축에 끼우는 부품을 바꾼다 | 새 부품은 외형선, 지난 부품은 가상선 |
+| 폴백 | 가상선(이점쇄선) — 움직이는 부품의 다른 자리 | `penLine` kind phantom |
+| 캐시 | 「상세도 참조」 — 다시 그리지 않고 이미 그린 칸을 가리킨다 | `balloon` 으로 앞 칸을 짚는다 |
+| 제도하는 손 | T자 — 지금 긋는 줄로 옮겨 가는 자 | `tSquare` |
+| 지연 | 걸린 시간 = 막대 길이, 해칭이 꼭 그 시간 동안 찬다 | `hatch`(dur = 걸린 초) + `dimension` |
+| 비용 | 가격 = 길이(척도) | 정가 막대 vs 같은 자리 가상선 안 1/10 해칭 |
+| 가격 변경 | 개정 — 빨간 색연필 구름과 Δ | `revisionCloud` |
+| 시간대 | 24 시간 자(눈금) 위 잘린 구간 | `penLine` 눈금 + `hatch` + `dimension` |
+
+## 맞는 내용·용도
+
+- 구조·크기·비교가 있는 기술 내용 — 구성 요소(부품)와 그 관계, 수치 비교(길이로 잰다), 바뀐 점(개정), 내부 구성(단면).
+- 용도: 설명(explainer)·공개(launch)·홍보(promo)·시연(demo)·쇼츠(shorts). 마디마다 도면 한 장(칸), 드롭에 `exposure`.
+- 화면 글은 부품 이름·주소·모델 ID·숫자·짧은 낱말. 라틴 글은 Barlow Condensed(좁은 제도 고딕), 수·ID 는 B612 Mono, 한글은 Pretendard.
+
+## 금지
+
+- 청색 바탕·흰 선·빨간 색연필 밖의 색. 빨강은 개정 구름·Δ·바뀐 수 하나에만.
+- 그림자·그라데이션·흐림·빛 번짐·종이결·접힘·얼룩. 면은 단색, 선은 선 종류의 굵기 그대로.
+- 원근·기울어진 투상·회전하는 카메라. 정투상 평면뿐, 카메라 이동 없음(구도는 컷).
+- 치수 없이 떠 있는 큰 숫자. 숫자는 치수선 위에 앉는다(큰 숫자 하나도 긴 치수로).
+- 뜻 없는 바탕 움직임 — 흐르는 모눈·떠다니는 선. 모눈(`draftSheet`)은 서 있고, 움직이는 것은 긋는 펜 끝·자라는 치수·차오르는 해칭·옮겨 가는 부품뿐.
+- 지어낸 도면 번호·척도·서명. 표제란 칸에는 실제 값(이름·주소·날짜)만.
+- 슬로건·감성 문장.
+
+## 움직임
+
+- 쉬지 않는다: 제도하는 순서가 화면을 잇는다 — 중심선 → 외형선(펜 끝 점이 보인다) → 보조선 → 치수선이 가운데서 양쪽으로 → 수 → 해칭 → 글씨(안내선 먼저). 그리고 T자가 다음에 그을 줄로 늘 미끄러져 간다(흰 가는 선만으로는 화면 차가 작아 멈춘 화면으로 잡힌다).
+- 구도는 마디마다 바꾼다: 도면 한 장 = 칸 하나(분해도 → 단면 A–A → 기준면 판 → 축과 부품 → 조립 …). 컷은 `display:none`.
+- 박마다 큰 사건 하나: 부품 몇이 제도되거나, 치수가 뻗거나, 절단선이 지나가거나, 해칭이 차거나, 개정 구름이 둘러친다.
+- 드롭은 노광 — 흰 섬광 한 번과 램프 띠, 그 순간 긴 치수가 큰 수를 잰다.
+
+## 효과
+
+같은 레포 안에서는 `effects.ts` 를 바로, 프로젝트에서는 `fx("blueprint")`. layer 는 `build` 에서 만들고 `(t) => …` 에서 부른다. 한 장면은 보통 `draftSheet`(맨 아래) → `tSquare` → 도면 칸들 → `exposure`(드롭 장면 맨 위) 순서로 쌓는다. T자는 장면 하나에 하나, 박마다 그 박에 긋는 줄 높이를 `stops` 로 준다 — 화면이 쉬지 않는 몫을 제도하는 손이 진다. 흔들림은 도면 칸 틀에만(종이째 흔들면 가장자리에 페이지 검정이 비친다).
+
+| 효과 | 꼴 | 하는 일 |
+|---|---|---|
+| `draftSheet` | layer | 청사진 종이·제도 모눈·테두리, 서 있다 |
+| `tSquare` | layer | T자 — 지금 긋는 줄 높이로 미끄러져 가는 눈금 자(`stops` 의 [초, y]) |
+| `penLine` | layer | 제도선 — `shapes`(line·poly·rect·circle)를 차례로 긋는다, `kind` 선 종류, `kind: "cut"` + `letter` 면 절단선 A … A |
+| `dimension` | layer | 치수 — 보조선·치수선·화살촉, 그동안 수가 값까지 잰다(`text` 면 낱말) |
+| `hatch` | layer | 단면 해칭 — 45° 선이 한쪽부터 차오른다 |
+| `balloon` | layer | 품번 풍선·기준면 표(`kind: "datum"`) |
+| `revisionCloud` | layer | 빨간 색연필 개정 구름과 Δ |
+| `titleBlock` | layer | 표제란 — 칸이 그어지고 이름·값이 찍힌다 |
+| `lettering` | layer | 제도 글씨 — 안내선 먼저, 한 자씩 |
+| `exposure` | layer | 드롭 노광 — 섬광·램프 띠, 흔들림을 돌려준다 |
+
+색 칸: `grid`·`gridMajor` 는 제도 모눈(가는 칸·다섯 칸마다 굵은 칸). 변주는 바탕·선·색연필·모눈을 한 벌로 바꾼다(청사진 → 갈색 세피아 인화·흑백 디아조 같은 계열).
+
+견본: `sample/` — OpenGateway 소개 15초(docs/briefs/og-intro-15s.md), 곡 kawaii-friends.mp3 4–19초(드롭 7.34초). 부품 아홉 분해도와 품번 풍선 → 절단선 A–A → 단면 A–A(해칭 길이 = 모델 수, 치수가 잰다) → 기준면 A 판 위 주소와 끝점 구멍 넷·두 형식 치수 → 같은 축에 박마다 다른 모델 부품(지난 것은 가상선) → 분해도가 조립된다 → 드롭 노광, 긴 치수가 102 모델·한 주소를 잰다 → 24 시간 자 00–10 해칭·개정 구름 −90% → 정가 막대와 가상선 안 1/10 → 첫 토큰 셋이 그 ms 동안 해칭으로 찬다 → 표제란 끝 카드.