@kaydash9999/banker-plugins 0.10.0 → 0.12.0

package/skills/3d-intro-build/references/curate.mjs

@@ -0,0 +1,301 @@
+#!/usr/bin/env node
+/*
+ * First-party still-curation server for the 3d-intro-build skill.
+ *
+ * Sits BETWEEN still generation (cheap paid) and video generation (the big paid step): the user
+ * picks/approves one still per scene in a real browser BEFORE any Sora-2 call is spent. The project
+ * convention is a self-contained local page on an unused port, never a claude.ai artifact.
+ *
+ * Contract (both files live in the project dir):
+ *   IN   curate-input.json  {"scenes":[{"id","label","variants":[{"file","prompt?"}]}]}
+ *          file = png path relative to projectDir (served with a path-traversal guard).
+ *   OUT  selection.json     {"scenes":[{"id","chosen":<file>,"regenerate?":<note>}]}
+ *          chosen = the file the user picked; regenerate = a tweaked-prompt note (present only when
+ *          the user wants that scene re-generated). Written on POST /select.
+ *
+ * Routes:  GET /            -> curation page (rebuilt from curate-input.json each load, so a
+ *                              regenerate-loop re-read shows fresh stills without a restart)
+ *          GET /<img>       -> a still image (image/png/…; traversal-guarded; Cache-Control no-store)
+ *          POST /select     -> writes selection.json, returns {ok:true}
+ *
+ * Runtime: Node >=18 builtins ONLY (node:http / node:fs / node:path). No external deps, no shell —
+ * cross-platform (path.join / path.sep everywhere). Loopback by default; PREVIEW_HOST=0.0.0.0 for LAN.
+ *
+ * Usage:
+ *   node curate.mjs [projectDir] [--port N]
+ *     projectDir   dir holding curate-input.json + the stills it references (default: cwd)
+ *     --port       preferred port; falls back through a candidate list if busy/omitted
+ *   On listen it writes <projectDir>/curate-port.txt and prints  CURATE http://localhost:<port>/
+ */
+import http from 'node:http';
+import fs from 'node:fs';
+import path from 'node:path';
+
+// ---- args ----
+const argv = process.argv.slice(2);
+let dirArg = null;
+let portArg = null;
+for (let i = 0; i < argv.length; i++) {
+  const a = argv[i];
+  if (a === '--port') portArg = Number(argv[++i]);
+  else if (a.startsWith('--port=')) portArg = Number(a.slice('--port='.length));
+  else if (!a.startsWith('--')) dirArg = a;
+}
+
+const DIR = path.resolve(dirArg || process.cwd());
+if (!fs.existsSync(DIR) || !fs.statSync(DIR).isDirectory()) {
+  console.error(`curate: not a directory: ${DIR}`);
+  process.exit(1);
+}
+const INPUT = path.join(DIR, 'curate-input.json');
+const OUTPUT = path.join(DIR, 'selection.json');
+
+const MIME = {
+  '.html': 'text/html;charset=utf-8',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.webp': 'image/webp',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+};
+
+// ---- html helpers ----
+const escHtml = (s) => String(s).replace(/[&<>]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c]));
+const escAttr = (s) => String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+// posix URL for a project-relative file, each segment encoded (server decodes with decodeURIComponent)
+const fileUrl = (file) => '/' + String(file).replace(/^[.][/\\]/, '').split(/[\\/]/).map(encodeURIComponent).join('/');
+
+function renderCard(v, sceneId, idx, selected) {
+  const cap = v.prompt ? `<span class="cap">${escHtml(v.prompt)}</span>` : '';
+  return `<button type="button" class="card${selected ? ' selected' : ''}" data-file="${escAttr(v.file)}">`
+    + `<img src="${escAttr(fileUrl(v.file))}" alt="${escAttr(sceneId)} 변형 ${idx + 1}" loading="lazy">${cap}</button>`;
+}
+
+function renderScene(s) {
+  const variants = Array.isArray(s.variants) ? s.variants : [];
+  const cards = variants.map((v, i) => renderCard(v, s.id, i, i === 0)).join('\n        ');
+  const body = cards || '<p class="empty">이 씬에 스틸 변형이 없습니다.</p>';
+  return `<section class="scene" data-scene-id="${escAttr(s.id)}">
+      <div class="scene-head">
+        <h2>${escHtml(s.label || s.id)}</h2>
+        <span class="chip keep" data-chip>이 스틸로 승인</span>
+      </div>
+      <div class="cards">
+        ${body}
+      </div>
+      <label class="regen">
+        <span>재생성 메모 (선택 · 비우면 위에서 고른 스틸로 승인)</span>
+        <textarea data-regen rows="2" placeholder="예: 배경을 더 어둡게, 캐릭터 2명 추가"></textarea>
+      </label>
+    </section>`;
+}
+
+function renderPage(manifest) {
+  const scenes = Array.isArray(manifest.scenes) ? manifest.scenes : [];
+  const rows = scenes.length ? scenes.map(renderScene).join('\n    ') : '<p class="empty">curate-input.json 에 scenes 가 없습니다.</p>';
+  return `<!doctype html>
+<html lang="ko">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>스틸 큐레이션${manifest.title ? ' — ' + escHtml(manifest.title) : ''}</title>
+<style>
+  :root {
+    --bg: #f5f3ef; --panel: #ffffff; --ink: #23202a; --muted: #6c6675;
+    --line: #e2ddd4; --accent: #7c5cbf; --accent-ink: #ffffff;
+    --keep: #2f7d4f; --keep-bg: #e6f3ea; --regen: #b26a00; --regen-bg: #fbefd8;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg: #17151b; --panel: #201d26; --ink: #ece8f1; --muted: #a49db1;
+      --line: #322d3c; --accent: #a488e6; --accent-ink: #17151b;
+      --keep: #7fd3a0; --keep-bg: #1d3327; --regen: #e6b063; --regen-bg: #3a2c14;
+    }
+  }
+  * { box-sizing: border-box; }
+  body { margin: 0; background: var(--bg); color: var(--ink);
+    font: 15px/1.5 system-ui, -apple-system, "Segoe UI", "Noto Sans KR", sans-serif; }
+  .bar { position: sticky; top: 0; z-index: 5; background: var(--panel);
+    border-bottom: 1px solid var(--line); }
+  .bar-in { max-width: 1100px; margin: 0 auto; padding: 12px 20px;
+    display: flex; align-items: center; gap: 16px; justify-content: space-between; }
+  .muted { color: var(--muted); font-size: 13px; }
+  .btn { border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-ink);
+    font-size: 14px; font-weight: 600; padding: 10px 18px; cursor: pointer; }
+  .btn:disabled { opacity: .5; cursor: default; }
+  main { max-width: 1100px; margin: 0 auto; padding: 20px; }
+  .scene { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
+    padding: 16px; margin-bottom: 18px; }
+  .scene-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
+  .scene-head h2 { font-size: 17px; margin: 0; }
+  .chip { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
+  .chip.keep { color: var(--keep); background: var(--keep-bg); }
+  .chip.regen-on { color: var(--regen); background: var(--regen-bg); }
+  .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
+  .card { padding: 0; border: 2px solid var(--line); border-radius: 10px; background: var(--panel);
+    cursor: pointer; overflow: hidden; text-align: left; display: flex; flex-direction: column; }
+  .card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
+  .card .cap { padding: 8px 10px; font-size: 12px; color: var(--muted);
+    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+  .card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
+  .regen { display: block; margin-top: 12px; }
+  .regen span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
+  .regen textarea { width: 100%; resize: vertical; border: 1px solid var(--line); border-radius: 8px;
+    padding: 8px 10px; font: inherit; background: var(--bg); color: var(--ink); }
+  .empty { color: var(--muted); }
+  [hidden] { display: none !important; }
+  .done { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
+    background: color-mix(in srgb, var(--bg) 82%, transparent); z-index: 10; }
+  .done-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
+    padding: 28px 36px; font-size: 18px; font-weight: 600; }
+</style>
+</head>
+<body>
+<header class="bar">
+  <div class="bar-in">
+    <div><strong>스틸 큐레이션</strong> <span class="muted">씬별로 스틸을 고르고, 다시 만들 씬엔 메모를 남기세요 (영상 생성은 이 확정 이후에만)</span></div>
+    <button id="confirm" class="btn">선택 확정</button>
+  </div>
+</header>
+<main id="app">
+    ${rows}
+</main>
+<div id="done" class="done" hidden><div class="done-card">선택 저장됨 — 에이전트로 돌아가세요</div></div>
+<script>
+  const app = document.getElementById('app');
+  app.addEventListener('click', (e) => {
+    const card = e.target.closest('.card');
+    if (!card) return;
+    const scene = card.closest('.scene');
+    scene.querySelectorAll('.card').forEach((c) => c.classList.remove('selected'));
+    card.classList.add('selected');
+  });
+  app.addEventListener('input', (e) => {
+    const ta = e.target.closest('[data-regen]');
+    if (!ta) return;
+    const chip = ta.closest('.scene').querySelector('[data-chip]');
+    const has = ta.value.trim() !== '';
+    chip.textContent = has ? '재생성 요청됨' : '이 스틸로 승인';
+    chip.classList.toggle('regen-on', has);
+    chip.classList.toggle('keep', !has);
+  });
+  document.getElementById('confirm').addEventListener('click', async () => {
+    const scenes = [], missing = [];
+    document.querySelectorAll('.scene').forEach((scene) => {
+      const id = scene.getAttribute('data-scene-id');
+      const sel = scene.querySelector('.card.selected');
+      const regen = (scene.querySelector('[data-regen]') || {}).value?.trim() || '';
+      if (!sel) { missing.push(id); return; }
+      const s = { id, chosen: sel.getAttribute('data-file') };
+      if (regen) s.regenerate = regen;
+      scenes.push(s);
+    });
+    if (missing.length) { alert('스틸을 선택하지 않은 씬: ' + missing.join(', ')); return; }
+    const btn = document.getElementById('confirm');
+    btn.disabled = true;
+    try {
+      const r = await fetch('/select', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ scenes }) });
+      if (!r.ok) throw new Error('HTTP ' + r.status);
+      document.getElementById('done').hidden = false;
+    } catch (err) {
+      btn.disabled = false;
+      alert('저장 실패: ' + (err && err.message ? err.message : err));
+    }
+  });
+</script>
+</body>
+</html>
+`;
+}
+
+// ---- request handling ----
+function servePage(res) {
+  let manifest;
+  try { manifest = JSON.parse(fs.readFileSync(INPUT, 'utf8')); }
+  catch (e) {
+    res.writeHead(500, { 'Content-Type': 'text/plain;charset=utf-8', 'Cache-Control': 'no-store' });
+    res.end(`curate-input.json 을 읽지 못했습니다 (${INPUT}): ${e.message}`);
+    return;
+  }
+  const html = renderPage(manifest);
+  res.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8', 'Cache-Control': 'no-store' });
+  res.end(html);
+}
+
+function serveFile(urlPath, res) {
+  // Resolve inside DIR and reject any path that escapes it (traversal guard) — matches serve.mjs.
+  const fp = path.normalize(path.join(DIR, urlPath));
+  if (fp !== DIR && !fp.startsWith(DIR + path.sep)) { res.writeHead(403); res.end('403'); return; }
+  if (!fs.existsSync(fp) || fs.statSync(fp).isDirectory()) { res.writeHead(404); res.end('404'); return; }
+  const type = MIME[path.extname(fp).toLowerCase()] || 'application/octet-stream';
+  res.writeHead(200, {
+    'Content-Type': type,
+    'Content-Length': fs.statSync(fp).size,
+    'Cache-Control': 'no-store',
+  });
+  fs.createReadStream(fp).pipe(res);
+}
+
+function handleSelect(req, res) {
+  let body = '';
+  let tooBig = false;
+  req.on('data', (c) => {
+    body += c;
+    if (body.length > 1_000_000) { tooBig = true; req.destroy(); }
+  });
+  req.on('end', () => {
+    if (tooBig) { res.writeHead(413); res.end('413'); return; }
+    let payload;
+    try { payload = JSON.parse(body); }
+    catch { res.writeHead(400, { 'Content-Type': 'application/json;charset=utf-8' }); res.end('{"ok":false,"error":"invalid json"}'); return; }
+    const scenes = (Array.isArray(payload.scenes) ? payload.scenes : []).map((s) => {
+      const out = { id: String(s.id), chosen: String(s.chosen) };
+      const note = s.regenerate == null ? '' : String(s.regenerate).trim();
+      if (note) out.regenerate = note;
+      return out;
+    });
+    try { fs.writeFileSync(OUTPUT, JSON.stringify({ scenes }, null, 2) + '\n'); }
+    catch (e) {
+      res.writeHead(500, { 'Content-Type': 'application/json;charset=utf-8' });
+      res.end(JSON.stringify({ ok: false, error: String(e.message || e) }));
+      return;
+    }
+    res.writeHead(200, { 'Content-Type': 'application/json;charset=utf-8', 'Cache-Control': 'no-store' });
+    res.end(JSON.stringify({ ok: true, written: 'selection.json', scenes: scenes.length }));
+    console.log(`selection.json written -> ${OUTPUT} (${scenes.length} scene(s))`);
+  });
+}
+
+const server = http.createServer((req, res) => {
+  const method = req.method || 'GET';
+  const urlPath = decodeURIComponent((req.url || '/').split('?')[0]);
+  if (method === 'POST' && urlPath === '/select') { handleSelect(req, res); return; }
+  if (method !== 'GET' && method !== 'HEAD') { res.writeHead(405); res.end('405'); return; }
+  if (urlPath === '/' || urlPath === '/index.html') { servePage(res); return; }
+  serveFile(urlPath, res);
+});
+
+// ---- pick a free port (preferred first, then a candidate list) ----
+// Distinct from serve.mjs's list so a preview server and this curation server can coexist during dev;
+// EADDRINUSE still falls through if any are taken.
+const candidates = [8941, 8942, 8943, 8850, 8860, 8870, 8223, 8421];
+const ports = portArg ? [portArg, ...candidates.filter((p) => p !== portArg)] : candidates;
+// Default to loopback (matches the printed localhost URL). Set PREVIEW_HOST=0.0.0.0 for LAN / on-device mobile preview.
+const HOST = process.env.PREVIEW_HOST || '127.0.0.1';
+
+(function tryPort(i) {
+  if (i >= ports.length) { console.error('curate: no free port available'); process.exit(1); }
+  server.once('error', (e) => {
+    if (e.code === 'EADDRINUSE') tryPort(i + 1);
+    else { console.error(e); process.exit(1); }
+  });
+  server.listen(ports[i], HOST, () => {
+    try { fs.writeFileSync(path.join(DIR, 'curate-port.txt'), String(ports[i])); } catch { /* best effort */ }
+    console.log(`CURATE http://${HOST === '127.0.0.1' ? 'localhost' : HOST}:${ports[i]}/`);
+    console.log(`curating ${DIR}  (in: curate-input.json  out: selection.json)`);
+  });
+})(0);
+
+process.on('SIGINT', () => { server.close(); process.exit(0); });
+process.on('SIGTERM', () => { server.close(); process.exit(0); });

package/skills/3d-intro-build/references/index-template.html

@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+  <title>BRAND — the world of SUBJECT</title>
+  <meta name="description" content="Scroll to fly through the world of BRAND." />
+  <style>
+    /* Theme the engine here. These match your generated scenes' background + palette. */
+    :root, .sw-root {
+      --sw-bg: #F5EDE0;          /* == the scene background colour */
+      --sw-ink: #241d2b;
+      --sw-ink-soft: #6a6072;
+      --sw-accent: #9B7EBD;      /* per-section accents override this at runtime */
+    }
+  </style>
+</head>
+<body>
+  <div id="top"></div>
+  <div id="world"></div>
+
+  <script src="scrub-engine.js"></script>
+  <script>
+    mountScrollWorld(document.getElementById('world'), {
+      brand: { name: 'BRAND', href: '#top' },
+      cta: { label: 'Order now', href: '#finale' },
+      hint: 'scroll to fly in',
+      diveScroll: 1.3,
+      connScroll: 0.9,
+      sections: [
+        // One object per scene, in order. `accent` colours the copy/route for that scene.
+        // First section is the hero (its copy greets on landing); last carries the CTA.
+        {
+          id: 'sceneA', label: 'Scene A',
+          still: 'assets/sceneA.webp',
+          clip: 'assets/vid/sceneA.mp4',
+          clipMobile: 'assets/vid/sceneA-m.mp4',   // mobile opt-in only: lighter 720p encode served on phones
+          accent: '#8FB98A',
+          // scroll: 1.6, linger: 0.45,  // optional pacing: longer dwell; camera settles mid-scene
+          eyebrow: 'Value prop label',
+          title: 'The hero line.',
+          body: 'One plain-spoken sentence about this stage.',
+          tags: ['Proof', 'Proof', 'Proof'],
+        },
+        // …middle scenes…
+        {
+          id: 'finale', label: 'The Product',
+          still: 'assets/product.webp',
+          clip: 'assets/vid/finale.mp4',
+          clipMobile: 'assets/vid/finale-m.mp4',
+          accent: '#9B7EBD',
+          eyebrow: 'And it all pours into',
+          title: 'One perfect thing.',
+          body: 'The payoff sentence.',
+          tags: [],
+          cta: { primary: { label: 'Get started', href: '#' },
+                 secondary: { label: 'See more', href: '#' } },
+        },
+      ],
+      // length === sections.length - 1, in order. Generated per SKILL.md Step 5.
+      connectors: [
+        'assets/vid/conn1.mp4',
+        // 'assets/vid/conn2.mp4', …
+      ],
+      // Mobile opt-in only: lighter connectors for phones — same length/order as `connectors`.
+      connectorsMobile: [
+        'assets/vid/conn1-m.mp4',
+        // 'assets/vid/conn2-m.mp4', …
+      ],
+    });
+  </script>
+</body>
+</html>

package/skills/3d-intro-build/references/prompts.md

@@ -0,0 +1,171 @@
+# 프롬프트 템플릿 & 인테이크 (Azure 파이프라인)
+
+이 문서는 **채워 넣는 슬롯** 모음이다.
+scroll-world 의 씬/아트디렉션 **구조**를 따르되, 문구는 이 스킬의 Azure 파이프라인(`gpt-image-2` 스틸 + `Sora-2` fly-through)에 맞게 새로 썼다.
+Higgsfield·Monid 같은 외부 CLI 플래그는 쓰지 않는다 — 크기·길이·품질은 어댑터 인자(`size`, `seconds`, `quality`)로만 넘긴다.
+
+모델에 실제로 보내는 프롬프트 문자열은 **영어**로 둔다(이미지·영상 모델이 영어에 맞춰져 있고, 스모크로 검증한 문구도 영어다).
+설명·가이드는 한글이다.
+
+**핵심 원칙 — 코히전은 반복에서 온다.**
+아래 **스타일 서문(style preamble)** 을 모든 씬 스틸 프롬프트에 **글자 그대로 동일하게** 넣어라.
+그 동일한 텍스트가 여러 씬을 "한 세계"로 묶는다.
+
+---
+
+## 1. 인테이크 체크리스트 (SKILL Step 1)
+
+진행 전 아래를 받아 적는다. 굵은 다섯 항목은 **반드시** 묻는다.
+
+- **`SUBJECT`** — 대상 비즈니스/제품 + 한 줄 소개.
+- **`BRAND`** — 화면에 표시할 브랜드명.
+- **`SCENES[]` (순서 있는 씬 목록)** — 각 씬마다 `id`, `label`, `subject`(디오라마에 뭐가 있는지), `eyebrow`, `title`, `body`(1문장), `tags[]`(0~3). 마지막 씬 = 히어로 제품 + CTA.
+- **`ORIENTATION`** — `720x1280`(세로) 또는 `1280x720`(가로). 스틸과 영상 크기가 이 값으로 통일된다. 세로는 모바일/스토리, 가로는 데스크톱/랜딩에 맞는다.
+- **`BUDGET`** — 상한 USD. 씬 수 × (이미지 1장 + 영상 클립)로 추정하며, 어떤 유료 호출보다 먼저 승인 게이트에서 총액을 제시한다.
+
+부수 항목(없으면 기본값 사용):
+
+- `PALETTE` — 4~6개 명명 hex. 예: `taro #9B7EBD, cream #F5EDE0, caramel #C88A5A, matcha #8FB98A, plum #3A2E48`. 하나를 씬 **배경색**(보통 가장 밝은 색), 하나를 기본 **accent** 로 고른다. 이 배경색을 페이지 테마(`--sw-bg`)에도 그대로 쓴다.
+- `TONE` — 한두 단어(cozy/premium, playful, industrial…).
+- `STYLE` — 아트디렉션(기본은 아래 clay diorama).
+- `CAMERA_FEEL` — fly-through(디오라마를 내려다보다 안으로 급강하) | walkthrough(한 번에 쭉 전진) | locked-iso(고정 아이소메트릭 활공). 느낌으로 제시하고 트레이드오프 한 줄씩 곁들인다.
+- `MOBILE` — yes/no. yes 면 세로 9:16 렌더를 별도로 만들어 `clipMobile`/`stillMobile` 로 배선한다(대략 2배 비용, 승인 게이트에 반영).
+- `STILLS_SOURCE` — 기본 `gpt-image-2`(`generateImage`). 씬 간 코히전을 더 강하게 원하면 `FLUX.2-pro`(`generateImageFlux`) 옵트인.
+
+---
+
+## 2. 스타일 서문 (기본: clay diorama)
+
+모든 씬 프롬프트에 **글자 그대로 재사용**한다. 대괄호만 브랜드 팔레트/배경으로 치환한다.
+
+```
+Isometric low-poly 3D diorama floating as a small rounded island on a plain solid
+[BG_HEX] background with a soft contact shadow beneath it. Soft matte clay 3D render,
+rounded toy-model shapes, gentle warm studio lighting, soft long shadows, tilt-shift
+miniature look. Cohesive color palette of [PALETTE]. Highly detailed, centered
+composition, absolutely no text, no letters, no numbers, no logos.
+```
+
+대체 방향(첫 두 문장만 바꾸고 팔레트/no-text 꼬리는 유지):
+
+- **Flat papercraft:** "Isometric layered paper-craft diorama, matte cardstock, clean die-cut edges, subtle drop shadows between layers."
+- **Glossy toy:** "Isometric glossy vinyl-toy diorama, smooth plastic shading, soft rim light, collectible figurine look."
+- **Claymation:** "Isometric stop-motion clay set, visible thumbprints, handmade plasticine texture, soft studio softbox light."
+- **Neon night:** "Isometric miniature at night, warm interior glow and neon signage, moody rim light, wet reflective ground."
+- **Photoreal architectural**(부동산·호스피탈리티·프리미엄): "Ultra-photorealistic architectural photography of a single cohesive [subject], cinematic wide-angle, warm golden-hour light, natural materials, restrained designer furnishings, editorial magazine quality, shallow depth of field, no people." 포토리얼은 floating-island 프레이밍을 버리고 full-bleed 로 가며(어두운 페이지 배경이 프리미엄하게 읽힌다), dive 는 지붕을 여는 대신 문/유리를 통과한다.
+
+---
+
+## 3. 씬 스틸 프롬프트 (stills, `gpt-image-2`)
+
+각 씬마다: **[스타일 서문]** 다음에 그 씬의 subject 한 단락을 붙인다.
+
+```
+[STYLE PREAMBLE]
+Subject: [SCENE.subject — 미니어처 장면을 묘사: 건물/공간, 일하는 캐릭터 몇, 이 단계의
+비즈니스를 드러내는 소품들].
+```
+
+팁:
+
+- 구체적인 소품을 이름으로 지정한다(장면을 고정한다): tanks, cauldrons, conveyor, crates, awning, string lights, benches, scooters, map pins.
+- 마지막 "히어로 제품" 씬은 디오라마-섬 프레이밍을 버리고, 같은 배경 위에 떠 있는 **하나의 큼직한 제품**을 중심에 두고 작은 소품 몇 개만 궤도처럼 두른다.
+- **중앙으로 구성한다.** 페이지는 모든 클립을 `object-fit:cover` 로 그린다. 초점 대상을 가로 중앙에 약간의 헤드룸과 함께 두고, 가장자리에 중요한 것을 두지 않는다.
+
+어댑터 인자(플래그 아님):
+
+- `size` = `ORIENTATION` (`720x1280` 세로 / `1280x720` 가로). Sora 크기와 반드시 일치시킨다.
+- `quality` = `low`(미리보기·저렴) 또는 `high`(최종).
+- **N3 주의:** v1 경로가 실패해 classic 폴백이 뜨면 반환 크기가 `1024x1536`(2:3)라 `720x1280` 이 아니다. `createVideo` 에 넣기 전에 Sora 크기로 리사이즈(ffmpeg `scale`)하거나 재생성한다. v1 경로(`720x1280`)가 검증된 happy path 다.
+
+### FLUX 코히전 옵트인 (`generateImageFlux` / FLUX.2-pro)
+
+씬 사이 톤·질감 일관성을 더 강하게 원할 때만 쓴다.
+동일한 스타일 서문을 넣되 어댑터에는 `width`/`height` 를 `ORIENTATION` 에 맞춰 나눠 넘긴다(`720x1280` → `width:720, height:1280`).
+크리덴셜이 없으면 조용히 실패하지 말고 `gpt-image-2` 로 정직하게 폴백한다("FLUX 미수집 → gpt-image-2 로 진행").
+
+---
+
+## 4. Fly-through — forward-chaining leg 프롬프트 (`Sora-2`, `createVideo`)
+
+Azure `/videos` 는 `input_reference` 를 **딱 하나만** 받는다(두-이미지는 400).
+그래서 연속성은 **forward-chaining** 으로 만든다: 이전 클립의 **실제 마지막 프레임**을 다음 클립의 `input_reference` 로 넣는다.
+아래 굵은 절이 **모션 핸드오프 계약**이다 — 글자 그대로 유지하고, 씬별 표현은 가운데 MOVE 슬롯에 넣는다.
+
+**Leg 0 (씨앗) — 씬 1 스틸에서 dive-in:**
+`input_reference = 씬 1 스틸`.
+
+```
+Single continuous cinematic camera move, no cuts. Begin high and far, looking down at the
+whole [SCENE 1 subject] from outside like a tiny model. The camera slowly glides forward and
+descends toward it, sweeping in toward [FOCAL POINT], as if flying inside. As the camera pushes
+in, the roof and upper structure gently lift and open away to reveal the warm interior.
+[STYLE tail + PALETTE]. Smooth, graceful, slow motion, subtle parallax. No text, no captions.
+```
+
+여닫을 건물이 없는 씬(들판·광장·도로)이면 지붕 절을 "the camera flies low across [the scene] toward [focal point]." 로 바꾼다.
+
+**Leg i (i ≥ 1) — 체이닝된 프레임에서 다음 씬으로:**
+`input_reference = colorMatch(extractLastFrame(clip[i-1]))` (직전 클립의 마지막 프레임을 톤 정합 1차 처리한 것).
+
+```
+Single continuous cinematic camera move, no cuts. Continue the same continuous camera flight
+forward into the next area of the world, smooth dolly, one continuous shot. [MID-LEG MOVE —
+아래 라이브러리에서 선택, 없으면 생략.] The camera moves into [SCENE i] toward [FOCAL POINT].
+In the final second, settle back into a slow, steady forward glide toward [the doorway / opening
+/ direction of the next scene]. [STYLE tail + PALETTE]. Smooth, graceful, slow motion, subtle
+parallax. No text, no captions.
+```
+
+### Mid-leg MOVE 라이브러리 (컨셉으로 고른다; 밋밋한 활공이면 생략)
+
+leg **안쪽**에서는 되감기·역방향 카메라가 안전하다(한 번에 렌더되는 연속 샷). 절대 안 되는 건 **씨앗(seam) 프레임의 역방향**뿐이다.
+
+- **Half-orbit**(제품·럭셔리): "sweeping in a slow half-orbit around [the hero object], keeping it centered, then continuing past it"
+- **Crane-up reveal**(스케일·아트리움): "rising smoothly as the full scale of [the space] reveals below"
+- **Low lateral track**(생산 라인·카운터·선반): "tracking low and level alongside [the line], foreground objects sliding past in parallax"
+- **Push-in + ease back**(디테일·공예): "pushing in close to [the craft moment] until it nearly fills the frame, then easing gently back out"
+- **Rise-and-swoop**(여행·야외): "climbing in a gentle arc over [the terrain], then swooping down toward [the next focal point]"
+
+**locked-iso 절**(`CAMERA_FEEL = locked-iso`): 위 라이브러리를 통째로 건너뛰고 아래를 모든 leg 의 MOVE 슬롯에 글자 그대로 넣는다.
+
+```
+The camera keeps exactly the same high isometric angle throughout — no rotation, no orbit, no
+tilt. It only travels straight and level, the world sliding past beneath the same view.
+```
+
+**각 leg 렌더 직후, 다음 leg 를 만들기 전에 마지막 프레임을 확인한다.**
+잔잔한 전진 활공의 한 컷으로 읽혀야 한다(옆으로 흐르는 모션블러·완결 안 된 오빗 금지).
+아니면 그 leg 를 재생성한다 — 나쁜 핸드오프 프레임 하나가 뒤의 모든 leg 를 오염시킨다.
+
+어댑터 인자: `model: 'sora-2'`, `size: ORIENTATION`, `seconds`(기본 4; 예산·길이에 따라 조정).
+
+---
+
+## 5. 두-이미지 커넥터 프롬프트 (옵트인 · **UNVALIDATED**)
+
+`detectTwoImageSupport()` 가 참일 때만, 그리고 사용자가 명시적으로 선택할 때만 쓴다.
+두 씬 사이에 **진짜 커넥터**(첫 프레임 → 마지막 프레임 보간)를 만들어 aerial hop 을 넣는다.
+`createVideoTwoImage({ firstPng: dive_i 마지막 프레임, lastPng: dive_{i+1} 첫 프레임 })`.
+스모크로 검증되지 않은 경로다 — **어떤 실패에도 forward-chaining 으로 폴백**한다.
+
+```
+Single continuous cinematic camera move, no cuts. The camera smoothly pulls up and back out of
+[SCENE i], rising into the sky, then glides forward across the connected miniature world and
+arrives above [SCENE i+1], beginning to descend toward it. One connected miniature clay world,
+seamless flowing aerial transition. [STYLE tail + PALETTE]. Smooth graceful slow motion. No text,
+no captions.
+```
+
+히어로-제품 피날레로 들어가는 마지막 커넥터: "…glides forward and the world dissolves toward a single giant [PRODUCT] floating in soft [BG] space, arriving in front of it."
+
+---
+
+## 6. 씬별 카피 (엔진 config 용)
+
+- `eyebrow` — 2~4단어, 대문자 느낌(가치 제안 라벨).
+- `title` — 3~6단어, 그 비트의 헤드라인. 첫 씬 = 사이트 히어로 라인, 마지막 = 페이오프 + CTA 를 얹는다.
+- `body` — 한 문장, 방문자 입장에서 평이하게.
+- `tags` — 0~3개 짧은 증거 칩(예: "Fresh-cooked", "30-min delivery").
+
+이 값들은 `assemble.mjs` 가 읽는 `intro.json` 의 각 섹션에 그대로 들어가고, `mountScrollWorld` 가 화면 카피로 렌더한다.